WordPressで目次を簡単に作る方法【プラグインあり・なし】

最近は、記事のはじめに目次を入れているブログ・サイトが多いですよね？もちろん、WordPressでも目次を作成することができます。

この記事を読めば、

こんな疑問やお悩みが解決できます。ワードプレス初心者さんでも簡単に目次を作成できますので、ぜひ参考にしてください。

目次は必要？ページ内に目次を入れるメリットとは

ブログ・サイトの記事に目次を入れることは、とても重要です。なぜなら、ブログ読者にとっての使い勝手が、むっちゃ良くなるからです。

まず前提として、多くのブログ読者は何らかの「疑問や悩みを解決したい」と思って記事にアクセスしています。これを踏まえると、目次を入れるメリットには次の点があげられます。

あなたが書いた記事に初めてアクセスしたばかりの人は、「この記事を読んで、本当に答えがみつかるかなぁ？」と半信半疑の状態です。しかし、記事の上部に目次を入れておくことで、ブログ読者は記事の全体像が把握しやすくなり、自分が読みたい記事かどうかを判断しやすくなります。

ブログやサイトの記事に設置された目次は、リンク形式になっているものが多いですよね。目次をクリックすれば、読みたい内容にすぐ移動できる。こうしておくと、ブログ読者にストレスを与えません。

記事に目次を入れておくと、Googleなどの検索結果ページで目次の内容が表示されることがあります。たとえ検索ユーザーが、タイトルやスニペット（要約文）を見ただけで読むべき記事かどうかを判断できなくても、目次の内容に関心を持ちアクセスするきっかけになるかもしれません。

目次の作り方

目次を作る前に

最近では、目次生成機能を備えたWordPressテーマが多くなってきました。この記事の目次も、当サイトで使っている「SWELL」というテーマによって自動生成されたものです。

目次を作る2つの方法

WordPressで目次を作る方法には、大きく分けて次の2つがあります。

WordPressで目次を作るなら、プラグインの利用をおすすめします。理由は自作するよりも簡単で、さまざまな機能を利用できるからです。

人気のある目次作成のプラグインに、次の2つがあります。どちらも高機能なプラグインで、日本語にも対応しています。

多くのWordPress関連サイトでは「2.Table of Contents Plus」が紹介されているようですが、個人的にはあまりおすすめしません。なぜなら、更新頻度が低いので、

• 正常に動作しないかも
• セキュリティ対策不足かも

など、不具合が発生するリスクが比較的大きいからです。

一方、「1.Easy Table of Contents」はWordPress最新バージョンに対応しています（2020年7月時点）。設定が簡単なので初心者さんでも使いやすい、おすすめのプラグインです。使い方は、後ほど詳しく説明します。

早速、Easy Table of Contentsの使い方の説明を見る

自分で目次を作る方法として最もシンプルなのが、ページ内リンクを貼るためのHTMLを書くことです。

目次を簡単に作れるプラグイン「Easy Table of Contents」

記事内に見出しが必須

Easy Table of Contents プラグインは、ページ内の見出しを検出して目次を自動生成します。つまり、プラグインを使って目次を表示するためには、必ず記事内に見出しを設置しなければなりません。

記事内に見出しを入れるには、「見出しブロック」を使うのが簡単です。

見出しは、記事を読みやすくするだけでなく、検索エンジンにコンテンツ構造を正しく伝える役割もあります。
特にコンテンツ量が多い記事では、見出しは必ず使いましょう！

Easy Table of Contents プラグインでできること

プラグインでは、目次に関する細かい設定やカスタマイズをすることができます。主な機能は、以下のとおりです。

※クリックすると、詳しい説明に移動します。

まずは、プラグインを使うための準備をしましょう。
最初にやるべきことは、プラグインのインストールと有効化です。
およそ1分でできる、簡単な作業ですよ！

プラグインのインストールと有効化

Easy Table of ContentsプラグインはWordPress公式ディレクトリに登録されているので、管理画面から簡単にインストール・有効化することができます。

手順1
管理画面メニュー[プラグイン]＞[新規追加]をクリックします。

手順2
キーワード「Easy Table of Contents」で検索し、Easy Table of Contents の今すぐインストールをクリックします。

手順3
インストールが完了したら、有効化をクリックします。

手順4
有効化が完了すると、WordPress管理画面の[設定]メニューに[目次]が追加されます。クリックすると、プラグインの設定画面が開きます。

Easy Table of Contents の設定画面

Easy Table of Contents の設定画面には、2種類あります。

1.ブログ全体の目次設定画面
プラグイン有効化後に追加された、管理画面メニュー[設定]＞[目次]をクリックして開く設定画面です。

• 一般
• 外観
• 高度

の3項目に分かれています。

2.ページ個別の目次設定画面
投稿や固定ページのエディタ（編集画面）下部に表示される設定画面です。

プラグインでできることを詳しく

先ほど一覧でご紹介したEasy Table of Contents プラグインでできることを、1つずつ詳しく見ていきましょう。

目次機能を有効／無効にするページを指定する

設定画面	ブログ全体の目次設定画面 [一般]＞[サポートを有効化]
設定内容	目次機能を有効にさせたい投稿タイプにチェックを入れます。 ここでチェックが入っていないページでは、目次は表示されません。
おすすめ設定	「投稿」と「固定ページ」にチェック ※設定変更後は、画面下部の変更を保存をクリック！

目次を自動挿入するページを指定する

設定画面	ブログ全体の目次設定画面 [一般]＞[自動挿入]
設定内容	目次を自動挿入させたい投稿タイプを指定します。
おすすめ設定	「投稿」と「固定ページ」にチェック ※設定変更後は、画面下部の変更を保存をクリック！

目次を挿入する位置を指定する

設定画面	ブログ全体の目次設定画面 [一般]＞[位置]
設定内容	目次を表示させる位置を、次の4つから選択します。 最初の見出しの前（デフォルト） 最初の見出しの後 上部 ←本文の最上部 下部 ←本文の最下部
おすすめ設定	「最初の見出しの前（デフォルト）」を選択（初期状態のまま）

見出しが少ないページで目次を非表示にする

見出しが1つや2つしかなく、コンテンツ量が少ないページで目次を表示しても、あまり意味がありません。以下のとおり設定してみましょう。

設定画面	ブログ全体の目次設定画面[一般]＞[表示条件]
設定内容	ここで指定した数値以上の見出しがある場合のみ、目次を表示します。

目次のタイトルをカスタマイズする

設定画面	ブログ全体の目次設定画面[一般]＞[見出しラベルを表示] ブログ全体の目次設定画面[一般]＞[見出しラベル]
設定内容	目次の上にタイトルを表示する場合は、「目次の上に見出しテキストを表示します。」にチェックを入れます。 目次タイトルの文字列は、[見出しラベル]に入力して指定することができます。 ※初期状態では「Table of Contents」と英語表記になっていますが、ブログ上での表示は「目次」と翻訳されます（WordPress管理画面を日本語で使っている場合）。 ブログ全体共通の設定です。ページごとに個別の設定はできません。
おすすめ設定	「目次の上に見出しテキストを表示します。」にチェック（初期状態のまま） 「もくじ」「コンテンツ」など、お好みで。 ※設定変更後は、画面下部の変更を保存をクリック！

目次を折りたたむ

設定画面	ブログ全体の目次設定画面[一般]＞[折りたたみ表示] ブログ全体の目次設定画面[一般]＞[初期状態]
設定内容	ブログ読者が目次の開閉をできるようにするには、「目次表示の折りたたみを許可します。」にチェックを入れます。 最初から目次を閉じた状態で表示にするには、「初期状態で目次を非表示にします。」にチェックを入れます。 ブログ全体共通の設定です。ページごとに個別の設定はできません。
おすすめ設定	「目次表示の折りたたみを許可します。」にチェック（初期状態のまま） 「初期状態で目次を非表示にします。」はチェックしない（初期状態のまま）

目次は最初から開いておいたほうが、ブログ読者に親切ですね。

目次をツリー表示する

ツリー表示にするほうが、記事の全体像がより分かりやすいですね。

設定画面	ブログ全体の目次設定画面 [一般]＞[ツリー表示]
設定内容	[ツリー表示]にチェックを入れると、見出しのレベル（h1～h6）に応じた階層構造を表現できます。 ブログ全体共通の設定です。ページごとに個別の設定はできません。
おすすめ設定	[ツリー表示]にチェックを入れる（初期状態のまま）

目次につける番号を指定する

設定画面	ブログ全体の目次設定画面 [一般]＞[カウンター]
設定内容	目次につける番号を、次の4つから選択します。 小数点表示（デフォルト） 数字 ローマ数字 なし ブログ全体共通の設定です。ページごとに個別の設定はできません。
おすすめ設定	小数点表示（デフォルト）（初期状態のまま）

見出しの頭に数字を入れている場合は、「小数点表示」や「数字」を選ぶと見づらいかもしれません……。

横幅を指定する

設定画面	ブログ全体の目次設定画面[外観]＞[幅] ブログ全体の目次設定画面[外観]＞[カスタム幅]
設定内容	目次の幅を 固定 ←200~400px 相対 ←Auto、25~100% カスタム ←ユーザー定義 から選択できます。 1.の幅で「カスタム-ユーザー定義」を選択すると、任意の幅を指定できます。 ブログ全体共通の設定です。ページごとに個別の設定はできません。
おすすめ設定	1.の幅で「Auto」を選択（初期状態のまま）

レスポンシブWebデザイン（デバイスの画面サイズに応じてレイアウトやデザインを最適化する技術）を採用しているテーマを使っているなら、「Auto」を選択するのが無難です。

回り込みを指定する

設定画面	ブログ全体の目次設定画面 [外観]＞[回り込み]
設定内容	目次の回り込みを、次の3つから設定できます。 なし（デフォルト） 左 右 ブログ全体共通の設定です。ページごとに個別の設定はできません。
おすすめ設定	なし（デフォルト）（初期状態のまま）

文字サイズを指定する

設定画面	ブログ全体の目次設定画面 [外観]＞[タイトル文字サイズ][タイトル文字の太さ][文字サイズ]
設定内容	目次のタイトルや内容の文字サイズ・太さを変更できます。 ブログ全体共通の設定です。ページごとに個別の設定はできません。

色を指定する

設定画面	ブログ全体の目次設定画面[外観]＞[テーマ] ブログ全体の目次設定画面[外観]＞[カスタムテーマ]
設定内容	目次のベースカラーを選択できます。 色をカスタマイズするには、1.テーマで「カスタム」を選択してから、2.カスタムテーマで色を指定します。 ブログ全体共通の設定です。ページごとに個別の設定はできません。

目次に表示させる見出しレベルを指定する

設定画面	ブログ全体の目次設定画面 [高度]＞[見出し]
設定内容	目次に表示させる見出しのレベルを選択します。
おすすめ設定	「見出し2 (h2)～見出し4 (h4)」にチェックを入れる。 ※設定変更後は、画面下部の変更を保存をクリック！

特定の見出しを目次に表示しない

設定画面	ブログ全体の目次設定画面 [高度]＞[除外する見出し]
設定内容	目次に表示させたくない見出しを指定できます。 例1）「ブログ*」と入力 →「ブログ」で始まる見出しを除外 例2）「*ブログ*」と入力 →「ブログ」を含む見出しを除外 例3）「ブログ|サイト|ホームページ」と入力 →「ブログ」「サイト」「ホームページ」のいずれかを含む見出しを除外 ※アルファベットを入力する場合、大文字・小文字は区別されません。 ※ページ個別の目次設定画面でも、同様の設定ができます。

特定の見出しの文字列を書き換える

設定画面	ページ個別の目次設定画面[見出しの差し替え]
設定内容	見出し内の文字列を、目次で表示するときに別の文字列に変換させることができます。 例）「WordPressとは？|ワードプレスとは」と入力 →上の画像のように文字列が差し替えられます。

スクロールオフセットを設定する

設定画面	ブログ全体の目次設定画面[高度]＞[スムーズスクロールのオフセット] ブログ全体の目次設定画面[高度]＞[モバイルのスムーズスクロールのオフセット]
設定内容	目次をクリックして移動したときの、スクロールの終着地点をオフセット（補正）することができます。ブログ上部のメニューが固定表示されている場合などに便利な機能です。 ブログ全体の目次設定画面[一般]＞[スクロールを滑らかにする]がオンのときのみ有効です。 ブログ全体共通の設定です。ページごとに個別の設定はできません。

サイドバーに目次を設置する

設定画面	WordPress管理画面[外観]＞[ウィジェット]
設定内容	Easy Table of Contents プラグインを有効化すると「目次」ウィジェットを利用できます。 「目次」ウィジェットを利用テーマのサイドバーに追加すると、ブログのサイドバーに目次を表示させることができます。

サイドバーに「追尾型」の目次を設置するには
スクロールしてもサイドバーに固定表示される、追尾型の目次を設置することもできます。

手順1
ブログ全体の目次設定画面[高度]＞[ウィジェットの固定セレクタ]に、利用テーマで定義されているサイドバーのID（またはクラス）を入力します。IDは、テーマによって異なります。

この場合、目次設定画面[高度]＞[ウィジェットの固定セレクタ]には「#secondary」と入力し、画面下部の変更を保存をクリックします。

IDの場合は#を、クラスの場合は.（ピリオド）を先頭に付けてください。

手順2
目次ウィジェットの「ウィジェットを上部固定する」にチェックを入れ、保存をクリックします。

サイドバーに追尾型の目次を設置する手順は、以上です。ブログにアクセスして、きちんと設置できているか確認してください。

---

ここまで、Easy Table of Contents プラグインの主な機能と、その設定方法について説明しました。この他にも設定やカスタマイズできる項目があるので、設定画面をひと通り確認してみてください。

次は、プラグインを利用せずに目次を作る方法をご紹介します。

プラグインなしで目次を自作する方法

自分で目次を作る方法として最もシンプルなのが、ページ内リンクを貼るためのHTMLを書くことです。

以下のような目次入りの記事を作成していきます。

大まかな手順は、次のとおりです。

1.各見出しをリンク先にする
WordPressで見出しを挿入するには、見出しブロックを使うのが簡単ですよね。

この裏側では、以下のように少々複雑なHTMLが書かれています。

見出しをリンク先にするためには、以下のようにIDを付与します。

このときのHTMLは、以下のようになります。

2.目次から各見出しへリンクを貼る
目次はリスト形式で作成するのが一般的です。リストブロックの「順序付きリスト」を使って目次を作ってみましょう。

裏側では、以下のようなHTMLが書かれています。

目次リストの文字列に各見出しへのページ内リンクを貼るには、リンク先に「#ID名」を指定します。

このときのHTMLは、以下のようになります。

以上の手順で、目次を自作することができます。

---

まとめ

読者の使い勝手をよくするために、目次は記事の上部に設置するのがおすすめです。

最近では、目次生成機能を備えたWordPressテーマが多くなってきました。あなたが利用しているテーマに、目次生成機能はついていませんか？設定をしなければ目次が表示されないテーマもあるかもしれません。マニュアル等を確認してみましょう。

WordPressで簡単に目次を作るなら、「Easy Table of Contents」プラグインを使うのがおすすめです。

Easy Table of Contents プラグインを使うなら、記事内の見出しは必須です。見出しは記事を読みやすくするだけでなく、検索エンジンにコンテンツ構造を正しく伝える役割もある（SEO対策になる）ので、ぜひ使いましょう。

Easy Table of Contents プラグインは、目次に関する細かい設定やカスタマイズに関する機能が豊富です。Easy Table of Contents プラグインでできることで確認してください。

プラグインなしで目次を自作する方法も紹介しましたが、手間がかかるのでおすすめはしないです。特にWordPress初心者さんは、プラグインを使うほうが簡単・確実です。読者の方が快適に記事を読めるよう、ぜひあなたのブログでも目次を作成してみてください！