「Blogger」目次の自動生成を試してみた
 |
当初は、自分で作ろうと思いましたが、調べてみたところたいへん便利なものをご用意されている方がいらっしゃり、使用してみることにしてみました。
使用してみて、気付いたことや試したことなどを追記しています。
自分で目次をつけた
最初は、自分で目次を付けて、アンカーに飛ぶようにしてみようと思ったのですが、Bloggerの場合、アンカーを付けると、不要なURLが付き、目次からアンカーへ飛ぶことができませんでした。ならば、Blogger管理ページにある「設定」の、「投稿、コメント、共有」ページを開き、投稿テンプレートに、予め目次とアンカーを入れておいたらいけるかもしれないと思い、やってみましたが、そちらもURLが付いてしまい、ダメでした。
 |
| 投稿テンプレートにアンカー指定を入れてみたがダメでした |
新しい投稿記事を作成すると、以下のような書式に変更されてしまいます。
<a href="https://draft.blogger.com/blogger.g?blogID=6710855387360287593#anchor01">anchor01</a><a href="https://draft.blogger.com/null" name="anchor01">anchor01</a>
入れた覚えのないURLが付いています。
んーBloggerでは、目次を付けるのは無理なのかなっと思っていたら、見つけてしました。
目次を自動生成するコードを見つけた
こちらの記事を参考に試してみました。- 【外部URL】https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html
詳しくは、参考リンク先を見ていただければと思いますが、目次を自動生成してくれるとても優秀なものです。
やり方は、テンプレート内を検索し、「</head>」の直前に、コードを貼り付けるだけです。とっても簡単ですね。
目次の位置がおかしい
早速、自分のブログのテンプレートに目次を自動生成するコードを貼り付けて、投稿記事を確認したところ、投稿記事タイトルの上に目次が生成されてまして。。。 |
| 目次が投稿記事タイトルの上に来てる |
さすがに、笑いながら、ええええってなりました。
よくよく自分の使ってるテンプレートを見て、投稿記事のタイトルになる部分が、<h2></h2>で囲まれているのに気づいたんですね。
 |
| 投稿記事のタイトル部分が<h2></h2>で囲まれている |
もしやと思い、<h2></h2>は、<h1></h1>の次の見出しになるので、自動的に上になってしまったのではと考え、投稿記事のタイトルを<h2></h2>を<h1></h1>に変更しました。
そもそも、検索時にも影響するものなので、<h1></h1>に変更したほうが良いのかもしれないので、結果的に見つけられて良かったかもしれません。
さて、投稿記事のタイトルの下に、目次が移ってるかなっと確認したところ、うまくいきました。
 |
| 投稿記事のタイトルの下に目次が来ました |
良くある目次が生成され、アンカーもついています。素晴らしい！！
（見出し番号や細かい設定の方法は、参考URLにあります。）
Essential Ligntに目次を追加してみた
テンプレートを「Essential Lignt」に変更し、「目次」を追加してみました。テンプレートのCSSの下に配置したんですが、TopとBottom、横幅の設定を変更しても変化がないため、目次の設定「var toc_options =｛…｝」内にある「width: "auto", marginTop: "20px", marginBottom: "20px",」を削除したところ、目次のCSSで指定したマージンと横幅を指定することが出来ました。
新しいテンプレートでは、少し変更が必要な場合があるようですので、お困りでしたら、お試しください。
是非、目次の自動生成、お試しいただければと思います。
