目次

"長い記事にクリック可能な見出し一覧を追加し、表示位置、見た目、投稿ごとの扱いをまとめて調整できます。"

概要

目次 は、本文内の見出しからクリック可能な一覧を自動生成するモジュールです。

管理画面の場所: Airygen SEO -> 設定 -> 目次

長い記事、チュートリアル、ガイド、ドキュメントページのように、読者がセクション単位で素早く移動したいコンテンツで特に役立ちます。

このモジュールは、手動配置、自動挿入、投稿ごとの表示制御、スタイルプリセット、公開前に全体像を確認できるプレビューに対応しています。

設定

このページは 設定、レイアウト、プレビュー に分かれています。

設定 タブ

このタブでは、出力方法、対象範囲、見出し構造、動作、アンカー設定を管理します。

手動出力

  • 手動出力を有効にすると、テンプレート関数、ショートコード、ブロック を使って目次を好きな位置に配置できます。
  • テンプレート関数 は、テーマテンプレート内の決まった場所に表示したい場合に向いています。
  • ショートコード は、本文中やショートコード対応ブロックに表示したい場合に向いています。
  • ブロック は、ブロックエディター内で視覚的に配置したい場合に向いています。

テンプレート関数 の例:

<?php if ( function_exists( 'airygen_the_toc' ) ) { airygen_the_toc(); } ?>

ショートコード の例:

[airygen_toc]

ブロック の例:

<!-- wp:airygen/toc /-->

自動挿入

  • 自動挿入を有効にすると、対象となる投稿本文へ目次が自動で差し込まれます。
  • 挿入位置 では、コンテンツの前 または 最初の段落の後 を選べます。

セクションタイトル

  • タイトル では、目次の上に見出しを表示するかどうかを切り替えられます。
  • タイトル文言の入力欄では、一覧の上に表示する見出しテキストを変更できます。
  • タイトルの見出しレベルでは、そのタイトルに使う見出し階層を変更できます。

範囲

  • 含める投稿タイプ では、目次を表示できる投稿タイプを選べます。

構造

  • 最小見出し数 では、一定数以上の見出しがある投稿でのみ目次を表示できます。
  • 見出しレベル では、目次に含める H2、H3、H4 を選べます。

動作

  • スムーススクロール を有効にすると、読者が目次リンクをクリックしたときに滑らかに移動します。
  • 番号付けを追加 を有効にすると、目次が番号付きアウトラインとして表示されます。
  • 読み込み時に折りたたむ を有効にすると、最初は閉じた状態で表示されます。

アンカー

  • アンカープレフィックス では、生成される見出し ID に接頭辞を付けて重複を避けられます。
  • 見出しを除外 では、カンマ区切りで入力した語句に一致する見出しを目次から除外できます。

レイアウト タブ

このタブでは、目次の見た目を調整します。

テーマ

  • スノースレート は、白とスレート系の落ち着いた配色です。
  • ハニーペーパー は、やわらかい紙のような暖色系スタイルです。
  • スカイブリーズ は、淡い青を基調にした軽い印象のスタイルです。
  • ミントカーム は、やさしい緑系の落ち着いたスタイルです。
  • ローズブラッシュ は、淡いピンク系のやわらかいスタイルです。
  • ラベンダーミスト は、明るい紫系の軽やかなスタイルです。

スタイル

  • ヘッダー側のコントロールでは、タイトル領域のボーダー幅、ボーダースタイル、角丸、ボーダー色、パディング、マージン、背景色、タイトル色、タイトルサイズ、文字装飾を調整できます。
  • 本体側のコントロールでは、目次コンテナのボーダー幅、ボーダースタイル、角丸、ボーダー色、パディング、マージン、背景色を調整できます。
  • リンク側のコントロールでは、目次リンクの色、フォントサイズ、太字、イタリック、下線を調整できます。
  • リスト側のコントロールでは、目次リスト内のインデントを調整できます。

プレビュー タブ

  • 目次プレビュー では、現在の設定で目次がどのように見えるかを確認できます。
  • ラップトップ、タブレット、携帯電話 を切り替えて、デバイス幅ごとの見え方を確認できます。
  • このプレビューは簡易表示であり、実際のフロントエンドはテーマの影響を受けます。
  • 画面下では、生成される HTML と CSS のサンプルも確認できます。

エディターパネル

ブロックエディターでは、目次パネルを使って投稿ごとに表示方法を切り替えられます。

  • TOC表示モード では、自動、手動、無効 を選べます。
  • モードを 手動 にすると、TOCを挿入 ボタンから ブロック と ショートコード を挿入できます。

使い方

  1. Airygen SEO -> 設定 -> 目次 を開きます。
  2. 設定 タブで、まず手動配置と自動挿入のどちらを主な出力方法にするか決めます。
  3. 手動配置を使う場合は手動出力を有効にし、表示された テンプレート関数、ショートコード、ブロック のうち運用に合う方法を選びます。
  4. 自動表示を使う場合は自動挿入を有効にし、挿入位置 で コンテンツの前 または 最初の段落の後 を選びます。
  5. 目次の上に見出しを出したい場合は タイトル を有効にし、表示テキストと見出しレベルを設定します。
  6. 範囲 で 含める投稿タイプ を選び、どのコンテンツ種類で目次を表示するか決めます。
  7. 構造 で 最小見出し数 を設定し、見出しレベル から H2、H3、H4 のうち含めるものを選びます。
  8. 動作 で スムーススクロール、番号付けを追加、読み込み時に折りたたむ を必要に応じて切り替えます。
  9. アンカー で アンカープレフィックス を設定し、目次に含めたくない見出しがある場合は 見出しを除外 に入力します。
  10. レイアウト を開き、テーマプリセットを選んだあとで、タイトル領域、コンテナ、リンク、リストの見た目を順に整えます。
  11. 必要に応じて投稿編集画面を開き、エディターパネルの TOC表示モード でその投稿だけ 自動、手動、無効 に切り替えます。
  12. 設定を保存し、プレビュー タブで確認したあと、実際に見出し数が十分ある記事を開いて最終表示を確認します。

保存後は次の点を確認してください。

  • 目次が 最小見出し数 を満たす投稿にだけ表示されていること。
  • 目次リンクをクリックすると、正しい見出し位置へ移動すること。
  • 投稿ごとの TOC表示モード が、その記事で使いたい出力方法と一致していること。
  • テーマ CSS が適用された実ページでも、余白や色や配置が崩れていないこと。

SEO のメリット

目次があると、長いコンテンツの構造がひと目で伝わり、読者は必要なセクションへ早く移動しやすくなります。

その結果、長文ページの読みやすさと回遊しやすさが高まり、検索エンジンにもページ構造を理解してもらいやすくなります。

活用例

長いチュートリアル記事を運用するメディア

Before: 手順が多い記事では、読者が必要な工程を見つけるまで長くスクロールする必要がありました。

After: 目次 を使うと、インストール、設定例、トラブル対応などの見出しへすぐ移動できるようになります。

ドキュメントやナレッジベースを公開するサイト

Before: 見出し構造は整っていても、初めて読む人にはページ全体の構成が把握しづらい状態でした。

After: 目次が先に見えることで、ページの全体像をつかみやすくなり、必要な節から読み始めやすくなります。

よくある質問

一部の投稿で目次が表示されないのはなぜですか。

最小見出し数、見出しレベル、含める投稿タイプ、投稿ごとの TOC表示モード を確認してください。

自動挿入と手動配置はどちらを使うべきですか。

多くの記事に同じ位置で表示したいなら自動挿入が向いています。本文内やテンプレート内の正確な位置に出したいなら手動配置が向いています。

プレビューと実際のページ表示が違うのはなぜですか。

プレビューは簡易表示です。実際のページではテーマ、CSS、周囲のレイアウト、実際の見出し構成の影響を受けるため、保存後は必ず実ページで確認してください。