運営理念はコチラ

【目次プラグイン】Table Of Contents plus(TOC+)の導入手順・設定方法

こんにちは、coba(@coba_works)です。

  • ブログに目次を設定したい
  • Table Of Contents plusの使い方が分からない…

この記事では、WordPressブログに目次をつくる人気プラグインの1つ、『Table Of Contents plus(TOC+)』の導入手順・設定方法について解説しています。

WordPressで目次をつくる定番プラグインは2つあり、Easy Table of Contentsについては別記事でご紹介しています。

  1. Table of Contents Plus ⬅︎今回はコチラ
  2. Easy Table of Contents
Easy Table of ContentsでWordPressブログに目次を作成する全手順【超簡単】Easy Table of ContentsでWordPressブログに目次を作成する全手順【超簡単】

こば

目次がないと、せっかく記事にきてくれた読者のみんなが迷ってしまう。WordPressならプラグインで誰でも簡単に目次が導入できるから、絶対に導入しよう。

目次があれば記事が読みやすくなる

記事に目次がない場合と、目次がある場合で以下のような違いが生まれます。

目次がある場合とない場合(TOC+)

こば

目次があれば、記事のどこに何が書いてあるのかすぐに分かるし、スマホでも読みやすい設計になるよ。

STEP1. Table Of Contents plusをインストール

まずは『Table Of Contents plus』をワードプレスにインストールしていきます。

1-1. プラグインを追加する

ワードプレス管理画面から[プラグイン][新規追加]をクリックしましょう。

1-2. 「TOC+」と検索し、インストール→有効化

プラグインの新規追加ページの右上にある検索スペースに「Table Of Contents Plus」と入力するとプラグインが見つかります。

[今すぐインストール][有効化]をクリックすればインストールが完了です。

Table Of Contents plusをインストール

こば

プラグインのインストールはこれだけです。
続いて、TOC+の設定をしていきましょう。

STEP2. Table Of Contents plusの初期設定

インストールが完了したら、ユーザーが見やすいように目次を設定していきましょう。

2-1. プラグインの設定画面に移動

ワードプレス管理画面から[設定][TOC+]とクリックすると、Table Of Contents plusの設定画面に移動できます。

Table Of Contents plusの初期設定

2-2. 「位置」と「表示条件」

Table Of Contents plusの初期設定

位置

目次をどこにおくのか決める設定。4通りから選択できますが、デフォルトでOKです

  • 最初の見出しの前(デフォルト)
  • 最初の見出しの後
表示条件

記事内に見出しが何個あったときに目次を表示するのか設定します。

[2]だと少ないので、僕は[3]をおすすめしています。

2-3. 以下のコンテンツタイプを自動挿入

「以下のコンテンツタイプを自動挿入」では、目次を表示する投稿タイプを指定できます。いろいろな項目がありますが、[post(投稿)][page(固定ページ)]にチェックしておけばOKです。

Table Of Contents plusの初期設定

2-4. 見出しテキスト

「見出しテキスト」では、目次の上に表示するタイトルを決定できます。指定すると以下のように反映されます。

Table Of Contents plusの初期設定

[目次の上にタイトルを表示]✔︎をいれ、以下のように好きなタイトルを入力します。

  • 目次
  • この記事の目次
  • Contents

など

Table Of Contents plusの初期設定

読者が目次を非表示にできるようにしてあげるかは好みで決めてくれてOKです。ただし、目次が長くなりすぎる方の場合は、表示・非表示を切り替えられるようにしてあげたほうが親切です。

また、[最初は目次を非表示]は選択しないほうがいいでしょう。目次は意外とユーザーに見られているので、はじめから表示してあげたほうがUXは高まると思います。

Table Of Contents plusの初期設定

2-5. 目次の見た目をカスタマイズ

目次の見た目をまとめて設定しましょう。以下のように設定することをおすすめします。

階層表示 ✔︎
番号振り ✔︎
スムーズ・スクロール効果を有効化 ✔︎
横幅 自動(デフォルト)
回り込み なし (デフォルト)
文字サイズ 95%(デフォルト)

Table Of Contents plusの初期設定

目次のデザインを選ぶことができるので、好きなものを選択しましょう。

Table Of Contents plusの初期設定

2-6. 上級者向け設定

上級者向け設定では「見出しレベル」以外は特にさわる必要はありません。

[h1]~[h3]までをチェックしておきましょう。[h4]以上をチェックすると目次が長くなってしまうので注意が必要です。

Table Of Contents plusの初期設定

2-7. 設定を保存

最後に、[設定を更新]をクリックして完了です。

Table Of Contents plusの初期設定