人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなブログのコメント欄についてですが、できればほかのブログサービスのように、自分のコメントの背景と、訪問者の背景を変えて、わかりやすくしたいと思っています。
ですが、セレクタをしみじみと調べてみても、自分のコメントと、訪問者のコメントのセレクタが違わないので、別々にするということは、CSSからでは、できそうにありません。
javascriptの条件分岐などで、li内のaのhrefを指定するとかして、自分のほうを指定する方法が、あるのかもしれませんが、私の能力では、ちょっとそういうコードは書けそうにありません。
どなたか、そういうスバらしいコードを作れる方に、助けていただけると、ありがたいのですが。


●質問者: Michiko_70554148
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

サブを作ったので、そちらのほうでやりたいと思っています。
http://feckless.hatenablog.com/entry/2016/01/15/235611#js-comment-box


1 ● a-kuma3
ベストアンサー

こんな感じでいけると思います。

$(function() {
 var myid = document.documentElement.dataset.author;
 $(".comment-user-id span[data-user-name=\"" + myid + "\"]").each(function() {
 this.parentNode.parentNode.parentNode.style.backgroundColor = "gray";
 });
});

背景色を "gray" にしてます。

補足があったサブの方だと、コメントの背景に白のレース模様の画像が指定されているので、左右の脇にしか背景色が反映されません。
レース模様の画像を残したいのであれば、色を変えた画像をもうひとつ用意して、以下のようにすれば良いと思います。

$(function() {
 var myid = document.documentElement.dataset.author;
 $(".comment-user-id span[data-user-name=\"" + myid + "\"]").each(function() {
 this.parentNode.parentNode.parentNode.style.backgroundImage = "url(自分のコメントの背景画像のURL)";
 });
});



追記です。
コメント欄が javascript で生成されるために、先に書いたコードではうまくいかなかったと思われます。
コメント欄が生成されるタイミングを監視して背景のイメージを変えるようにしてみました。

$(function() {
 var MutationObserver = window.MutationObserver || window.WebkitMutationObserver;
 new MutationObserver(function (records) {
 records.forEach(function (record) {
 var myid = document.documentElement.dataset.author;
 $(".comment-user-id span[data-user-name=\"" + myid + "\"]", record.target).each(function() {
 this.parentNode.parentNode.parentNode.style.backgroundImage = "url(http://cdn-ak.f.st-hatena.com/images/fotolife/M/Michiko_70554148/20160117/20160117014850.png)";
 });
 });
 }).observe(document.body.querySelector(".comment-box > ul.comment"), {childList: true});
});

Michiko_70554148さんのコメント
さっそくにありがとうございます。 以下を入れてみたのですが、なぜか反映していないのですが…。 <script>$(function() { var myid = document.documentElement.dataset.author; $(".comment-user-id span[data-user-name=\"" + myid + "\"]").each(function() { this.parentNode.parentNode.parentNode.style.backgroundImage = "url(http://cdn-ak.f.st-hatena.com/images/fotolife/M/Michiko_70554148/20160117/20160117014850.png)"; }); });</script>

Michiko_70554148さんのコメント
先頭に<script>を入れています。

Michiko_70554148さんのコメント
&lt;script&gt; を入れています。

a-kuma3さんのコメント
あー、コメント欄をスクリプトで作ってるのかあ。 こんな感じで、改善しませんか? >|javascript| $(function() { setTimeout(function() { var myid = document.documentElement.dataset.author; $(".comment-user-id span[data-user-name=\"" + myid + "\"]").each(function() { this.parentNode.parentNode.parentNode.style.backgroundImage = "url(自分のコメントの背景画像のURL)"; }); }, 100); }); ||<

Michiko_70554148さんのコメント
それでも反映されませんでしたので、プラグインが関係があるのかと思って、それを外してやってみましたが、反映されず、プラグインなしで、最初のほうでもやってみたのですが、やはりされません。 そうなると、プラグインは関係がないということになりますが、あとは、何か干渉しているものがあるのかどうか、よくわかりません…。なんとか、自分のを、ピンクのレースにしたいのですが…。

a-kuma3さんのコメント
コメント欄が生成されるタイミングを監視して背景のイメージを変えるようにしてみました。 回答に追記しています。

Michiko_70554148さんのコメント
できました! さらにプラグインを入れても、大丈夫でした。 もう少し色を濃くしてみたら、だいぶいい感じになりました。 やっぱり、アメブロで慣れていますので、自分のコメント欄の色が違うほうが好きなので、別のセレクタ名がついていたら、自力でできるので、お手間をかけないでも済んだのですが…。 いつもありがとうございます。私はjavascriptが書けないので、本当に助かります。

a-kuma3さんのコメント
お手間というか、Q&amp;A サイトですし、回答者は回答者で得るものがたくさんあったりするのですよ <tt>:-)</tt>

Michiko_70554148さんのコメント
本当にいつも助かります。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ