はてなブログの見出しを目次でわかりやすく表示させる。(JSで)

jqueryを読み込む

まず目次はjsで実装するのでjqueryを読み込む必要がある。

jqueryの最新版は以下のサイトで確認できる。

https://releases.jquery.com/

以下のコードをはてなブログのhead要素に貼り付ける。 ブログの管理画面から「設定」→「詳細設定」→「head要素の追加」で貼り付けることができます。

<script
  src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
  crossorigin="anonymous"></script>

目次を自動生成するコードを書く

管理画面の「デザイン」→「カスタマイズ」→「記事」を選択して 「記事下」の設定欄に下記を入力。(コピペできます)

<script type="text/javascript">
$(function(){
    var list = "";
    // h2見出しを検索
    $(".entry-content h2").each(function(i){
        var idName = "section"+i;
        $(this).attr("id",idName);
        list += '<li><a href="#' + idName + '">' + $(this).text() + '</a></li>';
    });
    // h2見出しが2つ以上あったら目次を表示する
    if ($(".entry-content h2").length >= 2){
        $("<div class='sectionList'><h2>目次</h2><ol>" + list + "</ol></div>").prependTo(".entry-content");
    }
    // 見出しへのスクロールを滑らかにする
    $('.sectionList a').on("click", function() {
        $('html,body').animate({scrollTop: $(this.hash).offset().top}, 600);
        return false;
    });
});
</script>

しかしこちらのコードはh2見出しのみにしか対応していないため、もっと細かい設定をしたい場合は自分でコードを考える必要があります。

追記

h3の対応も含めた最終的なコードはこっちに書きましたのでこちらもチェックしてみてください

siyoganai.hatenablog.com