はてなブログで目次を階層的に表示する

はじめに

せっかく見出しを整理してブログを書いたとき、長文なのに目次がないのは不便なので目次を自動作成するように整えた。
単純な目次の表示はしていたが、階層的に表示している例をあまり見かけなかったので、世の中の知見を参考にして対応した。

参考にした記事

注意点

僕は普段 MarkDown 形式で書いてて、見出し1(#)は使っていない。
それに合わせて作っているので、この場合はどうするの？ってのがあれば、連絡いただければやるかも。

やり方

JavaScript

デザイン設定の「記事上」で、以下のスクリプトを追加する。

<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 = "";
var currentlevel = 0;
//見出しを検索
$(".entry-content h2,.entry-content h3,.entry-content h4").each(function(i){
    var idName = "section" + i;
    $(this).attr("id",idName);
    var level = 0;
    if (this.nodeName.toLowerCase() == "h3") {
        level = 1;
    } else if (this.nodeName.toLowerCase() == "h4") {
        level = 2;
    }
    while (currentlevel < level) {
        list += '<ol class="chapter">';
        currentlevel++;
    }
    while (currentlevel > level) {
        list += "</ol>";
        currentlevel--;
    }
    list += '<li><a href="#' + idName + '">' + $(this).text() + '</a></li>';
});
//見出しが2つ以上あったら目次を表示する
if ($(".entry-content h2,.entry-content h3,.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>

CSS

同じくデザイン設定の「デザインCSS」で以下の記述を追記する

article .entry-content .sectionList {
    background: #F8F8F8;
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #CCC;
}
article .entry-content .sectionList h3 {
    font-size: 110%;
    margin: 0;
}
article .entry-content .sectionList ol {
    margin: 0;
    padding: 0 0 0 1.5em;
    list-style: decimal;
}
article .entry-content .sectionList > ol {
    margin-top: 10px;
}