【はてなブログ】コメント欄を上の方に移動させる方法

  • 投稿 : 2018-03-19

自己責任で!!
はてなブログが仕様変更されると動作しなくなるような方法です。

現状ですが、コメントは「決められたHTML」で書かれた場所に、Javascriptで動的に置き換えているようで、置き換え元のHTMLを別の場所に書くとその部分がコメント欄になります。この原理を利用して、コメント欄を移動させます。

HTML

<div class="comment-box">
  <ul class="comment">
    <li class="read-more-comments" style="display: none;"><a>もっと読む</a></li>
  </ul>
  <a class="leave-comment-title">コメントを書く</a>
</div>

コメント欄にしたい場所に上記のHTMLをコピペしてください。
多くの場合は、デザイン=>カスタマイズ=>記事=>「記事下」の部分のどこかに挿入することになるかと思います。

CSS

.customized-footer + .comment-box{
  display:none;
}

このままでは、本来のコメント欄も表示されるので、それを消すためのCSSを追記します。
デザイン=>カスタマイズ=>デザインCSSに追記してください

Javascript

<script>
// <![CDATA[
document.addEventListener('DOMContentLoaded', function(){
   var entry = document.getElementsByClassName("comment-box");
   if(entry.length >=2){
      entry[1].innerHTML="<!-- 本来のコメント欄 -->";
   }
}, false);
// ]]></script>

display:none;で消去しても、HTML上は残っているので、それをJavascriptで消去します。

スポンサーリンク