Bloggerに目次を実装する

ブログ記事を書く際に、読者が内容を把握しやすくするための工夫のひとつが「目次」です。特に長文の記事では、冒頭で目次を提示することで、

読者は自分が知りたい情報にすぐアクセスでき、記事の回遊率も高まります。また、SEOの観点でも、見出し構造が整理された記事は検索エンジンに内容を正しく伝えやすくなるため、目次の設置は重要です。

Bloggerでは、標準機能だけでは自動目次が作成できませんが、先人たちが作成したさまざまなコードやスクリプトを使うことで簡単に目次を設置することが可能です。ここでは、実際に活用できる複数の実装例を紹介し、それぞれの特徴や使い方について解説していきます。

「スケ郎のお話」版

特徴はjQuery不使用 (プレーンな JavaScirpt)ということです。また豊富なオプション、掲載ブログでは数種類のデザイン用スタイルシートの配布まで行っています。

残念ながら当方の環境では動作しなかったのでサンプルはありません。

配布先 : スケ郎のお話｜[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）

「Daphne」版

こちらの目次は </head> 直前にコードを挿入し、目次を表示させたい箇所に <div id="toc"></div> と記述するタイプです。

配布先 : Daphne ｜Blogger目次を見出しと連動させて自動生成する方法

「Limosuki」版

• h2 タグと h3 タグをピックアップして、階層にしてリスト化する
• details タグと summary タグを使って折りたたみ式にする

開閉タイプの目次で上2つの目次とはアプローチの方法がやや異なっています。</body> タグの直前にスクリプト、CSSを設置し、目次を表示させたい箇所に<summary class="toc-title">目次</summary>と挿入するタイプです。

配布先 : Limosuki｜Blogger 目次を自動生成するスクリプト

まつさん
筆者が運営している CATCH!!｜東京パフォーマンスドール ファンサイト で使わせていただいています。

「IB-Note」版

detailsタグとsummaryタグを使った折りたたみ式目次というアイデアはリモスキ！さんのものをベースに、任意の見出しタグに対応＆階層構造化させるためにHoodさんのスクリプトを参考にさせて頂き実装しました。

目次を表示したい場所に生成先を設置するタイプと最初の見出し前に自動生成するタイプの2パターンが用意されているので自分のブログスタイルに合わせて選ぶことができる。

配布先 : IB-Note｜【全見出しタグ対応】高速＆シンプルな自動生成目次