【はてなブログ-カスタマイズ】追従する目次をサイドバーに表示する（JavaScript・CSS対応）

数日前から適用しているのですが、サイドバーに目次を表示しています。
さらに、スクロールの度に目次が追従するようにしています。

これはJavaScriptとCSSを追加適用することで実現しています。

目次が追従するブログには何度か遭遇していて、便利に感じていました。
それと比べると、自分のブログは目次が多いわりに、記事の最初の方にだけ目次がある状態で不便に感じていました。

ということで、ネットで調べて自分のブログにも適用してみました。

今回はその適用内容や手順について、アレコレ書いていきます。

使い方
参考サイト
適用したコード
- JavaScript
- CSS
挙動に関して
- JavaScript
- CSS
適用手順
注意事項
おわりに
関連記事

使い方

まずは手っ取り早く、使い方を載せます。

サイドバーが表示されている状態で動作するので、対象は基本的にPCのみです。
サイドバーが表示されていない状態（スマホ）では動作しません。

サイドバーの最後の要素として目次が配置されます。
これは記事に設定した目次をサイドバーにコピーしています。

スクロールしていくと目次が追従するように動作します。

参考サイト

以下のサイトを参考にさせて頂きました。ありがとうございます。
www.it-the-best.com

適用したコード

JavaScriptとCSSを適用しています。

JavaScript

<!-- サイドバーに目次を生成 -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    // 目次を取得
    const toc = document.querySelector(".entry-content .table-of-contents");
    // 目次の存在チェック
    if (toc) {
        // サイドバー用の目次HTML作成
        const html = [];
        html.push(`<div class="hatena-module hatena-module-html sidebar-toc">`);
        html.push(`<div class="hatena-module-title">目次</div>`);
        html.push(`<div class="hatena-module-body">${toc.outerHTML}</div>`);
        html.push(`</div>`);
        // サイドバー要素取得
        const sidebar = document.querySelector("#box2-inner");
        // サイドバーの最後に目次HTMLを追加
        sidebar.insertAdjacentHTML('beforeend', html.join(''));
    }
});
</script>
<!-- サイドバーに目次を生成ここまで -->

CSS

/***目次が追従されるようにする***/
#box2-inner {
    height: 100%;
}
/*サイドバーの最後の要素をスクロール追従*/
#box2-inner > .hatena-module:last-child {
    position: sticky;
    top: 10px;
}
/*サイドバー目次のデザイン*/
#box2-inner > .sidebar-toc .table-of-contents {
    padding: 5px 0px 5px 25px;
    overflow-y: auto;
    height: calc(100vh - 150px);
}
#box2-inner > .sidebar-toc .table-of-contents ul {
    padding-inline-start: 20px;
}
/*スマホサイズでは非表示にする*/
@media(max-width: 991px) {
    #box2-inner > .sidebar-toc {
        display: none;
    }
}
/***目次が追従されるようにするここまで***/