Bloggerで目次を自動作成(始めの一歩）
Bloggerのブログで、目次がないのは、少しさみしいですね。
こんなのがあれば、いいですね。
だからと言って、見出しを一つ一つ拾い出して、目次を書き込んで行くのも、大変です。JavaScriptを使い、見よう見まねで作ってみました。次のように（何行か下の、この目次です）なります。
テーマのHTMLには触れないで、投稿記事のHTMLに追加して、目次を自動作成させます。
挿入するJavaScriptのコードは、最後の方にあります。
目次
最初の見出し
初めまして。
次の見出し
またです。
３番目の見出し
またまた。
４番目の見出し
度々ですね。
最後の見出し
ではご機嫌よう。
******ここまでのページのHTMLコードは次のようでした（試作品、実際はさらに改変されています）******
<p>テスト中です</p><p> <br />Bloggerのブログで、目次がないのは、少しさみしいですね。</p><p>だからと言って、見出しを一つ一つ拾い出して、目次を書き込ん行くのも、大変です。JavaScriptを使い、見よう見まねで作ってみました。次のようになります。</p><p>挿入するJavaScriptのコードは最後にあります。</p><div id="mokuji"><p style="text-align: left;"><b>目次</b></p></div><h4 style="text-align: left;">最初の見出し</h4><div>初めまして。</div><div><br /></div><div><br /></div><h4 style="text-align: left;">次の見出し</h4><div>またです。</div><div><br /></div><div><br /></div><h4 style="text-align: left;">３番目の見出し</h4><div>またまた。</div><div><br /></div><div><br /></div><h4 style="text-align: left;">４番目の見出し</h4><div>度々ですね。</div><div><br /></div><div><br /></div><h4 style="text-align: left;">最後の見出し</h4><div>ではご機嫌よう。</div><div></div><script>var mokuji = document.getElementById("mokuji");var midasi = document.getElementsByTagName("h4");//for文の中身を書き換えアンカーを仕込むfor (i = 0; i < midasi.length; i++) {var koumoku = document.createElement("p");//作った<p>をリンク付きにするkoumoku.innerHTML = '<a href="#midasi' + i + '">' + midasi[i].innerText + '</a>';//<h4>にアンカーポイントを仕込むmidasi[i].outerHTML = '<h4 id="midasi' + i + '">' + midasi[i].innerText + '</h4>';//目次部分に追加mokuji.appendChild(koumoku);}</script>
******このページの最初のHTMLコードは以上のようでした******
ただし、このままでは、うまく動きません。この辺のジタバタを少し書きますので、参考にしてもらえればと、思います。
この後に、うまく動く最終版があります。
このJavaScriptのコードは、全面的に
「ふ」さんの
に依拠したものです。
というより、ほぼ丸写しです。分かりやすくて、詳しい説明がありますので、ぜひご訪問ください。
なら、なぜここで記事を書くのかというと、最初は、全然上手くいかなかったからです。
テーマではなく、投稿のHTML編集で目次を作る
そもそも、コードは、どこに、どうやって、書けば良いのか？ こんなことで迷うのは、超初心者だけですが、JavaScriptについて記事を書いておられる方には、超初心者のおヘマが、想像できないようです。なので、ここで、コードの埋め方を説明します。
テーマのHTMLを書き換えるやり方もあるようですが、よく分からないまま、テーマのHTMLを書き換えて、JavaScriptまで追加するのは、怖すぎます。
そこで、投稿記事のHTMLの編集で、目次を自動作成することを目指しました
が、このHTMLビューが、コードをギューギュー詰め込みで、読みにくいものです。適当に改行を加えて、分かりやすくします。当ブログの
の記事を参考にしてください。
ということで、適当に改行を加えて、見やすくすると、「目次」を入れた所は、
<br />
<p>目次</p>
<p>
<br />
</p>
のようになっているはずです。
目次置き場を作る
上の、
<p>目次</p>
の部分を、次のコードに置き換えます。
<!--目次置き場--><div id="mokuji" style="border: 1px dotted rgb(51, 51, 51); margin-bottom: 10px; padding: 10px;"><p style="text-align: left;"><b>目次</b></p></div><!--ここまで目次置き場-->
尻尾にJavaScriptを埋め込む
（次のコードが、最終版です。よければ、これをお使いください）
<script>var mokuji = document.getElementById("mokuji");var midasi = document.getElementsByTagName("h4");//for文の中身を書き換えアンカーを仕込むfor (i = 0; i < midasi.length; i++) {var koumoku = document.createElement("p");//作った<p>をリンク付きにするkoumoku.innerHTML = '<a href="#midasi' + i + '">' + midasi[i].innerText + '</a>';//<h4>にアンカーポイントを仕込むmidasi[i].innerHTML = '<a id="midasi' + i + '"></a>' + midasi[i].innerHTML;//目次部分に追加mokuji.appendChild(koumoku);}</script>
を、
最後に
埋め込みます。（分かりやすく、尻尾でOKです） これが、ポイントなのです。見出しが全て書かれた、その後に埋め込まないと、見出しを、このJavaScriptが読み込めないのです。これが、なかなか分からず、泣きました。
これでやっと、JavaScriptは動き始めました。
うまくジャンプしてくれないのを修正
ただ、「ふ」さんのコードでは、目次は作成されるのですが、目次をクリックしても、その見出しにジャンプしてくれませんでした。
どうも、リンク先の見出しが、Bloggerで手を加えられているようなのです。
が、大変参考になりました。
そこで、見出しの中に、アンカーポイント id midasi** を設定するのではなく、見出しの直前に id midasi** をはめ込むようにしてみました。結局、
midasi[i].outerHTML = の所を、上の最終版のように、
midasi[i].innerHTML = '<a id="midasi' + i + '"></a>' + midasi[i].innerHTML;
に変更してみました。これで、うまく動きました。（左項が
outerHTML
だと、うまく行きません）
見出しの階層 h３とか、h４とか に合わせて書き換え
私の好みで、今まで、文章中の見出しは、h４を使ってきました。なので、あなたの実際に合わせて、打ち直してください。ただし、私の使っているテーマ「Materiapollo」では、h１はブログのタイトル、ｈ２は記事のタイトル、投稿日も含んでいますので、ｈ３ 以降を見出しとして使われることをおすすめします。h３は小見出し、h４は準見出しとなります。
ｈ２をどうしても使う場合は、タイトル、投稿日を除外するために、
for (i = 0; i < midasi.length; i++) {
の部分の、「i = 0」を「i = 2」 に変更すると、うまくいったことがあります。参考にしてください。
具体的には、上記コードの、赤太文字、h４とある所を、適当に修正してください。
これでOK
これで、ブログが表示される時に、目次が自動的に作成されます。
ここからさらに、複数の見出しの階層に対応する、JavaScriptを作っておられる方もあります。ここでは、私のような初心者に見通しやすい、最初の１歩を紹介しています。
ここを理解されたら、さらに、複数階層や、cssでスタイルを変更したりしてみたり、テーマのHTMLを編集したりしてみてください。
私自身は、ここまでできたら、もう十分かなと思っています。今までのブログは、そのままとして、これからは目次付きにしたいと、思っています。（気が変わりました、今までのブログも、適当に目次を入れていこうかと思います）