MENU
Tsuzuki
ブロガー
ブロガー歴7年。立命館大学卒。2019年にTsuzuki Blogを開設し、約1年で月160万円を達成。ブログノウハウを発信しています。累計2,000名以上が参加するオンラインコミュニティ「ブログゼミ」共同代表。フォロワー6万人のXでも情報発信中
アーカイブ
カテゴリー

【Table of Contents Plus 使い方】目次作成・カスタマイズの全手順

記事内に商品プロモーションを含む場合があります
【Table of Contents Plusの使い方】WordPressで目次を作成する方法
悩んでいる人

Table of Contents Plus で目次を作る方法を、ゼロから教えてほしい!

こんなお悩みを解決します。

本記事の内容

  • Table of Contents Plus(TOC+)の概要
  • TOC+のインストールから基本設定までの手順
  • 目次の表示位置・デザイン・階層などのカスタマイズ方法
  • 目次が表示されない時の対処法

本記事の信頼性

この記事を書いている僕はブログ歴7年、累計1億円以上の収益を得てきました。この経験をもとに、ブログ・アフィリエイトのノウハウを発信しています。

今回は、「Table of Contents Plus(TOC+)」を使って、WordPressブログに目次を作成する方法をご紹介します。

僕が執筆時に意識しているのは、「読まない・行動しない・時間をかけない読者」という前提です。
そんな読者に記事を最後まで読んでもらうには、見取り図として目次を置くのが一番手っ取り早い手段ですよね。

本記事の手順どおりに進めれば、TOC+で読みやすい目次を5分ほどで設置できますよ。

本記事の手順をひと通り踏めば、下記のような目次が自動で生成されます。

Table of Contents Plusで作成した目次のサンプル
Table of Contents Plusで作成した目次のサンプル

では、ご紹介していきましょう。

Tsuzuki

まだ目次を導入していない方は、本記事を見ながら一緒に設置していきましょう。

目次

Table of Contents Plus(TOC+)とは?目次を自動生成するプラグイン

Table of Contents Plus(TOC+)とは?目次を自動生成するプラグイン
Table of Contents Plus(TOC+)とは?目次を自動生成するプラグイン

Table of Contents Plus(TOC+)は、WordPressブログに目次を自動生成できる無料プラグインです。

Table of Contents Plus(TOC+)の公式プラグインページ
Table of Contents Plus(TOC+)の公式プラグインページ

記事内のH2やH3といった見出しを自動で読み取って、本文の冒頭に目次を差し込んでくれます。

長らくシンプルで安定動作するため、WordPressユーザーの定番として使われ続けてきた老舗プラグインですね。

①:WordPressブログに目次が必要な3つの理由

WordPressブログに目次を入れるべき理由は、下記の3つですね。

  1. 読者が、知りたい情報まで一瞬でたどり着ける
  2. 記事全体の構成が一目で伝わり、離脱されにくい
  3. 検索エンジンに記事構造が伝わり、SEO評価にも好影響

つまり、目次は「読者の体験」と「SEO」の両方にメリットがあるパーツということですね。

記事を頭から最後まで全部読む読者は、実は少数派ですよね。
そんな読者にとって、記事を開いた瞬間に「どこに何が書いてあるか」が一目で伝わる目次は、かなり頼れる存在です。

書籍にも目次が付いているのと同じで、ブログ記事にも見取り図を置く意味は大きいですよ。

Tsuzuki

ちなみに、目次を一度設置すれば自動で生成されるので、運用コストもほぼゼロですね。

②:SWELLなどテーマ標準目次との違い、TOC+はこんな人におすすめ

最近のWordPressテーマには、目次機能が標準で搭載されているものが増えています。

そのため、TOC+を導入すべきかどうかは、お使いのテーマに目次機能があるかで判断するのが正解ですね。

判断軸を整理すると、下記のとおりです。

  • SWELLなど標準目次がある最新テーマ:TOC+は基本的に不要。テーマ機能で十分
  • 標準目次がないテーマやクラシックテーマ:TOC+を入れるのが手っ取り早い
  • 表示条件やデザインを細かく制御したい人:TOC+の自由度が活きる

少し僕の話をすると、もともと当ブログはAFFINGER6を使っていたので、長らく目次の生成はTOC+に任せていました。
その後にSWELLへ移行してからは、SWELL標準の目次機能を使っているので、現在TOC+は使っていません。

とはいえ、7年以上ブログを運営してきた中で、TOC+は長くお世話になってきた定番プラグインであることに変わりはないですね。

テーマ機能で目次が出せない方、もしくは標準目次のデザインに満足できない方は、TOC+を入れておけば間違いないですよ。

WordPressに入れておきたい他のプラグインは、下記の記事でまとめてご紹介しています。

Tsuzuki

テーマ選びから見直したい方は、まず使っているテーマの機能一覧を確認してみてくださいね。

Table of Contents Plus 使い方(インストールから初期設定まで)

Table of Contents Plus 使い方(インストールから初期設定まで)
Table of Contents Plus 使い方(インストールから初期設定まで)

TOC+で目次を作るまでの手順は、下記の2ステップだけです。

  1. Table of Contents Plusをインストール・有効化する
  2. Table of Contents Plusの基本設定を変更する

順に解説していきますね。

①:Table of Contents Plusをインストール・有効化する

まずは、Table of Contents Plusをインストールして有効化しましょう。

WordPress管理画面」→「プラグイン」→「新規追加」と進み、検索窓に「Table of Contents Plus」と入力します。

Table of Contents Plusをインストール
Table of Contents Plusをインストール

該当プラグインの「今すぐインストール」をクリックし、続けて「有効化」をクリックします。

Table of Contents Plusを有効化
Table of Contents Plusを有効化

有効化が完了すると、下記のような画面に切り替わります。

Table of Contents Plusの有効化が完了
Table of Contents Plusの有効化が完了

続いて、表示設定を変更していきます。

②:Table of Contents Plusの基本設定を変更する

ここでは、当ブログがおすすめする目次の基本設定をご紹介します。

WordPress管理画面」→「設定」→「TOC+」をクリックします。

Table of Contents Plusの設定画面
Table of Contents Plusの設定画面

下記6つの項目を、画像と同じように設定してください。

  1. 表示条件:2つ以上
  2. コンテンツタイプ:postを追加
  3. 見出しテキスト:テキストを入力
  4. スクロール効果:チェックを入れる
  5. 文字サイズ:90%に変更
  6. プレゼンテーション:白に変更

上記のとおり設定すれば、基本設定は完了です。

固定ページに目次は不要」という方は、コンテンツタイプから「page」のチェックを外しておきましょう。

Tsuzuki

これで、見出しが2つ以上ある投稿ページや固定ページに、自動で目次が生成されますよ。

Table of Contents Plusのカスタマイズ方法

Table of Contents Plusのカスタマイズ方法
Table of Contents Plusのカスタマイズ方法

続いて、Table of Contents Plusで目次をカスタマイズする方法をご紹介します。

カスタマイズできる項目は、下記の6つです。

  1. 目次の表示位置
  2. 目次に表示する見出しレベル
  3. 目次の階層表示のありとなし
  4. 目次のデザイン
  5. 目次の表示条件
  6. サイドバーへの目次表示

1つずつ、設定方法をご紹介します。

①:目次の表示位置を変更する方法

目次の表示位置は、下記4つから選べます。

  1. 最初の見出しの前(デフォルト)
  2. 最初の見出しの後
  3. 上:一番上
  4. 下:一番下

基本的には「最初の見出しの前(デフォルト)」のままでOKですが、記事の冒頭で目次をしっかり見せたい人は「上(一番上)」を選んでもいいですね。

WordPress管理画面」→「設定」→「TOC+」→「基本設定」と進み、「位置」で選択しましょう。

目次の表示位置を変更する方法
目次の表示位置を変更する方法

お好きな位置を選んでみてください。

②:目次の見出しレベルを指定する方法

目次の見出しレベルとは、目次にどこまでの見出しを表示するかを指定する設定のことです。

例えば、H2見出しとH3見出しだけを目次に出したいときは、下記のように設定します。

WordPress管理画面」→「設定」→「TOC+」→「基本設定」→「上級者向け」と進み、「見出しレベル」で「h2」と「h3」以外のチェックを外します。

目次の見出しレベルを指定する方法
目次の見出しレベルを指定する方法

普段から「H3見出しまでしか使わない人」や「目次表示はH3までにしたい人」は、上記のように設定しておけばOKですね。

表示させたい見出しにチェックを入れる仕組みなので、お好みに合わせて調整してみてください。

Tsuzuki

当ブログも、H2とH3だけを目次に出すようにしています。

③:目次の階層を表示させない方法

目次の階層表示は、見た目の好みに合わせて「あり」と「なし」を切り替えられます。

階層表示を「あり」と「なし」にすると、見た目は下記のように変わります。

目次の階層表示「あり」と「なし」の比較
目次の階層表示「あり」と「なし」の比較

階層表示「あり」の場合、「H2見出し→H3見出し」がインデント付きで階層表示されます。

一方で階層表示「なし」の場合、H2見出しもH3見出しも階層がなく、フラットな連番で並びます。

WordPress管理画面」→「設定」→「TOC+」→「基本設定」と進み、「階層表示」のチェックを切り替えればOKです。

階層表示のチェックで切り替え
階層表示のチェックで切り替え

当ブログでは、階層表示を「あり」にしています。お好みで切り替えてみてくださいね。

④:目次のデザインを変更する方法

目次のデザインは、6種類のテンプレートから選べます。

目次のデザインを変更する方法
目次のデザインを変更する方法

WordPress管理画面」→「設定」→「TOC+」→「基本設定」と進み、「プレゼンテーション」から好きなデザインを選びましょう。

ブログ全体のデザインに馴染むものを選ぶと、目次が浮かずに自然に溶け込みますよ。

⑤:目次の表示条件を変更する方法

目次は、見出しの数が一定以上になったときだけ表示するように調整できます。

WordPress管理画面」→「設定」→「TOC+」→「基本設定」と進み、「表示条件」で見出しの数を選びます。

目次の表示条件を変更する方法
目次の表示条件を変更する方法

最低でも「2つ以上」から選べます。

短い記事には目次を出したくない人は、「4つ以上」「5つ以上」あたりに設定しておくと、見出しが少ない記事では目次が非表示になりますよ。

⑥:サイドバーに目次を表示する方法

目次は、本文の冒頭だけでなくサイドバーにも表示できます。

WordPress管理画面」→「外観」→「ウィジェット」と進み、サイドバーウィジェットに「TOC+」を追加すればOKです。

サイドバーに目次を表示する方法
サイドバーに目次を表示する方法

目次をサイドバーのみに表示」にチェックを入れると、本文の目次が消えてサイドバーだけに目次が出るようになります。

以下の投稿タイプで:」の項目では、「post」と「page」の両方にチェックを入れておきましょう。

ただし、サイドバー用の目次はデザインがかなりシンプルになるので、見た目のこだわりが強い人には物足りないかもしれません。

Tsuzuki

ちなみに、最近はスマホで記事を読む方が多いので、サイドバー目次の優先度はそこまで高くないと感じています。

Table of Contents Plus ショートコードの使い方

TOC+には、自動表示の他にショートコードで目次やサイトマップを呼び出す機能もあります。

覚えておくと便利なショートコードは、下記の2つです。

  • [toc]:記事の好きな位置に目次を挿入する
  • [sitemap]:ブログ全体のサイトマップを自動生成する

順に解説していきますね。

①:記事の好きな位置に目次を挿入する

記事内の好きな位置に目次を挿入したいときは、[toc]ショートコードを本文に書きます。

「リード文の末尾」「特定のH2の直前」など、自動表示の位置とは別の場所に目次を出したいときに便利です。

使い方は、Gutenbergエディタで「ショートコード」ブロックを追加し、[toc]と入力するだけですね。

注意点として、自動表示も並行して有効になっていると目次が2つ表示されてしまうので、特定の記事だけショートコードで挿入したい場合は、基本設定の「コンテンツタイプ」のチェックを外しておきましょう。

②:ブログ全体のサイトマップを自動生成する

ブログ全体の記事一覧をサイトマップとして見せたいときは、[sitemap]ショートコードを使います。

固定ページを新しく作成し、本文に[sitemap]と入力して公開すれば、カテゴリーごとに整理された記事一覧が自動で生成されますよ。

読者向けのHTMLサイトマップとして公開しておくと、回遊率の改善にもつながります。

Tsuzuki

ちなみに、検索エンジン向けのXMLサイトマップは別物なので、SEO対策では「XML Sitemap Generator」など専用プラグインの利用を検討してみてくださいね。

Table of Contents Plusが表示されない時の対処法

TOC+を有効化したのに目次が表示されない場合、原因は下記の3つに絞れます。

  1. 記事内の見出しが「表示条件」を満たしていない
  2. 「コンテンツタイプ」の設定が外れている
  3. 本文に非表示用のコメントが入っている

1つずつ、確認方法を解説しますね。

①:見出しの数が表示条件を満たしているか確認する

TOC+の初期設定では、記事内の見出しが2つ以上ないと目次が表示されない仕様になっています。

例えば、表示条件を「4つ以上」に設定しているのに、記事内のH2見出しが3つしかない場合、目次は出てきません。

WordPress管理画面」→「設定」→「TOC+」→「基本設定」と進み、「表示条件」の数値が記事の見出し数を上回っていないかチェックしましょう。

②:コンテンツタイプの設定を確認する

目次を表示したい記事種別が、コンテンツタイプの設定から外れているケースもよくあります。

WordPress管理画面」→「設定」→「TOC+」→「基本設定」と進み、「以下のコンテンツタイプを自動挿入」でpost(投稿)とpage(固定ページ)の両方にチェックが入っているか確認してみてください。

固定ページで目次が出ないときは、ここに「page」のチェックが入っていない可能性が高いです。

③:本文に「nocontents」コメントが入っていないか確認する

TOC+には、特定の記事だけ目次を非表示にする「nocontents」コメント機能があります。

本文中のどこかに<!--nocontents-->というHTMLコメントが入っていると、その記事だけ目次が表示されません。

過去に他のテーマや別プラグインから引き継いだ記事には、このコメントが残っていることがあるので、本文を確認してみてくださいね。

Tsuzuki

上記3つを順番に確認しても解決しない場合は、TOC+を一度停止→再有効化してみると直るケースもありますよ。

Table of Contents Plus 使い方に関するよくある質問

Table of Contents Plus 使い方に関する、よくある質問にお答えしていきます。

目次(TOC+)を更新するにはどうすればいい?

TOC+の目次は、本文の見出し(H2やH3など)から自動で生成されます。

記事内の見出しを編集して保存するだけで、目次は自動で更新されますよ。

Easy Table of Contentsとの違いは?

機能面はかなり似ていますが、Easy Table of Contentsの方が新しく、現在も活発にアップデートされているのが大きな違いですね。

TOC+は更新頻度こそ控えめですが、シンプルで安定動作するため長く使われ続けています。

これから新規で導入するなら、Easy Table of Contentsも比較検討してみるといいですよ。

目次のデザインをおしゃれにカスタマイズする方法は?

TOC+のデフォルトデザインを変えたい場合は、CSSで背景色・枠線・フォントを調整するのが一般的です。

もしCSSの編集に抵抗があるなら、目次のカスタマイズが豊富な最新テーマに乗り換えるのも手っ取り早い方法ですね。

WordPressで目次をプラグインなしで作る方法は?

WordPressテーマに目次機能が標準搭載されていれば、プラグインは不要です。

SWELLなどの最新テーマには、目次の自動生成機能が最初から組み込まれているため、TOC+を入れなくても見やすい目次がワンクリックで設置できますよ。

まとめ:Table of Contents Plusで目次を作成しよう

まとめ:Table of Contents Plusで目次を作成しよう
まとめ:Table of Contents Plusで目次を作成しよう

今回は、Table of Contents Plus(TOC+)でWordPressブログに目次を作成する方法をご紹介してきました。

TOC+は、シンプルで扱いやすいのに細かいカスタマイズもできる、目次プラグインの定番です。

お使いのテーマに目次機能がない方は、本記事の手順でTOC+を導入しておけば間違いないですよ。

WordPressに入れておきたい他のおすすめプラグインは、下記の記事でまとめてご紹介しています。

Tsuzuki

目次をきっかけに、読者がより深く記事を読んでくれるブログを作っていきましょう。

【Table of Contents Plusの使い方】WordPressで目次を作成する方法

この記事が気に入ったら
フォローしてね!

役に立ったらシェアしてね!
  • URLをコピーしました!

この記事を書いた著者情報

Tsuzukiのアバター Tsuzuki ブロガー

ブロガー歴7年。立命館大学卒。Tsuzuki Blogを開設し、累計1億円以上の報酬達成。ブログで月1万円を稼ぐをテーマに情報発信。累計2,000名以上が参加するオンラインコミュニティ「ブログゼミ」共同代表。フォロワー6万人のXでも情報発信中。特化メディアのVPNフリークも運営中。GMOインターネット社主催のConoHaオンラインフェス2025にゲスト登壇。

目次