Table of Contents Plusの使い方と設定方法 目次生成WordPressプラグイン

この記事を読むのに必要な時間は1分です。

ワードプレス(WordPress)のプラグインTable of Contents Plusのインストールと設定方法や使い方を詳しく解説します。

Table of Contents Plusとは

Table of Contents PlusはWordpressの無料のプラグインです。

設定画面は日本語表示なので使うのは簡単です。

このプラグインをインストールして有効化すると記事に目次を自動で作成してくれます。

記事の初めに目次があると閲覧者は記事の内容を把握できるので利便性が向上します。

記事を作成している側にとっても目次があるとH3やH4などの見出しの順番に間違いないかを確認することが簡単にできるので必須のプラグインです。

実際にTable of Contents Plusで自動生成した目次は下記のように表示されます。

Table of Contents Plusで自動生成した目次

見出しが2つ以上ないと目次は自動生成されない

Table of Contents Plusはブログ記事内のH1～H6の見出しを元に目次を自動生成するので見出しが2つ以上ない記事には目次は作成されません。

見出しの数が2つ以上～10つ以上の見出しがある場合にのみ目次を作成する条件指定も設定できます。

Table of Contents Plusのインストール

Table of Contents PlusプラグインをWordpressにインストールする手順を解説します。

WoredpressにTable of Contents Plusプラグインを追加

WordPressのダッシュボード(管理者画面)のプラグインの新規追加に入ります

WordPressのダッシュボード(管理者画面)のプラグインの新規追加をクリックします。

プラグインを追加画面の検索ボックスに”Table of Contents Plus”と入力して検索結果を表示させます。

1. 検索ボックスに”Table of Contents Plus”と入力すると下の検索結果が表示されます
2. 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は目次の自動生成機能以外にもHTMLサイトマップを作製する機能もあります。当記事では目次機能だけをピックアップしています。

Table of Contents PlusのHTMLサイトマップ機能はこちらの記事にまとめています↓
Table of Contents PlusのHTMLサイトマップの設定方法と使い方

WordPressダッシュボード(管理画面)の設定の中にあるTOC+を選択します

WordPressのダッシュボード(管理者画面)の設定のTOC+をクリックします。

基本設定

Table of Contents Plusの基本設定は記事を自動生成するための項目が並んでいます。

位置

Table of Contents Plusの「基本設定の位置」

記事内のどこの位置に目次を設置するのかを指定できます。

• 最初の見出しの前(デフォルト)
  初期設定(デフォルト)は”最初の見出しの上”になっています
  この初期設定が一番見慣れている目次の位置です
• 最初の見出しの後
  記事の最初のH2見出しの下に目次が設置されるので見づらくなります
• 上
  記事の最初の文字の上、アイキャッチ画像の真下に目次が設置されます
• 下
  記事の最終行に目次が設置されます

表示条件

Table of Contents Plusの「基本設定の表示条件」

目次を自動生成するための表示条件を指定できます。
初期設定は4になっています。おすすめは2です。

• ２～10つ以上見出しがあるとき

記事中の見出しがここで設定した数に満たない場合は目次が自動生成されません。

以下のコンテンツタイプを自動挿入

Table of Contents Plusの基本設定の「以下のコンテンツタイプを自動挿入」

目次を自動挿入(自動生成)するコンテンツタイプを指定できます。
初期設定は”page”(固定ページ)にのみチェックマークが入っています。

ブログの投稿記事に自動挿入するには”post”にチェックマークを入れます。
固定ページに自動挿入するには”page”にもチェックマークを入れます。

• post ：普通の投稿記事
• page ：固定記事
• custom_css
• customize_changeset
• oembed_cache
• user_request
• wp_block
• wp_template
• wp_template_part
• wp_global_styles
• wp_navigation
• cta

見出しテキスト

Table of Contents Plusの基本設定の「見出しテキスト」

• ☑目次の上にタイトルを表示
  初期設定は”オン”になっています。おすすめは”オン”です

目次の上にタイトルを表示をオンにしている場合は下記の設定を変更できます。

• ボックス内に文字を入力することで任意のタイトル名に変更できます
  初期設定は”Contents”になっています
• ☑ユーザーによる目次の表示・非表示を切り替えを許可
  初期設定は”許可”になっています。
  許可しない場合は目次は開いた状態で固定表示され、”表示・非表示”の表示が消えます。
  この設定を許可にすると以降の設定項目が有効になります。

ユーザーによる目次の表示・非表示を切り替えを許可にした場合は下記の設定を変更できます。

• テキストを表示
  ボックス内に文字を入力することで任意の名称に変更できます
  初期設定は”show”になっています。おすすめは”表示”です
• テキストを非表示
  ボックス内に文字を入力することで任意の名称に変更できます
  初期設定は”hide”になっています。おすすめは”非表示”です
• ☐最初は目次を非表示
  チェックを入れてオンにすると最初は目次を閉じた状態(非表示)にできます。
  初期設定は”目次を開いた状態”になっています

階層表示

Table of Contents Plusの基本設定の「階層表示」

この設定をオフにすると全ての見出しが同じ階層になります。
初期設定は”オン”になっています。おすすめは”オン”です

番号振り

Table of Contents Plusの基本設定の「番号振り」

オンにすると全ての記事の目次で番号振りが非表示になります。

初期設定は”オン”になっています。
有料テーマのJINを使っている場合はオフにしても番号は非表示になりません。

スムーズ・スクロール効果を有効化

Table of Contents Plusの基本設定の「スムーズ・スクロール効果を有効化」

オンにすると目次の中の見出しをタップした際にスクロールして見出しにたどり着きます。オフにすると一瞬でタップした見出しに移動します。

初期設定は”オフ”になっています。おすすめは”オン”です

横幅

Table of Contents Plusの基本設定の「横幅」

目次の横幅を200～400pxの25px刻みの固定幅or25～100％の相対幅or自動orユーザ指定値に変更できます。
初期設定は”自動(デフォルト)”になっています。おすすめは”自動(デフォルト)””です。
自動だと目次テキストの長さに応じて適切な横幅に設定してくれます。

有料テーマのJINを使っている場合は、この設定は有効になりません。

回り込み

Table of Contents Plusの基本設定の「回り込み」

目次の横に本文を回り込みさせるか、させないかを設定できます。
有(左or右)と無しを設定します。横幅の設定と組み合わせて使用します。
初期設定は”なし(デフォルト)”になっています。おすすめは”なし(デフォルト)””です。

有料テーマのJINを使っている場合は、この設定は有効になりません。

文字サイズ

Table of Contents Plusの基本設定の「文字サイズ」

目次テキストのサイズを変更することができます。
初期設定は”95 ％”になっています。おすすめは”95 ％”です。

有料テーマのJINを使っている場合は、この設定は有効になりません。

プレゼンテーション

Table of Contents Plusの基本設定の「プレゼンテーション」

目次の背景色を5パターン(グレー、水色、白、黒、透明)に変更できます。
初期設定は”グレー(デフォルト)”になっています。おすすめは”グレー(デフォルト)”です

カスタムを選択するとHTMLカラーコード(#から始まる6桁の値)で下記の6項目を自由に指定することができます。

• 背景
• ボーダー
• タイトル
• リンク
• リンク(マウスオーバー)
• リンク(閲覧済み)

有料テーマのJINを使っている場合は、このプレゼンテーションの設定は有効になりません。

上級者向け(設定)

Table of Contents Plusの上級者向け(設定)

ここからは、Table of Contents Plusの上級者向け設定について解説します。

基本的にはすべて初期設定のままで大丈夫です。

小文字

Table of Contents Plusの上級者向け(設定)の「小文字」

見出しの文字に大文字の英字が含まれている場合、目次のテキストを小文字にできます。

• □アンカーに必ず小文字を使用
  初期設定は”オフ”になっています。

ハイフン

Table of Contents Plusの上級者向け(設定)の「ハイフン」

見出しの文字に半角英字が含まれている場合、目次のテキストの_を–に変更できます。

• ☑アンカーでアンダースコアではなくハイフンを使用

初期設定は”オフ”になっています。

ホームページを含める

Table of Contents Plusの上級者向け(設定)の「ホームページを含める」

固定ページをブログサイトのトップページに表示していると目次が表示されません。
目次を表示させる場合は本設定をオンにします。

• □ホームページ上の条件を満たす項目の目次を表示

初期設定は”オフ”になっています。

CSS ファイルを除外

Table of Contents Plusの上級者向け(設定)の「CSS ファイルを除外」

Table of Contents Plusプラグインに入っている目次デザインのCSSのオン/オフができます。自分でCSSをカスタマイズする場合は被ってしまうのでチェックを入れてオンにします。

• ☑プラグインの CSS スタイルを読み込まない場合はチェックを入れてください。選択した場合、上の外観設定も無視されます。

初期設定は”オン”になっているのでCSSは読み込まれません。
オフにすると表示が崩れるのでおすすめは”オン”です。

有料テーマのJINを使っている場合はチェックを入れて”オン”にしたほうが目次が綺麗に表示されます。

テーマの見出し記号を保持

Table of Contents Plusの上級者向け(設定)の「テーマの見出し記号を保持」

チェックを入れてオンにするとテーマの箇条書き(リスト)にCCSで設定した背景が含まれている場合は目次にも適用されます。

• ☑お使いのテーマで番号なしリスト要素に背景が含まれている場合、対応させるにはチェックを入れてください。

初期設定は”オン”になっています。

見出しレベル

Table of Contents Plusの上級者向け(設定)の「見出しレベル」

記事内の見出しH1～H6の目次表示のオン/オフが設定できます。

以下の見出しレベルを含める。チェックを外すと非表示になります。

• ☑ heading 1 – h1
• ☑ heading 2 – h2
• ☑ heading 3 – h3
• ☑ heading 4 – h4
• ☑ heading 5 – h5
• ☑ heading 6 – h6

除外する見出し

Table of Contents Plusの上級者向け(設定)の「除外する見出し」

見出しに特定の文字列が含まれているとき、目次に表示させないように設定できます。
複数の除外文字を指定する時はパイプ記号｜で区切ります。
他の文字に一致させる時はアスタリスク記号＊をワイルドカードとして利用できます。

スムーズ・スクロール上部余白

Table of Contents Plusの上級者向け(設定)の「スムーズ・スクロール上部余白」

個別記事に固定して設置しているヘッダー画像などがあるとき、スクロールした際にヘッダーと表示が被って見にくくなることがあるので、そのときに適切な余白を指定して調整することができます。

• 30 px

初期設定は”30”になっています。

基本設定の”スムーズ・スクロール効果を有効化”をオンにしている場合に設定できる項目になります。オフにしている場合はこの設定項目は表示されません。

パス限定

Table of Contents Plusの上級者向け(設定)の「パス限定」

ブログ内の特定の記事でのみ目次を表示させたい場合に設定します。
/から始まるパスで指定します。複数ある場合は,で区切ります。ドメイン名は不要です。

アンカーのデフォルト接頭辞

Table of Contents Plusの上級者向け(設定)の「アンカーのデフォルト接頭辞」

自動生成された目次のページ内リンクは自動的に数値が割り当てられます。これを接頭辞といいます。もしページリンクを独自に設定していて、かつ数値を使用している場合は、自動生成された数値と被らないように数値の前に文字を付け加えるように設定することができます。

自分でページリンクを作成していない場合は初期(デフォルト)設定のiのままで大丈夫です。

↓例えばこの最後の#i-3のiの部分が接頭辞です。

https://yublog.jp/wordpress-theme-install/#i-3

手動で目次を任意の位置に挿入する方法

自動で生成される目次は必ず最初のH2見出しの上に作成されます。

その位置を変更したい場合は手動で下記のコードを記事の中に記載すれば任意の位置に目次を挿入できます。

このコードを記事内に記載すれば重複して自動でH2見出しの上に目次が作成されることはありません。

特定の記事の目次を非常時にする方法

特定の記事にだけ目次を表示させたくない場合は次のコードを記事内の任意の位置に記載します。

コードの記載場所は記事内であればどこでもだ丈夫でが最初のH2見出しの上に記載するとわかりやすいです。

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

自動生成した目次はブログ内のサイドバーに表示することもできます。

PCでの閲覧に限った話になりますが利用者は目次を観ながら記事を見ることができるので読みやすくなります。

1. WordPressのダッシュボード(管理者画面)の外見のウィジェットを選択します
2. 使用するテーマによって多少異なりますがJINの場合はサイドバー追尾【PC】の∨をクリックします
3. ⊞マークをクリックすると追加できるメニューのアイコンのウィンドウが表示されるのですべて表示を押します
4. ウィジェットの中のTOC＋を選択するとサイドバー追尾【PC】内の下の行に追加されます
5. 最後に更新ボタンを押して設定を保存します

①ダッシュボード(管理者画面)の外見のウィジェットを選択

WordPressダッシュボード(管理画面)の外観の中にあるウィジェットを選択します

➁サイドバー追尾【PC】の∨をクリック

ウィジェット画面内のサイドバー追尾【PC】の∨をクリックして展開します

③ ⊞マークとすべて表示を押す

ウィジェット画面内のサイドバー追尾【PC】の⊞マークと”すべて表示”ボタンを押します

④ウィジェットの中のTOC＋を選択

ウィジェット画面内の”TOC＋”を選択します

⑤更新ボタンを押して設定を保存

ウィジェット画面内の”更新”ボタンを押します

PCで記事を開くと横のサイドバーに目次が追加されています。

サイドバーに目次が追加されます

まとめ

記事の見出しで目次を自動生成してくれるTable of Contents Plusは非常に便利なWordPressのプラグインです。

各記事内に目次があるとブログの利用者も作成者にも何がどの見出しで書かれているのかが一目瞭然です。

目次を利用すると利用者は読みたい部分を直ぐに読むこともできるし、作成者側も記事の見出しの間違いや記事の内容に漏れがないかを直ぐに確認することができます。

設定も初期設定だけで直ぐに利用できるのでブログをはじめた初期に導入することをおススメします。

Table of Contents PlusのHTMLサイトマップ機能の設定方法はこちらの記事を参考にしてください↓
Table of Contents PlusのHTMLサイトマップの設定方法と使い方

他の目次自動生成プラグイン Easy Table of Contents の使い方と設定方法はこちらの記事を参考にしてください↓