はてなブログのHTML編集で目次リンクを設定する方法【コピペOK】

はじめに

当記事の目的

当記事の目的は、はてなブログでHTML編集で記事を書いている人に向けて、 見出しタグから自動で目次リンクを作成する方法を紹介することです。

はてなブログで目次を作成する方法

はてなブログには編集モードが複数ありますよね。

• みたまま編集
• はてな記法編集
• Markdown編集
• HTML編集

はてなブログでは[:contents]と記事に書けば自動で目次を生成してくれます。
しかし、HTML編集だけは[:contents]と書いても目次は作成されません。
はてなブログのHTML編集で記事を書いている場合、目次の作成は個別にコーディングする必要があるのです。

今回紹介するJavaScriptを使えば個別にコーディングする必要はなくなります。
必要のある作業はコピペだけです。

目次のサンプル

当記事の目次も今回紹介するJavaScriptから自動生成しています。
記事の上の方にある目次を見てみてください。
目次の各項目をクリックすると該当の見出しタイトルへジャンプするようになっています。

はてなブログのHTML編集で使えるJavaScript

コピペOKのJavaScript

以下に見出しタグから目次リンクを自動生成するJavaScriptのコードを記載しました。

            File: create-toc.html
            ---------------------

            <!-- 目次を作成する先 -->
            <div id="toc"></div>

            <script type="text/javascript">
                document.addEventListener('DOMContentLoaded', function () {
                    var contentsList = document.getElementById('toc'); // 目次を追加する先(table of contents)
                    var div = document.createElement('div'); // 作成する目次のコンテナ要素

                    // .entry-content配下のh2、h3要素を全て取得する
                    var matches = document.querySelectorAll('.entry-content h2, .entry-content h3');

                    // 取得した見出しタグ要素の数だけ以下の操作を繰り返す
                    matches.forEach(function (value, i) {
                        // 見出しタグ要素のidを取得し空の場合は内容をidにする
                        var id = value.id;
                        if(id === '') {
                            id = value.textContent;
                            value.id = id;
                        }

                        // 要素がh2タグの場合
                        if(value.tagName === 'H2') {
                            var ul = document.createElement('ul');
                            var li = document.createElement('li');
                            var a = document.createElement('a');

                            // 追加する<ul><li><a>タイトル</a></li></ul>を準備する
                            a.innerHTML = value.textContent;
                            a.href = '#' + value.id;
                            li.appendChild(a)
                            ul.appendChild(li);

                            // コンテナ要素である<div>の中に要素を追加する
                            div.appendChild(ul);
                        }

                        // 要素がh3タグの場合
                        if(value.tagName === 'H3') {
                            var ul = document.createElement('ul');
                            var li = document.createElement('li');
                            var a = document.createElement('a');

                            // コンテナ要素である<div>の中から最後の<li>を取得する。
                            var lastUl = div.lastElementChild;
                            var lastLi = lastUl.lastElementChild;

                            // 追加する<ul><li><a>タイトル</a></li></ul>を準備する
                            a.innerHTML = value.textContent;
                            a.href = '#' + value.id;
                            li.appendChild(a)
                            ul.appendChild(li);

                            // 最後の<li>の中に要素を追加する
                            lastLi.appendChild(ul);
                        }
                    });

                    // 最後に画面にレンダリング
                    contentsList.appendChild(div);
                });
            </script>
            

はてなブログでの使い方

以下の２つだけです。基本的にコピペすればOKです。

1. JavaScript（<script>〜</script>）を記事内の一番下にコピペする
2. 目次が生成される先として<div id="toc"></div>を設置する

なお、ご存知の通り、記事を表示するタイミングでJavaScriptで目次リンクを生成しているので少なからず描画に時間がかかります。
描画時間をかけたくない場合は今回紹介したJavaScriptで目次を生成し、生成されたものをコピペして使えばいいと思います。

おわりに

今回ははてなブログの記事をHTML編集で書いている人に向けて、目次リンクを自動生成するJavaScriptを紹介しました。

目次リンク作成に困っていた人の役に立てたらうれしいです。