Bloggerに目次を実装する

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

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

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

「スケ郎のお話」版

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

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

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

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

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

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

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