HTMLやCSSはどのようにすれば良いでしょうか。
ご教示の程よろしくお願いいたします。
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>
リンクは、それぞれの記事の最後、日付の見た目になっている記事へのパーマリンクの隣に作ってます。
ぼくのはてなブログに仕込んでみました。
↓の URL だと、コメントがついてる記事がありますので、様子が分かると思います。
http://a-kuma3.hatenablog.com/?page=1384865161
かなり強引なやり方をしてます。
ページを読み込んだときに動く処理の一部を書き換えて、もう一回動かしてます。
なので、将来的に、はてなの方で修正を入れると動かなくなる可能性があります。
コメントの部分は javascript で動的に追加されるのですが、タイミングがとても遅くて、もしかして環境によっては上手く表示されないかも...
丁寧なご回答ありがとうございます。
2015/01/20 23:57:39実際に指示通りにブログのカスタマイズを行ったところ、望み通りの見た目になりました。
IDは違いますが私が使っているブログのデザインでは特に問題なく表示されています。