WordPressでの目次の作り方やプラグインについて解説【初心者でも簡単】

WordPressのコンテンツに目次は欠かせません。
ユーザーは目当ての情報だけを閲覧するために、Webサイトやブログを訪れます。
目当ての情報に素早くアクセスするために必要なのが目次です。

『WordPressの目次はどうやって作るの？』
『目次を設置するメリットは？』
『目次を設置できるプラグインを教えてほしい』

今回のコラム記事では、上記のような疑問に答えます。
くわえて、プラグインの設定方法や手動での目次の設置方法も解説します。

WordPressに目次を設置して、ユーザビリティの向上を目指しましょう。

WordPressに目次を設置するメリット

WordPressに目次を設置するメリットは4つあります。

• コンテンツ内容を一目で把握
• 読みたい箇所まで移動
• 検索結果に表示されることがある
• SEO効果も期待できる

それぞれのメリットについて解説します。

コンテンツ内容を一目で把握

インターネット上の記事は、雑誌や新聞とは異なりしっかりと目と通す人が少ないです。
ある調査によれば、インターネット上のテキストは2割程度しか読まれないと言われています。

ユーザーは、自分の知りたい情報にすぐにたどり着くことを優先します。
そのため、そのコンテンツに自分の知りたいことが書いてあるかどうかをまず調べたいものです。

WordPressで目次を設置すると、知りたい情報が書かれているかどうかを一目で把握できます。
内容が瞬時に把握できて、ユーザビリティ向上に役立ちます。

読みたい箇所まで移動

WordPressの目次をクリックすると、読みたい箇所まで移動できます。
ほとんどのユーザーは、記事のすべてを読みたいわけではありません。
自分の必要としている情報を知りたいだけです。

数千文字を超える記事から、自分の読みたい箇所を探すのは困難です。
文章が長すぎると、読みたい情報にたどり着かずに離脱してしまうユーザーも増えるでしょう。
しかし、目次があれば読みたい情報を瞬時に探し出してアクセスできます。

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

目次があると、検索結果に表示されることもあります。

検索結果に目次が表示されれば、露出するスペースが大きくなるためクリック率の上昇が期待できるでしょう。

また、表示される目次の項目がリンクとして反映されるため、より高いユーザビリティを提供できます。
SEOに関する情報発信メディア「Search Engine Land」によると、実際に10人に1人がこのリンクをクリックしたという調査結果を発表しました。

WordPressに目次を設置しなくては、これらのメリットは受け取れません。

SEO効果も期待できる

WordPressで目次を設置すると、SEO効果も期待できます。

記事の冒頭に設置される目次は、検索エンジンが記事の内容を理解するのに役立ちます。
Googleが記事の内容を把握できるのは、Webページの各リンクをたどっているからです。
目次は各見出しへのリンクなので、クローラーに対してナビゲーションの役割を果たします。

このように、目次は検索エンジンに対して記事内容を適切に伝える効果があります。
記事内容が適切に伝われば、検索エンジンからの評価も適切に与えられるでしょう。

WordPressで目次を作成する方法

WordPressで目次を作成する方法は3つあります。

• 手動
• プラグイン
• テーマの機能

目次はテーマの機能やプラグインなど、自動で作成するのがおすすめです。
手動はデメリットが大きくて手間もかかるため、あまりおすすめできません。

手動

WordPressに目次を手動で設置するには、HTMLの知識が必要です。

記事を書くたび、目次を手動で設置するのは大変な手間です。
手間がかかるので、記事を書くモチベーションの低下につながりかねません。

また、手動での設置は間違いが起こりやすいものです。
ユーザーが目当ての情報に飛ぼうとして飛べなかったり、まったく違う場所に飛んでしまったりすることもありえます。

以上の理由から、WordPressの目次を手動で設置するのはおすすめできません。
目次の設置は手間がかからず、簡単に行える「プラグイン」「テーマの機能」のどちらかがよいでしょう。

自動で目次を設置する方法を選択し、WordPressを効率化しましょう。

プラグイン

WordPressに目次を設置する方法として、プラグインを利用するのが一般的です。

目次を設置するプラグインには「Table of Contents Plus」「Easy Table of Contents」「Rich Table of Contents」などが挙げられます。

どのプラグインも、導入すると自動で目次を設置してくれます。
また、使い方もシンプルで難しい設定も必要ありません。

プラグインを使って自動で目次を設置すれば、過去に作成した記事にも目次が設置されます。
手間をかけずにWordPressに目次を設置するなら、プラグインを検討しましょう。

テーマの機能

利用するテーマによっては、目次を設置する機能が搭載されているものがあります。
たとえば、無料テーマで非常に人気のある「Cocoon」には、目次を自動で設置する機能が搭載されています。

Cocoonは、無料でありながら非常に多機能なテーマです。
シンプルなデザインと、有料テーマに負けないほどの多機能さが特徴のテーマです。
初心者でも簡単にカスタマイズできるように設計されています。

Cocoonでは目次の自動設置もデフォルトで設定されており、見出しを使って記事を書けば目次が作成されます。

どうしてもプラグインを入れたくないなら、Cocoonを利用しましょう。

手動で目次を作成する方法

目次を手動で作成する方法は、あまりおすすめできません。
おすすめできない理由は「手間がかかる」「間違いやミスが起こる」の2つです。

ただし、目次の作り方を知っておくことはスキルアップやWordPressへの理解度の向上につながります。

以上から、手動でWordPressの目次を作る方法について、わかりやすく解説します。

リストブロックを挿入

ここでは、ブロックエディタ（Gutenberg）を使って手動で目次を作成する方法を紹介していきます。
まずは、WordPressの管理画面から記事の編集ページを表示させてください。

記事の編集ページから、目次を作成したい箇所にリストブロックを挿入しましょう。
リストブロックの挿入方法は「+」アイコンをクリックして、検索窓に「リスト」と入力します。
リストブロックが表示されるのでクリックしてください。

リストを挿入したら、黒丸ではなく数字にしましょう。

次に、見出しを入力していきます。

見出しにアンカーを設定

目次をクリックしてその見出しにジャンプするには、見出しにアンカーを設定する必要があります。
アンカーを設定することでページ内リンクを設置できます。

ページ内リンクとは、同じWebページ内の特定の箇所にジャンプするリンクのことです。
そのジャンプする箇所に設定するのがアンカーです。

アンカーを設定するには、見出しブロックを選択して、画面右側にある「高度な設定」をクリックしてください。

「HTMLアンカー」にアンカー名を入力します。
アンカー名は半角英数字にしましょう。
今回は「midashi1」と入力しました。

それぞれの見出しに同じ手順で「midashi2」「midashi3」とアンカー名を付けていきましょう。
なお、アンカー名は同じWebページ内で重複しないようにしてください。

目次にリンク先を設定

目次にリンク先を設定していきましょう。
リンクを設定するには、リンクを挿入するテキストをカーソルで選択してリンクのアイコンをクリックします。

URLを入力するウィンドウがポップアップされますので、作成したアンカー名に「#」を付けて入力しましょう。
入力し終わったら、Enterのアイコンをクリックしてください。

実際にジャンプするかどうかをプレビューで確認しましょう。
プレビューで確認する方法は、画面右上の「プレビュー」→「新しいタブでプレビュー」をクリックしてください。

実際のプレビュー画面から、リンクが見出しにジャンプするかどうかを確認しましょう。

WordPressで目次を作成するプラグイン

先ほど触れましたが、WordPressで目次を作成するプラグインを3つ紹介します。

• Table of Contents Plus
• Easy Table of Contents
• Rich Table of Contents

紹介するプラグインはどれも優秀です。
ポピュラーで人気があるのが「Table of Contents Plus」や「Easy Table of Contents」になります。
初心者におすすめなのは「Rich Table of Contents」です。

実際に導入してみて、使い勝手やデザインを比較しましょう。

Table of Contents Plus

出典：Table of Contents Plus

Table of Contents Plusは、WordPressに目次を作成するプラグインです。
インストール数は30万を達成しており、Table of Contents Plusは高い人気を誇ります。

自動生成された目次は本文中のH2、H3と同じ構造になっており、クリックすると各見出しにジャンプできます。

自動生成以外にも、ショートコードで好きな位置に目次を配置することも可能です。
くわえて、HTMLサイトマップの生成もできるのがTable of Contents Plusの特徴です。

設定画面は日本語でシンプルに作られているため、英語が苦手な人でも直感的に設定できます。

Easy Table of Contents

出典：Easy Table of Contents

Easy Table of Contentsは、記事中の見出しを目次化して任意の場所に配置するプラグインです。
目次の各リンクにはページ内リンクが設定されており、リンクをクリックすることでその見出しまでジャンプできます。

「記事の見出しがいくつ以上で表示するか」「見出しの位置」「見出しラベル」「折りたたみ表示」など、細かな設定ができるのがEasy Table of Contentsの特徴です。
ほかにも、外観を設定で編集可能でテーマに合ったデザインにできます。

設定項目が多く、細かな設定ができる点がEasy Table of Contentsのメリットになります。
目次のデザインや表示条件にこだわりたい人向けのプラグインです。

Rich Table of Contents

出典：Rich Table of Contents

Rich Table of Contentsは、日本人が開発した国産の目次表示プラグインです。
デザイン性と使いやすさを徹底的に追求しています。

直感的なユーザーインターフェース設計によるリアルタイムプレビューを採用し、ボタン1つで理想の目次を作れます。

Rich Table of Contentsはショートコードで目次を設置することもできるため、任意の場所に配置が可能です。

プレビューで確認しながら、デザインの編集ができます。
「タイトル色」「背景色」「文字色」「枠線カラー」などを細かに調整して、テーマに合わせたデザインにすることも可能です。

設定画面が非常に使いやすいRich Table of Contentsは、初心者におすすめのプラグインです。

WordPressで目次を作るポイント

WordPressで目次を作るときのポイントについて解説します。
目次を作るポイントは「表示はh3まで」「わかりやすい見出し」の2つです。

表示はh3まで

見出しタグ（hタグ）はh1～h6まであります。
h1は記事のタイトルに使われるため、本文中では使いません。
一般的には、h2～h4までが見出しとして使用されます。

しかし、細かな見出しまで表示してしまうと目次の可読性が下がります。
そこで、目次で表示する見出しはh3までにしましょう。

H2だけですと大まかすぎますし、h4まで表示すると細かすぎるからです。

わかりやすい見出し

見出しを作るときは、わかりやすい見出しを心がけましょう。

見出しを付けるメリットは、以下のとおりです。

• 読みやすい記事になる
• SEO効果が期待できる
• 効率的にライティングできる

ユーザーにとっての見出しのメリットは、記事が読みやすくなることです。
そのためには、見出しも読みやすくないと意味がありません。

キーワードや伝えたいことを詰め込みすぎて、長い見出しになることは避けましょう。
トピックごとの内容を端的に表現している見出しがベストです。

わかりやすい見出しを心がけることで、目次もわかりやすく読みやすくなります。

Easy Table of Contentsの使い方

ここからは、目次のプラグインでポピュラーなEasy Table of Contentsの使い方を解説します。

インストール

Easy Table of Contentsのインストール方法は、ほかのWordPressのプラグインと変わりません。

WordPressの管理画面から「プラグイン」→「新規追加」を開き、右上の検索窓に「Easy Table of Contents」と入力します。
Easy Table of Contentsが表示されたら「今すぐインストール」をクリックしてください。

インストールが完了したら「有効化」をクリックして有効化しましょう。

設定

Easy Table of Contentsをインストールすると、管理画面のメニュー「設定」に「目次」が表示されます。
Settings（設定）は「一般」「外観」「高度」に分かれています。

それぞれの設定方法について、ポイントを解説します。

一般

一般設定では、基本的な設定を行います。

まずは「サポートを有効化」で「投稿」「固定ページ」にチェックを入れましょう。
「自動挿入」でも「投稿」「固定ページ」にチェックを入れてください。

「表示条件」は、デフォルトでは4件以上見出しがある場合になっています。
今回は、3件以上見出しがある場合に変更しました。

「見出しラベル」はデフォルトでは「Table of Contents」になっているので「目次」など、わかりやすく変更しましょう。

外観

外観については、デフォルトのままでも問題ありません。
テーマのデザインや配色に合わせて外観を設定しましょう。

「幅」については「Auto」か「100%」がおすすめです。
それ以外を選択する場合は「Alignment」で「Center」を設定しましょう。

高度

「高度」では、細かな設定を行います。
基本的にデフォルトのまま運用しても問題はありません。

変更しておきたい箇所は「見出し」です。
「見出し」は、どのレベルの見出しまで表示するかを設定します。
H1、H2、H3までにして、ほかのレベルの見出しはチェックを外しておきましょう。

設定を変更したら、画面最下部にある「変更を保存」をクリックしてください。

まとめ

WordPressで目次を作成する方法や、目次を設置できるプラグインを解説しました。

WordPressに目次を設置するメリットはいろいろとありますが、もっとも大きなメリットは「ユーザーが目当ての情報に素早くたどり着けること」です。

記事のすべてのテキストを読むユーザーは少数です。
ほとんどのユーザーは、目当ての情報だけを読みたくて記事を開きます。

目次は、ユーザーが目指している情報を素早く見つけるためのツールです。

WordPressで目次を作成する方法には「手動」「プラグイン」「テーマの機能」などがあります。
手動は手間がかりミスも増えるため、基本的にはおすすめできません。
WordPressで目次を設置するなら、自動で行えるプラグインがおすすめです。

WordPressに目次を設置してユーザビリティを高め、コンテンツの品質向上を目指しましょう。