はてなブログに見だしベースの自動目次を入れる

はてなブログで見出しを作っている場合に、見出しへのリンクを目次のように表示するスクリプトを使っています。元々は「はてなブログ脱獄ブログ」というブログで紹介されていたものなのですが、ブログは閉鎖されたようなので今はコードだけが残っている状態。

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

このスクリプトをデザイン設定の「記事→記事上下のカスタマイズ/記事上」のテキストエリアに貼り付ければOK。

この、真ん中あたりの「.entry-content h4」のところで、見出しの深さ何段までを目次に出すか、また、見出しがいくつ以上あれば目次を作るかを決めています。また、この処理自体は1ページに3記事などを表示している場合には発動しません。1ページ1記事状態で表示された場合だけ動くので注意してください。

ちなみにはてなブログ自体の機能で目次を挿入する事もできるようになったようですが「[:contents]」を各記事に貼り付けないといけないというところが難点。

参考まで。