初心者がBloggerの投稿記事に目次（TOC）の自動生成表示機能を導入する。-monocotoyom

　記事を読んでいると”目次”が記載されていることが多いですね。

　その目次を自動で生成、表示してくれるコードをBloggerに埋め込むことができることがわかりました。

　Bloggerの標準のテーマや無料テンプレートQooQ、Smart（目次無し）にも導入できました。

　ということで、今回は目次を自動生成する機能の導入した体験を具体的にわかりやすくまとめて記事にしています。

目次とは

　これは書籍などと同じく、章ごとの題名や内容を記載したものです。

　ブログ記事では、アウトラインやアジェンダ的なもので、 TOC（table of contents）と表現されたりましす。

　ブログの目次では、リンクにもなっていて、その章の該当記事部分にジャンプさせることもできます。

引用：”初心者がBloggerの固定ページを導入する。固定ページの作り方とURLの設定方法の謎に挑む！”の目次

　この章はHTMLのｈタグで指定します。

　hタグはBloggerのエディターの見出しとして設定できます。

目次の章とBloggerのエディターの見出しの関係

　Bloggerのエディターではルーラー部分にある以下の機能を使用します。

　この機能とｈタグの関係は以下になります。

　主見出し：ｈ１タグ

　見出し　：ｈ２タグ

　小見出し：ｈ３タグ

　準見出し：ｈ４タグ

　投稿記事内の章ごとの題名となる文字列にｈタグを設定し、あらかじめ文章を階層化することが必要です。

　注意として目次として使用するのはｈ２からｈ４が使用されます。

　ｈ１タグは自動生成の目次に含まれません。

　なぜでしょうか？

　理由としてはｈ１タグはが記事の中で一度だけ使用されていることが望ましいからです。

　ｈ１はその記事のテーマを表し、記事のテーマはシングルセンテンスであることが望まれています。

　ここで、多くの場合、ｈ１タグはタイトルに使用されています。

　このため、記事内で見た目上（例えば文字の大きさなど）のためにｈ１タグを使用すると複数設置することになります。

　ご自分のテーマ（テンプレート）で、どのようにｈ１タグが使用されているか確認してみてください。

　ということで、ｈ２以降が自動生成の目次として使用されています。

　閑話休題。

　目次の自動生成についてに戻ります。

目次自動生成の追加機能

　では、さっそく機能を導入してみましょう。

コードの入手

　目次自動生成のコードはスケ郎のお話様の[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）記事から入手願います。

　WordPressの場合、Table of Contents Plus (TOC+)というプラグインというもので目次生成を実現していますが、いわゆるBlogger版ともいえるものです。

コードの実装

　スケ郎のお話さんでも記載されていますが、入手したコードを"</head>”の前にいれることになります。

　具体的な手順は以下になります。

　注意：HTMLを編集する際はテーマをバックアップしてから行ってください。

HTMLの編集画面

　以下のようにHTMLを編集の準備をします。

</head>の前に実装

　エディターでHTMLの編集画面でCtrl+Fで</head>を検索して概要カ所を探してください。

　QooQを導入した、わたしのブログでは629行目でした。

　そして、先ほどのコードを挿入します。

コードの保存

　修正内容を保存します。

　これで、完了です。

目次自動生成の確認方法

　投稿記事内に、見出しを設定します。

　この見出しが目次になります。

　しかし、残念なことに目次は投稿：編集のエディター画面では確認できません。

目次の確認方法

　目次の確認はプレビューから確認します。

目次を中央に表示

　スケ郎の部屋様のコードの場合は標準で左寄せになります。

　中央に合わせた場合は一部コードの改変が必要になります。

　わたしは、moca＊Blogger「Tokyo」様のBloggerで簡単に目次をつける方法を参考にさせていただきました。

　しかし、中央に表示はPCでの表示は個人的な好みとして良いのですが、スマートフォンでは横幅の関係上、中央でも左寄せでも同じような表示になります。

　ですので、改版したコードを利用するよりスケ郎の部屋様の”width”オプションで横幅いっぱいにしたほうがよいかもしれません。

まとめ

　Bloggerに目次を自動で表示させるにはスケ郎のお話様からコードを入手しHTML編集で実装します。

　カスタマイズ方法などもスケ郎のお話様に記載されています。

　お好み合わせて調整してみてください。

編集後記

　記事の目次が自動で生成されるのは便利ですね。

　ただ、時々目次が正しく表示されない場合があるようです。

　スケ郎のお話様のブログのコメント欄にもあるのですDIVタグのネスティングが悪いと目次が正しく表示されないようです。

　わたしの場合は画像の貼り付けなどの時に不要なDIVタグが挿入されていたことがありました。

　この場合はいったん、ブラウザを終了してやり直した方がよいようですので参考にしてください。

　また、今回</head>の前にいれるという指示なのですが、誤って</body>前にいれていました。

　しかし、特に不都合はなかったのです。

　現在は修正済みです。

　その他のカスタマイズもこちらにまとめていますので参考にご覧ください。

　→Blogger用無料テンプレートQooQ導入とカスタマイズまとめ

　ほかにやり方、対処の仕方をご存知の方がいればコメントいてだけると助かります。

　また、おなじお悩みを抱えていた方もこの記事で解決できたらコメントいただけるとはげみになりますので、コメントをお願いします！

初心者がBloggerの投稿記事に目次（TOC）の自動生成表示機能を導入する。