最近は、記事のはじめに目次を入れているブログ・サイトが多いですよね？もちろん、WordPressでも目次を作成することができます。
この記事を読めば、
- そもそも、目次は必要なの？
- 目次って、どうやって作るの？
- 目次を作成できるプラグインは、どれを選べばいい？
- 目次生成プラグインの使い方を詳しく知りたい！
- 目次のデザインをカスタマイズしたい！
- 簡単な方法で目次を自作したい！
こんな疑問やお悩みが解決できます。ワードプレス初心者さんでも簡単に目次を作成できますので、ぜひ参考にしてください。
目次は必要？ページ内に目次を入れるメリットとは
ブログ・サイトの記事に目次を入れることは、とても重要です。なぜなら、ブログ読者にとっての使い勝手が、むっちゃ良くなるからです。
まず前提として、多くのブログ読者は何らかの「疑問や悩みを解決したい」と思って記事にアクセスしています。これを踏まえると、目次を入れるメリットには次の点があげられます。
- 記事の全体像が把握しやすい
- 読みたいコンテンツ部分にすぐ移動できる
- 検索結果に目次が表示されることがある
あなたが書いた記事に初めてアクセスしたばかりの人は、「この記事を読んで、本当に答えがみつかるかなぁ？」と半信半疑の状態です。しかし、記事の上部に目次を入れておくことで、ブログ読者は記事の全体像が把握しやすくなり、自分が読みたい記事かどうかを判断しやすくなります。
ブログやサイトの記事に設置された目次は、リンク形式になっているものが多いですよね。目次をクリックすれば、読みたい内容にすぐ移動できる。こうしておくと、ブログ読者にストレスを与えません。
記事に目次を入れておくと、Googleなどの検索結果ページで目次の内容が表示されることがあります。たとえ検索ユーザーが、タイトルやスニペット（要約文）を見ただけで読むべき記事かどうかを判断できなくても、目次の内容に関心を持ちアクセスするきっかけになるかもしれません。
読者の使い勝手をよくするために、目次は記事の上部に設置するのがおすすめ！
目次の作り方
目次を作る前に
最近では、目次生成機能を備えたWordPressテーマが多くなってきました。この記事の目次も、当サイトで使っている「賢威」というテーマによって自動生成されたものです。
目次機能が備わっていても、設定をしなければ目次が表示されないテーマもあるかもしれません。まずは、利用しているテーマのマニュアル等を確認してみましょう。
テーマの目次機能を解除した上で、後ほど紹介する目次作成方法をお試しください。
目次を作る2つの方法
WordPressで目次を作る方法には、大きく分けて次の2つがあります。
WordPressで目次を作る方法
- プラグインで目次を作る（オススメ）
- プラグインなしで目次を自作する
WordPressで目次を作るなら、プラグインの利用をおすすめします。理由は自作するよりも簡単で、さまざまな機能を利用できるからです。
WordPressの魅力の1つが、プラグインを使えることです。この記事を読めば、プラグインとは何なのか、プラグインの基本的な使い方、利用する際に注意すべきポイントなどがわかります。
人気のある目次作成のプラグインに、次の2つがあります。どちらも高機能なプラグインで、日本語にも対応しています。
人気の目次作成プラグイン
- Easy Table of Contents（オススメ）
- Table of Contents Plus
多くのWordPress関連サイトでは「2.Table of Contents Plus」が紹介されているようですが、個人的にはあまりおすすめしません。なぜなら、更新頻度が低いので、
- 正常に動作しないかも
- セキュリティ対策不足かも
など、不具合が発生するリスクが比較的大きいからです。
一方、「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（ワードプレス）のブロックエディタでよく使うブロックの1つ、「見出し」ブロックの使い方を紹介します。見出しブロックでは、見出しレベルや配置を変更することができます。また、見出しを付ける順番に誤りがないかチェックできる機能もあります。
見出しは、記事を読みやすくするだけでなく、検索エンジンにコンテンツ構造を正しく伝える役割もあります。
特にコンテンツ量が多い記事では、見出しは必ず使いましょう！
Easy Table of Contents プラグインでできること
プラグインでは、目次に関する細かい設定やカスタマイズをすることができます。主な機能は、以下のとおりです。
※クリックすると、詳しい説明に移動します。
一般設定
外観設定
まずは、プラグインを使うための準備をしましょう。
最初にやるべきことは、プラグインのインストールと有効化です。
およそ1分でできる、簡単な作業ですよ！
プラグインのインストールと有効化
Easy Table of ContentsプラグインはWordPress公式ディレクトリに登録されているので、管理画面から簡単にインストール・有効化することができます。
手順1
管理画面メニュー[プラグイン]＞[新規追加]をクリックします。
![WordPress管理画面[プラグイン]＞[新規追加]をクリック](https://wp-exp.com/wordpress/wp-content/uploads/2011/03/plugin-new-addition.png)
手順2
キーワード「Easy Table of Contents」で検索し、Easy Table of Contents のをクリックします。
手順3
インストールが完了したら、をクリックします。
手順4
有効化が完了すると、WordPress管理画面の[設定]メニューに[目次]が追加されます。クリックすると、プラグインの設定画面が開きます。
![WordPress管理画面の[設定]メニューに[目次]が追加](https://wp-exp.com/wordpress/wp-content/uploads/easy-table-of-contents-menu.png)
Easy Table of Contents の設定画面
Easy Table of Contents の設定画面には、2種類あります。
Easy Table of Contents の設定画面
- ブログ全体の目次設定画面
- ページ個別の目次設定画面
1.ブログ全体の目次設定画面
プラグイン有効化後に追加された、管理画面メニュー[設定]＞[目次]をクリックして開く設定画面です。
- 一般
- 外観
- 高度
の3項目に分かれています。
2.ページ個別の目次設定画面
投稿や固定ページのエディタ（編集画面）下部に表示される設定画面です。
プラグインでできることを詳しく
先ほど一覧でご紹介したEasy Table of Contents プラグインでできることを、1つずつ詳しく見ていきましょう。
目次機能を有効／無効にするページを指定する
| 設定画面 | ブログ全体の目次設定画面 [一般]＞[サポートを有効化] |
|---|---|
| 設定内容 | 目次機能を有効にさせたい投稿タイプにチェックを入れます。 ここでチェックが入っていないページでは、目次は表示されません。 |
| おすすめ設定 |
「投稿」と「固定ページ」にチェック ※設定変更後は、画面下部のをクリック！ |
設定画面
使用テーマによっては、独自の項目が追加されることも
利用中のテーマによって、独自の投稿タイプが追加されることがあります。下の画像は、当サイトのイチ押しテーマ「ザ・トール」を使っている場合の表示例です。
目次を自動挿入するページを指定する
| 設定画面 | ブログ全体の目次設定画面 [一般]＞[自動挿入] |
|---|---|
| 設定内容 | 目次を自動挿入させたい投稿タイプを指定します。 |
| おすすめ設定 |
「投稿」と「固定ページ」にチェック ※設定変更後は、画面下部のをクリック！ |
設定画面
一部のページで目次を自動挿入したくない場合：
たとえば、上の設定画面で「投稿」にチェックを入れると、ブログ内のすべての投稿ページに目次が自動挿入されます。一部の投稿で目次を自動挿入したくない場合は、投稿エディタ下部にある目次設定画面で「目次の自動挿入を無効にします。」にチェックを入れます。
目次を挿入する位置を指定する
| 設定画面 | ブログ全体の目次設定画面 [一般]＞[位置] |
|---|---|
| 設定内容 |
目次を表示させる位置を、次の4つから選択します。
|
| おすすめ設定 | 「最初の見出しの前（デフォルト）」を選択（初期状態のまま） |
設定画面
記事本文中の任意の場所に目次を設置するには
本文中の任意の場所に、下記ショートコードを追記します。
※目次を設置できるのは、1ページにつき1ヶ所のみです。
※ショートコードで目次を設置した場合、目次設定画面で指定した表示位置は無効になります。
見出しが少ないページで目次を非表示にする
| 設定画面 | ブログ全体の目次設定画面[一般]＞[表示条件] |
|---|---|
| 設定内容 | ここで指定した数値以上の見出しがある場合のみ、目次を表示します。 |
設定画面
見出しが1つや2つしかなく、コンテンツ量が少ないページで目次を表示しても、あまり意味がないかもしれませんね…
目次のタイトルをカスタマイズする
サンプル
| 設定画面 |
|
|---|---|
| 設定内容 |
ブログ全体共通の設定です。ページごとに個別の設定はできません。 |
| おすすめ設定 |
※設定変更後は、画面下部のをクリック！ |
設定画面
目次を折りたたむ
サンプル
| 設定画面 |
|
|---|---|
| 設定内容 |
ブログ全体共通の設定です。ページごとに個別の設定はできません。 |
| おすすめ設定 |
|
設定画面
目次は最初から開いておいたほうが、ブログ読者に親切ですね。
目次をツリー表示する
サンプル
ツリー表示にするほうが、記事の全体像がより分かりやすいですね。
| 設定画面 | ブログ全体の目次設定画面 [一般]＞[ツリー表示] |
|---|---|
| 設定内容 | [ツリー表示]にチェックを入れると、見出しのレベル（h1～h6）に応じた階層構造を表現できます。 ブログ全体共通の設定です。ページごとに個別の設定はできません。 |
| おすすめ設定 | [ツリー表示]にチェックを入れる（初期状態のまま） |
設定画面
目次につける番号を指定する
サンプル
| 設定画面 | ブログ全体の目次設定画面 [一般]＞[カウンター] |
|---|---|
| 設定内容 |
目次につける番号を、次の4つから選択します。
ブログ全体共通の設定です。ページごとに個別の設定はできません。 |
| おすすめ設定 | 小数点表示（デフォルト）（初期状態のまま） |
設定画面
見出しの頭に数字を入れている場合は、「小数点表示」や「数字」を選ぶと見づらいかもしれません…
横幅を指定する
サンプル
| 設定画面 |
|
|---|---|
| 設定内容 |
ブログ全体共通の設定です。ページごとに個別の設定はできません。 |
| おすすめ設定 | 1.の幅で「Auto」を選択（初期状態のまま） |
設定画面
レスポンシブWebデザイン（デバイスの画面サイズに応じてレイアウトやデザインを最適化する技術）を採用しているテーマを使っているなら、「Auto」を選択するのが無難です。
回り込みを指定する
サンプル
| 設定画面 | ブログ全体の目次設定画面 [外観]＞[回り込み] |
|---|---|
| 設定内容 |
目次の回り込みを、次の3つから設定できます。
ブログ全体共通の設定です。ページごとに個別の設定はできません。 |
| おすすめ設定 | なし（デフォルト）（初期状態のまま） |
設定画面
目次の位置で「最初の見出しの前（デフォルト）」や「下部」を指定した場合、目次の下には回り込むコンテンツがありません。このとき、回り込みを「左」や「右」に設定すると、目次の配置だけが左や右に移動します。
文字サイズを指定する
| 設定画面 | ブログ全体の目次設定画面 [外観]＞[タイトル文字サイズ][タイトル文字の太さ][文字サイズ] |
|---|---|
| 設定内容 | 目次のタイトルや内容の文字サイズ・太さを変更できます。 ブログ全体共通の設定です。ページごとに個別の設定はできません。 |
設定画面
色を指定する
サンプル
| 設定画面 |
|
|---|---|
| 設定内容 |
ブログ全体共通の設定です。ページごとに個別の設定はできません。 |
設定画面
目次に表示させる見出しレベルを指定する
| 設定画面 | ブログ全体の目次設定画面 [高度]＞[見出し] |
|---|---|
| 設定内容 | 目次に表示させる見出しのレベルを選択します。 |
| おすすめ設定 |
「見出し2 (h2)～見出し4 (h4)」にチェックを入れる。 ※設定変更後は、画面下部のをクリック！ |
設定画面
見出し1（h1）は、記事のタイトルのみに使われるのが一般的
見出し1（h1）は、そのページの中で最も大きな見出しであり、ページ内で1回だけ使うのが一般的です。多くのWordPressテーマではページのタイトルにh1を割り当てるため、目次に入れる必要はないでしょう。
見出しブロックの標準機能は、h2～h4しか指定できない
見出しの挿入に「見出しブロック」を使っている場合、標準機能ではh2～h4の3種類しか選択することができません。他のレベルの見出しを挿入するには、HTMLで編集する必要があります。
特定のページで見出しレベルを指定したい場合
記事によってコンテンツ量の差が大きい場合、ページごとに見出しレベルを指定したいときもあるでしょう。そんなときは、ページ個別の目次設定画面でも同様の設定をすることができます。
特定の見出しを目次に表示しない
| 設定画面 | ブログ全体の目次設定画面 [高度]＞[除外する見出し] |
|---|---|
| 設定内容 |
目次に表示させたくない見出しを指定できます。
※アルファベットを入力する場合、大文字・小文字は区別されません。 |
設定画面
特定の見出しの文字列を書き換える
サンプル
| 設定画面 | ページ個別の目次設定画面[見出しの差し替え] |
|---|---|
| 設定内容 |
見出し内の文字列を、目次で表示するときに別の文字列に変換させることができます。
|
設定画面
スクロールオフセットを設定する
サンプル
| 設定画面 |
|
|---|---|
| 設定内容 |
目次をクリックして移動したときの、スクロールの終着地点をオフセット（補正）することができます。ブログ上部のメニューが固定表示されている場合などに便利な機能です。 ブログ全体の目次設定画面[一般]＞[スクロールを滑らかにする]がオンのときのみ有効です。 ブログ全体共通の設定です。ページごとに個別の設定はできません。 |
設定画面
サイドバーに目次を設置する
| 設定画面 | WordPress管理画面[外観]＞[ウィジェット] |
|---|---|
| 設定内容 | Easy Table of Contents プラグインを有効化すると「目次」ウィジェットを利用できます。 「目次」ウィジェットを利用テーマのサイドバーに追加すると、ブログのサイドバーに目次を表示させることができます。 |
設定画面
WordPressのウィジェットを使うと、サイドバーやフッターなどサイト上の一部にさまざまな機能を追加・設定することができます。このページでは、ウィジェットの使い方や活用例について紹介します。
サイドバーに「追尾型」の目次を設置するには
スクロールしてもサイドバーに固定表示される、追尾型の目次を設置することもできます。
手順1
ブログ全体の目次設定画面[高度]＞[ウィジェットの固定セレクタ]に、利用テーマで定義されているサイドバーのID（またはクラス）を入力します。IDは、テーマによって異なります。
設定画面
![Easy Table of Contents [高度]＞[ウィジェットの固定セレクタ]にサイドバーのIDを入力](https://wp-exp.com/wordpress/wp-content/uploads/table-of-contents-func17-2.png)
サイドバーのIDの調べ方
ブラウザによって確認方法が異なります。ここでは、Google Chromeを例として説明します。
ブログを表示させてサイドバーの目次の上で右クリックし、「検証」をクリックします。
HTMLの中から、サイドバー要素のIDを探します。たとえば公式テーマ「Twenty Seventeen」の場合、サイドバー要素のIDとして「id=”secondary”」という表示が見つかりました。
この場合、目次設定画面[高度]＞[ウィジェットの固定セレクタ]には「#secondary」と入力し、画面下部のをクリックします。
設定画面
![目次設定画面[高度]＞[ウィジェットの固定セレクタ]にサイドバーIDを入力](https://wp-exp.com/wordpress/wp-content/uploads/table-of-contents-func17-5.png)
IDの場合は#を、クラスの場合は.（ピリオド）を先頭に付けてください
手順2
目次ウィジェットの「ウィジェットを上部固定する」にチェックを入れ、をクリックします。
サイドバーに追尾型の目次を設置する手順は、以上です。ブログにアクセスして、きちんと設置できているか確認してください。
ここまで、Easy Table of Contents プラグインの主な機能と、その設定方法について説明しました。この他にも設定やカスタマイズできる項目があるので、設定画面をひと通り確認してみてください。
次は、プラグインを利用せずに目次を作る方法をご紹介します。
プラグインなしで目次を自作する方法
自分で目次を作る方法として最もシンプルなのが、ページ内リンクを貼るためのHTMLを書くことです。
Webページを作成するための、最も基本となる言語のことです。
以下のような目次入りの記事を作成していきます。
サンプル
大まかな手順は、次のとおりです。
- 各見出しをリンク先にする
- 目次から各見出しへリンクを貼る
1.各見出しをリンク先にする
WordPressで見出しを挿入するには、見出しブロックを使うのが簡単ですよね。
この裏側では、以下のように少々複雑なHTMLが書かれています。
<h2>見出し2の内容</h2>
<h3>見出し2-1の内容</h3>
<h3>見出し2-2の内容</h3>
<h2>見出し3の内容</h2>
簡単な入力だけでコンテンツが作れるWordPressは、こんな面倒な作業を代わりにやってくれていたんですね。
はい。厳密に言うと、上記コード以外にもブロックエディタ特有の「コメントアウト」というものが記述されます。
ここではわかりやすくするために省略しています。
見出しをリンク先にするためには、以下のようにIDを付与します。
このときのHTMLは、以下のようになります。
<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.目次から各見出しへリンクを貼る
目次はリスト形式で作成するのが一般的です。リストブロックの「順序付きリスト」を使って目次を作ってみましょう。
WordPress（ワードプレス）のブロックエディタでよく使うブロックの1つ、「リスト」ブロックの使い方を紹介します。リストブロックでは、リストの種類を「箇条書きリスト」と「順序付きリスト」から選択したり、リストを階層化したりすることができます。
裏側では、以下のようなHTMLが書かれています。
<li>見出し1の内容</li>
<li>見出し2の内容
<ol>
<li>見出し2-1の内容</li>
<li>見出し2-2の内容</li>
</ol>
</li>
<li>見出し3の内容</li>
</ol>
目次リストの文字列に各見出しへのページ内リンクを貼るには、リンク先に「#ID名」を指定します。
このときのHTMLは、以下のようになります。
<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テーマが多くなってきました。あなたが利用しているテーマに、目次生成機能はついていませんか？設定をしなければ目次が表示されないテーマもあるかもしれません。マニュアル等を確認してみましょう。
WordPressで目次を作る方法
- プラグインで目次を作る（←オススメ）
- プラグインなしで目次を自作する
WordPressで簡単に目次を作るなら、「Easy Table of Contents」プラグインを使うのがおすすめです。
Easy Table of Contents プラグインを使うなら、記事内の見出しは必須です。見出しは記事を読みやすくするだけでなく、検索エンジンにコンテンツ構造を正しく伝える役割もある（SEO対策になる）ので、ぜひ使いましょう。
Easy Table of Contents プラグインは、目次に関する細かい設定やカスタマイズに関する機能が豊富です。Easy Table of Contents プラグインでできることで確認してください。
プラグインなしで目次を自作する方法も紹介しましたが、手間がかかるのでおすすめはしないです。特にWordPress初心者さんは、プラグインを使うほうが簡単・確実です。
読者の方が快適に記事を読めるよう、ぜひあなたのブログでも目次を作成してみてください！
