はてなブログ(PC)のサイドバーに目次を表示するTips

前置き

以前、といってもかなり昔ですがはてなブログの記事似目次を表示する方法を投稿しましたが今回はサイドバーに表示しようとおもってやってみたので公開しておきます。

こちらは過去の記事 no-hack-no-life.hatenablog.com

前提/やること

jQueryを使用します。
デザインCSSを編集します。
記事下にjavascriptを設置します。

jQueryを設置する

ブログ上にjQueryを設置していない場合は
「管理画面」 → 「設定」 → 「詳細設定」 → 「headに要素を追加」の欄に下記のscriptタグを追記します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

CSSを編集する

次にCSSを編集します。
「管理画面」 → 「デザイン」へ進んで、真ん中の設定マークを選ぶと「デザインCSS」があるのでこれを開きます。

f:id:Telomere:20200217234821p:plain — 真ん中の設定マークを選びます。

開いたデザインCSSの欄に下記のCSSを追記して、変更を保存します。 (変更を保存せずに次に進んでも大丈夫です)

/* 目次 */
#box2-inner .indexSection {
    background: #F8F8F8;
    padding: 15px;
    border: 1px solid #CCC;
    margin-bottom: 10px;
}
#box2-inner .indexSection h2 {
    font-size: 110%;
    margin: 0;
}
#box2-inner .indexSection ol {
    margin: 10px 0 0;
    padding: 0 0 0 1.5em;
    list-style: decimal;
}
#box2-inner .indexSection ol a {
    text-decoration: none;
}

記事下に目次を表示するjavascriptを設置する

「管理画面」 → 「デザイン」へ進んで、真ん中の設定マークを選ぶと「記事」を選びます。
「記事」の中の項目に「記事下」があるのでこれを開き、下記のscriptタグを貼り付けます。

f:id:Telomere:20200217235455p:plain — 記事下にscriptタグを貼り付けてください。

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