概要




h2タグを拾ってページ内小目次を自動作成するJavascriptコードを載せています。 下の画像のような、段落間の目次を自動で入れることができます。 小目次の位置は自由に決められます。







h2タグを拾ってページ内小目次を作るJavaScriptコード




タイトルの通り、特定の範囲内のh2タグを拾って目次を作成するJavascriptコードを載せています。 例えばこのページのような、段落間に挟む目次を自動で作成できます。 Wordpressでも利用可能です。 使い方ですが、htmlソース内に、 ・このページの下にあるJavascrptコード ・minilink_boxという名前のclassを入れたhtml要素 ここに小目次が置かれます いくつでも入れられますが、各h2要素のすぐ前に入れてください ・textという名前のidを入れたhtml要素(この中のh2を拾う) を入れてください。 これで目次は作れますが、下の画像のようなデザインにはなりません。 適宜、minilink_boxのデザインをcssで調整してください。 minilink_boxの入れ方ですが、例えばページ内にh2が3つある場合は、 (ページ始め) h2 (文章) minilink h2 (文章) minilink h2 (文章) (ページ終わり) というふうに入れてください。 Wordpressの場合は、Ad Inserterを使うとminilink_boxの挿入が楽です。 注意点として、scriptは、minilink_boxやtextの後に置いてください。 また、minilink_box要素内は空にしておいてください。 ↓↓↓以下コードです コードは***変更***とコメントアウトされている部分を、必要に応じて変更して使って下さい。


<script>
//***変更***h2タグを拾うid名に変えてください
var box = "text"
var urltext = location.href;
contents = document.getElementById(box);
var list = contents.querySelectorAll('h2');
if(list.length > 0){
//小見出し
if(document.getElementsByClassName("minilink_box").length > 0){
    var minilist = contents.querySelectorAll('h2');
    for (var i = 0; i < document.getElementsByClassName('minilink_box').length; i++) {
        var miniliststr = '<h4>小見出し</h4><hr class="table"><p>' + '・<a href="' + urltext + '">' + 'ページのトップへ' + '</a><br>';
        for (var k = 0; k < minilist.length; k++) {
		//***変更***現在地がいらない場合は次の行を消してください
            if(i+1 == k){miniliststr = miniliststr + '→現在地←<br>';};
            id = minilist[k].id;
            miniliststr = miniliststr + '・<a href="#' + id + '">' + minilist[k].textContent + '</a><br>';
        };
        miniliststr = miniliststr + '</p>';
        document.getElementsByClassName('minilink_box')[i].innerHTML = miniliststr;
    };
}
}
</script>
↑↑↑コードここまで










関連ページと広告