はてなブログのコメント欄についてですが、できればほかのブログサービスのように、自分のコメントの背景と、訪問者の背景を変えて、わかりやすくしたいと思っています。

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

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2016/01/18 01:09:02
id:Michiko_70554148

サブを作ったので、そちらのほうでやりたいと思っています。

http://feckless.hatenablog.com/entry/2016/01/15/235611#js-commen...

ベストアンサー

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153

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

$(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});
});
他7件のコメントを見る
id:a-kuma3

お手間というか、Q&A サイトですし、回答者は回答者で得るものがたくさんあったりするのですよ :-)

2016/01/17 21:35:15
id:Michiko_70554148

本当にいつも助かります。

2016/01/18 01:08:51

その他の回答0件)

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153ここでベストアンサー

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

$(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});
});
他7件のコメントを見る
id:a-kuma3

お手間というか、Q&A サイトですし、回答者は回答者で得るものがたくさんあったりするのですよ :-)

2016/01/17 21:35:15
id:Michiko_70554148

本当にいつも助かります。

2016/01/18 01:08:51

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません