こちらの記事のスクリプトを参考にライブドア用に書き換えました。

見出しタグから入れ子の目次を自動作成するJavaScriptを作りました【コピペOK】 chart-594212_1920

いままでの目次の付け方

いつもブログを書くとき以下の雛形に当てはめて目次を作っていました。
<div class="main">
	<div id="toc_container" class="no_bullets">
		<p class="toc_title">目次</p>
		<ul class="toc_list">
			<li><a href="#1">見出し1</a></li>
			<li><a href="#2">見出し2</a></li>
		</ul>
	</div>
	<h1 id="1">見出し1</h1>
	
	ここに文章を入力。
	
	<h2 id="2">見出し2</h2>
	
	ここに文章を入力。

</div>
でもこの方法だと
記事を書いていくうちに目次とは違う項目を追加した場合なんかに

id要素とhref属性をいちいち手動で調整しなくちゃいけないし

色々面倒だったんで
探してみるとやはり自動で目次を作る方法はありました。

今回は以下の記事のスクリプトを参考に
それをライブドア用に書き換えて目次を自動で生成しました。
見出しタグから入れ子の目次を自動作成するJavaScriptを作りました【コピペOK】

設定方法

ライブドア用の目次作成スクリプト

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('.article-body-inner h1,.article-body-inner h2,.article-body-inner  h3');
    
        // 取得した見出しタグ要素の数だけ以下の操作を繰り返す
        matches.forEach(function(value, i) {
            var ul = document.createElement('ul');
    
            // 見出しタグ要素のidを取得し空の場合は内容をidにする
            value.id = value.textContent.replace(/\s/g, "");
    
            ul.appendChild(createLi(value));
            if (value.tagName === 'H1') { // 要素がh1タグの場合
                div.appendChild(ul);
            } else {
                let lastLi
                if (value.tagName === 'H2') { // 要素がh2タグの場合
                    lastLi = createLastLi(div, 2)
                    lastLi.appendChild(ul);
                } else if (value.tagName === 'H3' && value.textContent != "カテゴリなしの他の記事") {
                    lastLi = createLastLi(div, 3)
                    lastLi.appendChild(ul);
                }
            }
        });
    
        // 最後に画面にレンダリング
        contentsList.appendChild(div);
    });
    
    function createLi(value) {
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.innerHTML = value.textContent;
        a.href = '#' + value.id;
        li.appendChild(a)
        return li
    }
    
    function createLastLi(div, tag) {
        let lastLi = div
        for (let i = 0; i < tag; i++) {
            lastLi = lastLi.lastElementChild
        }
        return lastLi
    
    }

上記Javascriptをコピーして適当な場所に保存します。
ここでは item.jsとして保存しています。

Javascriptをライブドアブログにアップロードする

左メニューから「画像/ファイル」→「ファイル管理」と進みます。

そして「jsフォルダ」に移動します。
フォルダがない場合は「フォルダを作る」からフォルダを作ってください。
クリーンショット_2021-02-07_11_57_00
先程の上記スクリプト、 item.jsをjsフォルダにアップロードします。

スクリーンショット_2021-02-07_11_57_19

item.jsを読み込む設定をする

次にアップロードしたファイルを読み込む設定をしていきます。
左メニューの「ブログ設定」に移動します。

その後カスタムJSをクリックします。
スクリーンショット_2021-02-07_12_19_00
body内」に以下を記述します。
<!-- 目次自動生成 -->
<!-- 目次を作成する先 -->
<!--<div id="toc"></div>-->
<script src="/js/item.js"></script>
<!-- End目次自動生成 -->
スクリーンショット_2021-02-07_12_19_22

使い方

ライブドアブログで記事を書く時に
右上のHTMLタグ編集にて好きなところに以下のコードを記述します。
<div id="toc"></div>

id属性を指定する必要はないので
何も考えずhタグをつらつら書いていちゃってOKです。


動画で見るとこんな感じです。