WordPressで目次を作成する方法【かんたん初心者向け】

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

この記事を読めば、

  • そもそも、目次は必要なの?
  • 目次って、どうやって作るの?
  • 目次を作成できるプラグインは、どれを選べばいい?
  • 目次生成プラグインの使い方を詳しく知りたい!
  • 目次のデザインをカスタマイズしたい!
  • 簡単な方法で目次を自作したい!

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

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

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

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

  • 記事の全体像が把握しやすい
  • 読みたいコンテンツ部分にすぐ移動できる
  • 検索結果に目次が表示されることがある
記事の全体像が把握しやすい

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

読みたいコンテンツ部分にすぐ移動できる

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

検索結果に目次が表示されることがある
検索結果に目次が表示されることがある

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

ポイント
読者の使い勝手をよくするために、目次は記事の上部に設置するのがおすすめ!

目次の作り方

目次を作る前に

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

賢威については、ブログ初心者におすすめ!シンプル&おしゃれなWordPressテーマで詳しく紹介しています。
あなたが利用しているテーマに、目次生成機能はついていませんか?
目次機能が備わっていても、設定をしなければ目次が表示されないテーマもあるかもしれません。まずは、利用しているテーマのマニュアル等を確認してみましょう。
テーマの目次機能に満足していないので、この記事に来られた方へ
テーマの目次機能を解除した上で、後ほど紹介する目次作成方法をお試しください。

目次を作る2つの方法

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

WordPressで目次を作る方法

  • プラグインで目次を作る(オススメ)
  • プラグインなしで目次を自作する
プラグインで目次を作る

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

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

人気の目次作成プラグイン

  1. Easy Table of Contents(オススメ)
  2. Table of Contents Plus

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

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

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

Table of Contents Plusは更新頻度が低い
2020年7月時点で、Table of Contents Plus はWordPress最新バージョン(5.4.2)で正常に動作するかテストされていません。一時期は、3年以上もアップデートされなかったこともあるようです。

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

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

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

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

この記事の後半「プラグインなしで目次を自作する方法」で作成手順を説明しますが、結論から言うとこの方法は手間がかかるのでオススメはしません
ポイント
WordPressで簡単に目次を作るなら、「Easy Table of Contents」プラグインを使うのがおすすめ!

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

記事内に見出しが必須

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

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

WordPress講師

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

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

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

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

WordPress講師

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

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

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

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

WordPress管理画面[プラグイン]>[新規追加]をクリック

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

「Easy Table of Contents」で検索し「今すぐインストール」をクリック

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

「Easy Table of Contents」を有効化

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

WordPress管理画面の[設定]メニューに[目次]が追加

Easy Table of Contents の設定画面

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

Easy Table of Contents の設定画面

  1. ブログ全体の目次設定画面
  2. ページ個別の目次設定画面

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

  • 一般
  • 外観
  • 高度

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

Easy Table of Contents ブログ全体の目次設定画面

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

Easy Table of Contents ページ個別の目次設定画面
個別の目次設定画面は、目次機能を有効/無効にするページの設定で有効化した投稿タイプのみ表示されます。

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

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

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

設定画面 ブログ全体の目次設定画面 [一般]>[サポートを有効化]
設定内容 目次機能を有効にさせたい投稿タイプにチェックを入れます。
ここでチェックが入っていないページでは、目次は表示されません
おすすめ設定

「投稿」と「固定ページ」にチェック

※設定変更後は、画面下部の変更を保存をクリック!

設定画面

Easy Table of Contents「サポートを有効化」設定
目次機能を有効/無効にするページの設定例

使用テーマによっては、独自の項目が追加されることも
利用中のテーマによって、独自の投稿タイプが追加されることがあります。下の画像は、当サイトのイチ押しテーマ「ザ・トール」を使っている場合の表示例です。

Easy Table of Contents 「ザ・トール」使用中の目次設定画面
ザ・トールについては、ブログ初心者におすすめ!シンプル&おしゃれなWordPressテーマで詳しく紹介しています。

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

設定画面 ブログ全体の目次設定画面 [一般]>[自動挿入]
設定内容 目次を自動挿入させたい投稿タイプを指定します。
おすすめ設定

「投稿」と「固定ページ」にチェック

※設定変更後は、画面下部の変更を保存をクリック!

設定画面

Easy Table of Contents「自動挿入」設定
目次を自動挿入するページの設定例

一部のページで目次を自動挿入したくない場合:
たとえば、上の設定画面で「投稿」にチェックを入れると、ブログ内のすべての投稿ページに目次が自動挿入されます。一部の投稿で目次を自動挿入したくない場合は、投稿エディタ下部にある目次設定画面で「目次の自動挿入を無効にします。」にチェックを入れます。

Easy Table of Contents 一部の投稿で目次を自動挿入したくない場合

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

設定画面 ブログ全体の目次設定画面 [一般]>[位置]
設定内容

目次を表示させる位置を、次の4つから選択します。

  • 最初の見出しの前(デフォルト)
  • 最初の見出しの後
  • 上部 ←本文の最上部
  • 下部 ←本文の最下部
おすすめ設定 「最初の見出しの前(デフォルト)」を選択(初期状態のまま)

設定画面

Easy Table of Contents「位置」設定
目次を挿入する位置の設定例

記事本文中の任意の場所に目次を設置するには
本文中の任意の場所に、下記ショートコードを追記します。

[toc]

※目次を設置できるのは、1ページにつき1ヶ所のみです。
※ショートコードで目次を設置した場合、目次設定画面で指定した表示位置は無効になります。

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

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

設定画面

Easy Table of Contents「表示条件」設定
見出しが少ないページで目次を非表示にする設定例
WordPress講師

見出しが1つや2つしかなく、コンテンツ量が少ないページで目次を表示しても、あまり意味がないかもしれませんね…

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

サンプル

Easy Table of Contents 目次タイトルのカスタマイズ例
設定画面
  1. ブログ全体の目次設定画面[一般]>[見出しラベルを表示]
  2. ブログ全体の目次設定画面[一般]>[見出しラベル]
設定内容
  1. 目次の上にタイトルを表示する場合は、「目次の上に見出しテキストを表示します。」にチェックを入れます。
  2. 目次タイトルの文字列は、[見出しラベル]に入力して指定することができます。
    ※初期状態では「Table of Contents」と英語表記になっていますが、ブログ上での表示は「目次」と翻訳されます(WordPress管理画面を日本語で使っている場合)。

ブログ全体共通の設定です。ページごとに個別の設定はできません。

おすすめ設定
  1. 「目次の上に見出しテキストを表示します。」にチェック(初期状態のまま)
  2. 「もくじ」「コンテンツ」など、お好みで。

※設定変更後は、画面下部の変更を保存をクリック!

設定画面

Easy Table of Contents「見出しラベルを表示」「見出しラベル」設定
目次タイトルをカスタマイズする設定例

目次を折りたたむ

サンプル

目次を開閉できる
目次を開閉できる
設定画面
  1. ブログ全体の目次設定画面[一般]>[折りたたみ表示]
  2. ブログ全体の目次設定画面[一般]>[初期状態]
設定内容
  1. ブログ読者が目次の開閉をできるようにするには、「目次表示の折りたたみを許可します。」にチェックを入れます。
  2. 最初から目次を閉じた状態で表示にするには、「初期状態で目次を非表示にします。」にチェックを入れます。

ブログ全体共通の設定です。ページごとに個別の設定はできません。

おすすめ設定
  1. 「目次表示の折りたたみを許可します。」にチェック(初期状態のまま)
  2. 「初期状態で目次を非表示にします。」はチェックしない(初期状態のまま)

設定画面

Easy Table of Contents「折りたたみ表示」「初期状態」設定
目次の折りたたみ設定例
WordPress講師

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

目次をツリー表示する

サンプル

Easy Table of Contents ツリー表示の有無を比較
WordPress講師

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

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

設定画面

Easy Table of Contents「ツリー表示」設定
目次をツリー表示する設定

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

サンプル

Easy Table of Contents カウンターの選択内容による比較
目次につける番号の比較
設定画面 ブログ全体の目次設定画面 [一般]>[カウンター]
設定内容

目次につける番号を、次の4つから選択します。

  • 小数点表示(デフォルト)
  • 数字
  • ローマ数字
  • なし

ブログ全体共通の設定です。ページごとに個別の設定はできません。

おすすめ設定 小数点表示(デフォルト)(初期状態のまま)

設定画面

Easy Table of Contents「カウンター」設定
目次につける番号の設定例
WordPress講師

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

横幅を指定する

サンプル

Easy Table of Contents 横幅「Auto」と「100%」の比較
幅「Auto」と「100%」の比較
設定画面
  1. ブログ全体の目次設定画面[外観]>[幅]
  2. ブログ全体の目次設定画面[外観]>[カスタム幅]
設定内容
  1. 目次の幅を
    • 固定 ←200~400px
    • 相対 ←Auto、25~100%
    • カスタム ←ユーザー定義

    から選択できます。

  2. 1.の幅で「カスタム-ユーザー定義」を選択すると、任意の幅を指定できます。

ブログ全体共通の設定です。ページごとに個別の設定はできません。

おすすめ設定 1.の幅で「Auto」を選択(初期状態のまま)

設定画面

Easy Table of Contents「幅」「カスタム幅」設定
目次幅の設定例
WordPress講師

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

回り込みを指定する

サンプル

Easy Table of Contents 回り込み設定による比較
回り込み設定による見た目の比較
設定画面 ブログ全体の目次設定画面 [外観]>[回り込み]
設定内容

目次の回り込みを、次の3つから設定できます。

  • なし(デフォルト)

ブログ全体共通の設定です。ページごとに個別の設定はできません。

おすすめ設定 なし(デフォルト)(初期状態のまま)

設定画面

Easy Table of Contents「回り込み」設定
目次の回り込み設定例
目次の位置によっては回り込まない
目次の位置で「最初の見出しの前(デフォルト)」や「下部」を指定した場合、目次の下には回り込むコンテンツがありません。このとき、回り込みを「左」や「右」に設定すると、目次の配置だけが左や右に移動します。

文字サイズを指定する

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

設定画面

Easy Table of Contents「文字サイズ」設定

色を指定する

サンプル

Easy Table of Contents テーマによる色の比較
色指定による見た目の比較
設定画面
  1. ブログ全体の目次設定画面[外観]>[テーマ]
  2. ブログ全体の目次設定画面[外観]>[カスタムテーマ]
設定内容
  1. 目次のベースカラーを選択できます。
  2. 色をカスタマイズするには、1.テーマで「カスタム」を選択してから、2.カスタムテーマで色を指定します。

ブログ全体共通の設定です。ページごとに個別の設定はできません。

設定画面

Easy Table of Contents「テーマ」設定

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

設定画面 ブログ全体の目次設定画面 [高度]>[見出し]
設定内容 目次に表示させる見出しのレベルを選択します。
おすすめ設定

見出し2 (h2)~見出し4 (h4)」にチェックを入れる。

※設定変更後は、画面下部の変更を保存をクリック!

設定画面

Easy Table of Contents「見出し」設定
目次に表示させる見出しレベルの設定例

見出し1(h1)は、記事のタイトルのみに使われるのが一般的
見出し1(h1)は、そのページの中で最も大きな見出しであり、ページ内で1回だけ使うのが一般的です。多くのWordPressテーマではページのタイトルにh1を割り当てるため、目次に入れる必要はないでしょう。

見出しブロックの標準機能は、h2~h4しか指定できない
見出しの挿入に「見出しブロック」を使っている場合、標準機能ではh2~h4の3種類しか選択することができません。他のレベルの見出しを挿入するには、HTMLで編集する必要があります。

特定のページで見出しレベルを指定したい場合
記事によってコンテンツ量の差が大きい場合、ページごとに見出しレベルを指定したいときもあるでしょう。そんなときは、ページ個別の目次設定画面でも同様の設定をすることができます。

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

設定画面 ブログ全体の目次設定画面 [高度]>[除外する見出し]
設定内容

目次に表示させたくない見出しを指定できます。

  • 例1)「ブログ*」と入力
    →「ブログ」で始まる見出しを除外
  • 例2)「*ブログ*」と入力
    →「ブログ」を含む見出しを除外
  • 例3)「ブログ|サイト|ホームページ」と入力
    →「ブログ」「サイト」「ホームページ」のいずれかを含む見出しを除外

※アルファベットを入力する場合、大文字・小文字は区別されません。
※ページ個別の目次設定画面でも、同様の設定ができます。

設定画面

Easy Table of Contents「除外する見出し」設定
特定の見出しを目次に表示しない設定例

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

サンプル

Easy Table of Contents 見出しの文字列を書き換えられる
設定画面 ページ個別の目次設定画面[見出しの差し替え]
設定内容

見出し内の文字列を、目次で表示するときに別の文字列に変換させることができます。

  • 例)「WordPressとは?|ワードプレスとは」と入力
    →上の画像のように文字列が差し替えられます。

設定画面

Easy Table of Contents「見出しの差し替え」設定
特定の見出しの文字列を書き換える設定例

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

サンプル

Easy Table of Contents スクロールオフセット「30px」のとき
スクロールオフセット「30px」のとき
Easy Table of Contents スクロールオフセット「200px」のとき
スクロールオフセット「200px」のとき
設定画面
  1. ブログ全体の目次設定画面[高度]>[スムーズスクロールのオフセット]
  2. ブログ全体の目次設定画面[高度]>[モバイルのスムーズスクロールのオフセット]
設定内容

目次をクリックして移動したときの、スクロールの終着地点をオフセット(補正)することができます。ブログ上部のメニューが固定表示されている場合などに便利な機能です。

ブログ全体の目次設定画面[一般]>[スクロールを滑らかにする]がオンのときのみ有効です。

ブログ全体共通の設定です。ページごとに個別の設定はできません。

設定画面

Easy Table of Contents「スムーズスクロールのオフセット」設定

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

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

設定画面

Easy Table of Contents サイドバーに目次を設置する
WordPress管理画面[外観]>[ウィジェット]

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

他のウィジェット(カテゴリー、カレンダーなど)を追加していると、追尾型機能は有効になりません。また、利用テーマによっては、うまく固定表示されないものもあります。

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

設定画面

Easy Table of Contents [高度]>[ウィジェットの固定セレクタ]にサイドバーのIDを入力
目次設定画面[高度]>[ウィジェットの固定セレクタ]

サイドバーのIDの調べ方

ブラウザによって確認方法が異なります。ここでは、Google Chromeを例として説明します。

ブログを表示させてサイドバーの目次の上で右クリックし、「検証」をクリックします。

ブログを表示させてサイドバーの目次の上で右クリックし、「検証」をクリック

HTMLの中から、サイドバー要素のIDを探します。たとえば公式テーマ「Twenty Seventeen」の場合、サイドバー要素のIDとして「id=”secondary”」という表示が見つかりました。

「Twenty Seventeen」の場合、サイドバー要素のIDとして「id=”secondary”」が見つかる

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

設定画面

目次設定画面[高度]>[ウィジェットの固定セレクタ]にサイドバーIDを入力
WordPress講師

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

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

Easy Table of Contents 目次ウィジェットの「ウィジェットを上部固定する」にチェック

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


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

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

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

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

HTMLとは
Webページを作成するための、最も基本となる言語のことです。
これから作成手順を簡単に説明しますが、この方法は手間がかかるのでオススメはしません。特にWordPress初心者さんは、プラグインを使うほうが簡単・確実です。

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

サンプル

プラグインなしで目次を自作する方法の記事サンプル

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

  1. 各見出しをリンク先にする
  2. 目次から各見出しへリンクを貼る

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

見出しブロックで、目次のリンク先になる見出しを挿入

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

<h2>見出し1の内容</h2>
<h2>見出し2の内容</h2>
<h3>見出し2-1の内容</h3>
<h3>見出し2-2の内容</h3>
<h2>見出し3の内容</h2>
WordPress初心者2

簡単な入力だけでコンテンツが作れるWordPressは、こんな面倒な作業を代わりにやってくれていたんですね。

WordPress講師

はい。厳密に言うと、上記コード以外にもブロックエディタ特有の「コメントアウト」というものが記述されます。
ここではわかりやすくするために省略しています。

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

目次のリンク先になる見出しにIDを付与

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

<h2 id="heading1">見出し1の内容</h2>
<h2 id="heading2">見出し2の内容</h2>
<h3 id="heading2-1">見出し2-1の内容</h3>
<h3 id="heading2-2">見出し2-2の内容</h3>
<h2 id="heading3">見出し3の内容</h2>
見出しブロックでIDを付けるには、[詳細設定]ボタン>[HTMLとして編集]の順にクリックします。
ID「heading●」は、お好みの文字列でOKです。ただし、半角英数字を使ってください。
くわしくは、リンクの貼り方 – ページ内の特定場所をリンク先にするを参考にしてください。

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

リストブロックの順序付きリストで目次を作成

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

<ol>
<li>見出し1の内容</li>
<li>見出し2の内容
<ol>
<li>見出し2-1の内容</li>
<li>見出し2-2の内容</li>
</ol>
</li>
<li>見出し3の内容</li>
</ol>

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

目次の文字列のリンク先に「#ID名」を指定
ブロックエディタでページ内にリンクを貼るには、[文字列を選択]>[リンクボタン]>[リンク先(今回の場合、「#ID名」)を入力]>[送信]の順に操作します。くわしくは、リンクの貼り方 – ページ内の特定場所へのリンクを貼るを参考にしてください。

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

<ol>
<li><a href="#heading1">見出し1の内容</a></li>
<li><a href="#heading2">見出し2の内容</a>
<ol>
<li><a href="#heading2-1">見出し2-1の内容</a></li>
<li><a href="#heading2-2">見出し2-2の内容</a></li>
</ol>
</li>
<li><a href="#heading3">見出し3の内容</a></li>
</ol>

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

WordPress講師

この作業をページごとにおこなうのは、かなり面倒くさいです…


PHPなどのプログラミング言語を用いた、高度な目次の作り方もあります。しかし、当サイトは“初心者向け”をコンセプトとしているため、説明は割愛します。

まとめ

目次を入れるメリット

  • 記事の全体像が把握しやすい
  • 読みたいコンテンツ部分にすぐ移動できる
  • 検索結果に目次が表示されることがある

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

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

WordPressで目次を作る方法

  • プラグインで目次を作る(←オススメ)
  • プラグインなしで目次を自作する

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

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

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

プラグインなしで目次を自作する方法も紹介しましたが、手間がかかるのでおすすめはしないです。特にWordPress初心者さんは、プラグインを使うほうが簡単・確実です。

WordPress講師

読者の方が快適に記事を読めるよう、ぜひあなたのブログでも目次を作成してみてください!