はてなブログのトップページの記事にコメント数を表示し、はてなダイアリー同様にそのコメント数をクリックすると個別記事ページのコメント欄に移動するようにしたいです。


HTMLやCSSはどのようにすれば良いでしょうか。
ご教示の程よろしくお願いいたします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2015/01/20 01:36:11
  • 終了:2015/01/20 23:58:05

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4488ベストアンサー獲得回数18572015/01/20 18:28:58

ポイント300pt

javascript で書いてみました。
はてなブログの「デザイン」→「カスタマイズ」から「ヘッダ」を選んで、タイトル下に、以下のコードをまるっと追加してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
    $(function() {

        /*
            question:1421685371
            はてなダイアリーちっくなコメント表示
        */
        var akuma3_change_comment = function(entry) {
            if (! /^\/entry/.exec(window.location.pathname)) {
                $("footer.entry-footer div.comment-box", entry).each(function() {
                    var n = 0;
                    var cb = $(this);
                    var ec = $("li.entry-comment", cb);
                    if (ec.length > 0) {
                        n = n + ec.length;
                        var rmc = $("li.read-more-comments a", cb);
                        if (rmc.length != 0) {
                            var r = /\((\d+)\)/.exec(rmc.text());
                            if (r) {
                                n = n + parseInt(r[1], 10);
                            }
                        }
                    }
                    cb.css("display", "none");

                    var footer_section = $("p.entry-footer-section", entry)
                    $(".akuma3_comment_link", footer_section).remove();
                    var link = $("a.entry-title-link", entry);
                    var c = '<a href="' + link.attr("href") + '#c" class="akuma3_comment_link">コメント(' + n + ')</a>';
                    $(c).appendTo(footer_section);
                });
            }
        };

        var add_code = 
            "var akuma3_change_comment = " +
            akuma3_change_comment.toString() + ";\n" +
            "akuma3_change_comment(entry);\n"

        var s = Hatena.Diary.Pages.Blogs['*'].initEntry.toString();
        s = s.replace(
                /Hatena.Diary.SpeedTrack.record\("Pages.Blogs\['\*'\].init.showEntryInfo"\);/,
                "Hatena.Diary.SpeedTrack.record(\"Pages.Blogs['*'].init.showEntryInfo\"); \n" + add_code
                );

        s = s.replace(
                /Hatena.Diary.Pages.Blogs\['\*'\].leaveCommentHandler\(entry, \$button\);/,
                ";");

        s = s.split(/\n/).slice(2, -2).join("\n");

        var initEntry = new Function("entry", s);

        self = Hatena.Diary.Pages.Blogs['*'];
        $('article.entry').each(function () {
            var $this = $(this);
            $("ul.comment > .entry-comment", $this).remove();
            if (/^\/entry/.exec(window.location.pathname)) {
                if (window.location.hash == "#c") {
                    var cb = $("footer.entry-footer div.comment-box", $this);
                    cb[0].scrollIntoView();
                }
            } else {
                $("footer.entry-footer div.comment-box", $this).each(function() {
                    var cb = $(this);
                    cb.css("display", "none");
                });
                var footer_section = $("p.entry-footer-section", $this)
                var link = $("a.entry-title-link", $this);
                var c = '<a href="' + link.attr("href") + '#c" class="akuma3_comment_link">コメント(0)</a>';
                $(c).appendTo(footer_section);
            }
            initEntry.apply(self, [$this]);
        });


    });


})(jQuery);
</script>

リンクは、それぞれの記事の最後、日付の見た目になっている記事へのパーマリンクの隣に作ってます。
f:id:a-kuma3:20150120182018j:image


ぼくのはてなブログに仕込んでみました。
↓の URL だと、コメントがついてる記事がありますので、様子が分かると思います。
http://a-kuma3.hatenablog.com/?page=1384865161



かなり強引なやり方をしてます。
ページを読み込んだときに動く処理の一部を書き換えて、もう一回動かしてます。
なので、将来的に、はてなの方で修正を入れると動かなくなる可能性があります。

コメントの部分は javascript で動的に追加されるのですが、タイミングがとても遅くて、もしかして環境によっては上手く表示されないかも...

id:samhole

丁寧なご回答ありがとうございます。
実際に指示通りにブログのカスタマイズを行ったところ、望み通りの見た目になりました。
IDは違いますが私が使っているブログのデザインでは特に問題なく表示されています。

2015/01/20 23:57:39

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません