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>