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

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

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

●質問者: samhole
●カテゴリ:はてなの使い方
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

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

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 で動的に追加されるのですが、タイミングがとても遅くて、もしかして環境によっては上手く表示されないかも...


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

●質問をもっと探す●



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