WordPress

【ウルトラ簡単】WordPressで目次を作成する方法【SEOにも有効】

WordPressで目次を作成する方法
スポンサーリンク

  • WordPressで目次を作成したい！！
  • そもそも目次って設置した方がいいの？

このような疑問にお答えできればと思います。
最近目次付きのページをよく見かけることはありませんか？

読みたいところにすぐに移動できてとっても便利ですが実はSEOにも意外な効果が期待できます。

今回は目次がSEOに有効な理由とWordPressの記事に簡単に目次を作成する方法を説明していきます。

手動で目次を作成したい人のためのテンプレートもご用意しております！

この記事の信頼性

  • ワードプレスをはじめて約10年くらいになります。
  • 現役のSEOコンサルタントでもあります。

目次を設置するメリット（SEOにも有効）

一言でいうとユーザビリティが上がります。
ユーザビリティとはを見ているページの使い勝手の良さのことです。

ユーザビリティが高いサイトユーザーだけでなくGoogleからも評価されやすくなります！

目次を入れるとユーザビリティが上がる理由

なぜ目次を入れるとユーザビリティが上がるかというとか下記の3つの理由があります！

  • ページの全体像を把握しやすくなる
  • 目的のコンテンツにすぐにたどり着ける
  • ページの離脱率低下を防止できる

もう少し具体的に説明していきます。

  • ページの全体像を把握しやすくなる
    目次にはページ内の見出しに当たる部分が入るので見出しの一覧をみることでページ内にどんな内容が書かれているのかが分かりやすくなります。
  • 目的のコンテンツにすぐにたどり着ける
    目次をクリックすることであなたが見たいコンテンツに瞬時に移動することができます。
    特にスマホユーザーはちょっとした空き時間などに記事を読んだりするので見たい情報にすぐにたどり着けます。
    最近は長文記事が多いので目次がないと自分が見たい情報がすぐに見つからずユーザーにストレスを与えてしまいます。
  • ページの離脱率低下を防止できる
    目次を設置することでユーザーがページ内容がすぐに把握できるので見たい情報があれば、そのままページ内を滞在してくれることになるのでページを読まずに離脱することが減ります。

「目次が無い方がユーザーが情報を見つけるためにページ内に留まってくれるから滞在時間が増えるのでは？」という人がいますが個人的にはあまりおすすめできません。
なぜなら、ページ内を上から下まで読んだ結果、目的の情報がそのページ内にないのであればユーザーの満足度が低下してしまうからです。
ユーザーの満足度が低下するとその記事を読んだユーザーは「この記事は価値がない」と判断し、リピートしてくれなくなりますし、他の人に「この記事おすすめだよ！」という被リンクをゲットするチャンスもなくなってしまいますので結果的にSEOにおけるプラス要素を逃してしまいます。

 

目次を設置するメリットが理解できたところで次は実際にWordPressの記事に目次を作成する方法を紹介していきます。

WordPressで目次を作成するには下記の方法があります。

  • プラグインを使う
  • 手動で作成する
  • 目次機能が最初からあるテーマを使う

それぞれ説明していきます。

目次を作成できるWordPressプラグイン「Table of Contents Plus」

WordPressの目次生成プラグインはTable of Contents Plus（TOC+）が定番です。

このプラグインを入れておけば簡単に目次を設定できます。
（当サイトの目次もTable of Contents Plusを使っています）

Table of Contents Plusは記事内の見出しを自動的に目次にしてくれます。

Table of Contents Plusの使い方

プラグインのインストール方法はを下記をご参考ください。

>>WordPressでプラグインをインストール方法

Table of Contents Plusの設定方法

Table of Contents Plusの設定は下記２つの方法があります。

  • 基本設定
  • 上級者向け設定

詳しく説明いたします。

基本設定

目次を表示したい位置や表示条件などの設定が可能です。
下記はそれぞれの項目の説明と僕の実際の設定です！

  • 位置：目次の表示位置
    ➡最初の見出しの前（デフォルト）
  • 表示条件：目次が表示される条件
    ➡2つ以上見出しがある時
  • 以下のコンテンツタイプを自動挿入：「記事」や「固定ページ」など目次を表示させる投稿タイプを選択できる
    ➡「post」「page」にチェックを入れる
  • 見出しテキスト：目次の見出しテキスト
    ➡「目次の上にタイトルを表示」にチェックを入れる
    ➡テキスト：「目次」
    ➡「ユーザーによる目次の表示・非表示を切り替えを許可」にチェックを入れる
    ➡テキストを表示：「開く」
    ➡テキストを非表示「閉じる」
    ➡「最初は目次を非表示」にチェックを入れる
  • 階層表示：見出しレベルによってインデントが入る
    ➡チェックを入れる
  • 番号振り：目次項目の先頭に番号を入れる
    ➡チェックなし
  • スムーズ・スクロール効果を有効化：目次項目をクリックしたときの移動の仕方
    ➡チェックなし
  • 横幅：メインコンテンツ（本文箇所）に対する横幅
    ➡75％
  • 回り込み：目次の回り込み
    ➡なし（デフォルト）
    テーマによっては回り込み設定をしてしまうと目次が見出しに隠れてしまうことがあります。
  • 文字サイズ：目次の文字の大きさ
    ➡95％
  • プレゼンテーション：目次のデザイン
    ➡グレー（デフォルト）

実際の設定画面はこんな感じです！

スポンサーリンク
TOC+の基本設定

基本設定の実際の設定画面

上級者向け設定

さらに細かい設定を行うことができます。
アンカー文字列を小文字にしたり、目次に表示する見出しレベルの数を調整できます。

重要な箇所は「見出しレベル」で、その他の設定はお好みで大丈夫です！

下記はそれぞれの項目の説明と僕の実際の設定です！

  • 小文字：アンカー文字列を小文字に変更できる（例：#TOC→#toc）
    ➡チェックを入れる
  • ハイフン：アンカー文字列の文字のつなぎをハイフンに変更できる（#table_of_contents_plus→table-of-contents-plus）
    ➡チェックなし
  • ホームページを含める：トップページにも目次を作成するか
    ➡チェックなし
  • CSS ファイルを除外：Table of Contents Plusプラグイン用のCSSを除外するか
    ➡チェックなし
  • テーマの見出し記号を保持：番号なしリスト要素（<ul>タグ）にCSSで背景設定しているときにその背景を使うか
    ➡チェックなし
  • 見出しレベル：目次に表示させる見出しレベル（h1～h6）
    ➡heading 2 - h2のみチェック
  • 除外する見出し：目次に表示させたくない見出しがある場合はその見出し名を入力（正規表現可）
    ➡設定無し
  • パス限定：目次を特定の見出しのみに表示させたい場合にパス（＝ドメイン以下）を入力
    ➡設定なし
  • アンカーのデフォルト接頭辞：アンカー文字列の接頭辞
    ➡「i」（デフォルトで入力されています）
TOC上級者向け設定

TOC+上級者向け設定画面

 

目次を自分で作成する方法（中級者向け）

プラグインではなく、自分で目次を設定したい場合もあると思います。

HTMLとCSSがわかればそこまで難しくないので挑戦してみても良いと思います！

ここでは僕が作った目次用のテンプレートをご紹介します。

色や大きさなどはお好みで調整ください。

設置をする際はビジュアルエディターではなくHTMLを直接編集できるテキストエディターで編集するようにしましょう！

HTML

<!-- 目次 -->
<div class="mokuji">
  <p class="mokuji__headline">目次</p>
  <ul class="mokuji__list">
    <li class="mokuji__item">
      <a href="#m_1" class="mokuji__link">見出し1</a>
    </li>
    <li class="mokuji__item">
      <a href="#m_2" class="mokuji__link">見出し2</a>
            <ul class="mokuji__innerlist">
              <li class="mokuji__inneritem">
                <a href="#m_2_1" class="mokuji__innerlink">見出し2-1</a>  
              </li>
              <li class="mokuji__inneritem">
                <a href="#m_2_2" class="mokuji__innerlink">見出し2-2</a>  
              </li>
              <li class="mokuji__inneritem">
                <a href="#m_2_3" class="mokuji__innerlink">見出し2-3</a>  
              </li>
            </ul>
    </li>
    <li class="mokuji__item">
      <a href="#m_3" class="mokuji__link">見出し3</a>
    </li>
  </ul>
</div>

CSS

/*目次全体を囲うボックス*/
.mokuji{
  width: 95%;
  margin: 0 auto;
  background: #f9f9f9;
  border: 1px solid #aaa;
  padding: 10px;
}

/*目次タイトル*/
.mokuji__headline{
  font-weight: bold;
  font-size: 1.2em;
  margin: 0;
}
/* 目次のリストボックス */
.mokuji__list{
  padding: 0;
  margin-bottom: 10px;
}

/*目次の項目箇所*/
.mokuji__list,
.mokuji__innerlist{
  list-style: none;
}
.mokuji__item{
  border-bottom: dotted 1px #aaa;
  padding: 10px 0;
}
.mokuji__item:last-child{
  border: none;
}
.mokuji__inneritem{
  padding: 5px 0;
}

/*目次のリンク*/
.mokuji__link,
.mokuji__innerlink{
  text-decoration: none;
  color: #000;
  display: block;
}

あとは見出し箇所にアンカーを設置してあげればOKです！（下記のコードのid="○○"の箇所です）

<h2 id="m_1">見出し1</h2>
<h2 id="m_2">見出し2</h2>
<h3 id="m_2_1">見出し2-1</h3>
<h3 id="m_2_2">見出し2-2</h3>
<h3 id="m_2_3">見出し2-3</h3>
<h2 id="m_3">見出し2</h2>

最初から目次機能があるWordPressテーマ

「そもそも最初から目次機能があるテーマを使えばいいんじゃね？」という方は下記のテーマがおすすめです！

まとめ

以上がWordPressで目次を作成する方法になります。

まとめるとWordPressで目次を作成するには

  • プラグインを使う
  • 手動で作成する
  • 最初から目次機能があるテーマを使う

という３つがベターかなと思います！

個人的にはプラグインか目次機能があるテーマを使うのどちらかがおすすめです。

手動で作成にするのはメンテナンスが面倒だったりもしますが「デザインにこだわりたい！！」という人はぜひやってみてください！

スポンサーリンク

その他のWordPressに関する記事はこちら

WordPress

© 2025 OSHIKEIブログ