MENU

【2024年最新】Table of Contents Plusの使い方・カスタマイズ方法

本サイトにはプロモーションが含まれています。

Table of Contents Plusは、WordPress記事の目次を生成できるプラグインです。

記事の冒頭に目次を設置すると、読者の利便性が高まることに加えて、SEO対策としての効果も期待できます。

Table of Contents Plusの基本的な使い方や設定・カスタマイズ方法とは？

本記事は、ブログブートキャンプのブログの始め方-WordPressのプラグインに関する内容となります。

レオ

WordPressの記事に、リスト形式の目次を設置したい！

アレックス

プラグインのインストールだけで、自動生成できるぞ！使い方や設定方法を確認していこう。

ジャンプできる目次

この記事の著者

アレックス
@blog_bootcamp

アレックス(ALEX)

横浜国立大学大学院 工学府を修了し、富士通株式会社に入社。その後、エンジニアやブログの経験を活かしてブログブートキャンプを設立。ブログやブログ運営に必要なWordPress、レンタルサーバー、VPSの専門家としてノウハウや情報を発信中。

著者情報の詳細

記事の編集ポリシー・レビューガイドライン

【広告主の開示】
※当サイトは、広告主から支払われる広告収入を主な収入源として運営を行っています。
※当サイトの記事では、商品・サービスの紹介に広告主のアフィリエイト広告を利用しています。
※記事で紹介した商品・サービスを購入すると、広告主から当サイトに報酬が支払われることがあります。

スポンサーリンク

Table of Contents Plusとは

WordPress.org 日本語
Table of Contents Plus 目次を自動で生成する、強力でユーザーフレンドリーなプラグインです。 全てのページとカテゴリーリストを表示するサイトマップも出力することができます。

Table of Contents Plusは、WordPress記事の目次を自動生成できるプラグインです。

自動生成された目次は、記事本文のH2・H3見出しと同じ構造になっていて、クリックすると見出しの位置まで移動することができます。

例えば、Table of Contents Plusで自動生成した目次のサンプルは、次の通りです。

Table of Contents Plusの目次例
こちらはクリックできません
レオ

目次を見るだけで、記事の内容が一目でわかるね！

アレックス

目次は読者のためであり、検索エンジンのためにもなるんだ。

スポンサーリンク

Table of Contents Plusの使い方

Table of Contents Plusの使い方

Table of Contents Plusの使い方は、プラグインをインストールして簡単な設定をするだけです。

WordPressプラグインの新規追加ページでTable of Contents Plusをインストール・有効化してから、設定を進めていきましょう。

目次を自動で生成する設定

まずは、Table of Contents Plusで目次を自動生成するための初期設定を行います。

WordPress管理画面 TOC+

WordPressの管理画面で「設定→TOC+」とクリックしてください。

Table of Contents Plus 基本設定

Table of Contents Plusの基本設定が表示されるので、以下の通り設定をしましょう。

  • 表示条件: 2つ以上見出しがあるときに変更
  • コンテンツタイプ: postにチェックを入れる
  • 見出しテキスト: クリックできる目次と入力
  • 表示・非表示切り替え: チェックを外す

固定記事の目次が不要な場合は、pageのチェックを外してください。

Table of Contents Plus 上級者向け

続いて、下部にある上級者向け設定では、以下の通り設定をしてください。

  • 見出しレベル: h2とh3だけにチェックする

関連記事などの見出しが意図せず目次に含まれてしまう場合は、除外する見出しに入力すればOKです。

設定完了後は、最下部の「設定を更新」を忘れずにクリックしておきましょう。

以上の設定で、全ての記事と固定記事に目次が自動挿入されています。

ショートコードで挿入する方法(位置を変える)

記事に目次を手動で挿入したい場合は、次のショートコードを任意の位置に設置すればOKです。

[toc]
レオ

目次を手動挿入したら、自動分と合わせて2つ表示されるの？

アレックス

ショートコードで挿入した場合は、予め設定した位置に目次は表示されないから大丈夫だ！

記事の目次を非表示にする方法

特定の記事のみ目次を非表示にするには、次のショートコードを記事内に設置してください。

[no_toc]
レオ

[no_toc]のショートコードって記事のどこに設置したらいいの？

アレックス

本文中であれば、どこでも大丈夫だ。通常目次が配置される最初の見出しの前に置いておけばわかりやすいぞ！

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

Table of Contents Plusにより生成した目次は、サイドバーに設置することも可能です。

目次をサイドバーの追尾エリアに設置することで、読者が目次を確認しながら記事を読めるようになり、ユーザビリティの向上につながります。

WordPress ウィジェット編集

WordPressの管理画面から「外観→ウィジェット」と進み、ウィジェット編集画面を開きます。

Table of Contents Plusをサイドバーに配置

利用可能なウィジェットにTOC+が表示されているので、配置したいウィジェットエリアにドラッグ&ドロップしてください。

以上の設定で、ウィジェットで配置した箇所に目次が表示されているはずです。

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

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

Table of Contents Plusのデザインを変更するCSSのカスタマイズを紹介します。

CSSはデフォルト状態でも問題はありませんが、より自然な見た目にしていきましょう。

目次を中央に配置する方法

Table of Contents Plusにより生成された目次を中央に配置する方法を解説します。

デフォルトの目次では左寄せで表示されていますが、中央寄せに変更する設定項目がないため、自分自身でCSSを編集する必要があります。

WordPressの管理画面から「外観→カスタマイズ→追加CSS」と進み、以下のコードをコピペで設置すると、目次が中央に移動します。

#toc_container {
	margin: auto;
}

まとめ

今回は、WordPressプラグインのTable of Contents Plusについて、使い方やカスタマイズ方法を解説しました。

記事のポイントをまとめます。

本記事のポイント
  • Table of Contents Plusは、記事の目次を自動生成できるプラグインです
  • 基本的な使い方として、目次の自動生成・手動挿入・非表示方法を解説しました
  • カスタマイズ方法として、目次を中央に配置する方法を紹介しました
SWELL

SWELLは、高機能で使いやすいテーマを探している方におすすめ！特にブロックエディターの使いやすさは抜群で、記事執筆がサクサク進みます。

公式サイトを見る
評判口コミを見る
AFFINGER

AFFINGERは、豊富な実績があるテーマを使いたい方におすすめ！多くのブロガーに使われていて、ブログコンテストでの入賞実績も多数です。

公式サイトを見る
評判口コミを見る
THE THOR

THE THORは、おしゃれなデザインを使いたい方におすすめ！プロが制作したテンプレートが用意されていて、本格デザインをすぐに使えます。

公式サイトを見る
評判口コミを見る

同じカテゴリーの記事

WordPressプラグインのおすすめ一覧

以上、「Table of Contents Plusの使い方・カスタマイズ方法まとめ」でした。

この記事の参考情報

スポンサーリンク

スポンサーリンク

スポンサーリンク

ブログの始め方
WordPressプラグイン
  1. ブログブートキャンプ
  2. ブログの始め方
  3. 【2024年最新】Table of Contents Plusの使い方・カスタマイズ方法
ジャンプできる目次