2021/08/16 (更新日: 2021/12/02)

【2021年】Table of Contents Plus(TOC＋)の使い方と設定方法を画像で解説｜目次自動作成プラグイン

※本ページにはプロモーションが含まれている場合があります。

こんな方におすすめです。

・Table of Contents Plus(TOC＋)って？どんな機能があるの？
・WordPressで自動で目次を表示したい！
・SEOに強くて読まれる目次にするためのTable of Contents Plusの設定を知りたい！
・ウィジェットにも目次を表示したい！

本記事の内容

Table of Contents Plus(TOC＋)でできること
読まれてSEOに強いTable of Contents Plusのおすすめの設定方法
Table of Contents Plusの6つの使い方(ウィジェット・デザインなど)
目次が表示されない時の対処法

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪

なべたろの実績

ライター100名以上の組織の法人を経営→株式譲渡
立ち上げから半年で月間1,000万PVを達成
1年で月間1200万PVを達成
年商約1億円を達成
法人向けコンサル1社あたり月額60~100万円
PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数

本記事を読むと、Table of Contents Plusを使って見やすい目次を自動で生成する方法だけでなく、SEOに強くて読まれる目次にする設定がわかります。

＼　月間1300万PVのプロが解説　／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！

【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！ブログのSEO対策にも『抑えどころ』があります。検索順位1位を取りまくってブログを爆速で伸ばすためのSEOの基礎から『抑えどころ』まで約4万文字でプロが解説。読者にもGoogleにも評価されるSEO対策とブログ作りのノウハウがまる分かり。初心者から中級者まで学べるブログのSEO戦略の決定版。

Table of Contents Plus(TOC＋)とは
- Table of Contents Plusでできること
Table of Contents Plusのインストールと有効化
Table of Contents Plusの設定方法
Table of Contents Plusの使い方
Table of Contents Plusで目次が表示されない時は？
Table of Contents Plusの目次でSEOを強化しよう！

Table of Contents Plus(TOC＋)とは

>> Table of Contents Plus
Table of Contents Plusは省略して「TOC＋」とも呼ばれ、WordPressの投稿ページなどで自動で目次を生成して表示してくれるプラグインです。

記事のhタグの見出し(h2~h6)が目次の中の項目になり、例えば本記事であれば以下のような目次を作成してくれます。

※上記はスクショでの見本画像なのでクリックはできません。
※デザインは自分でカスタマイズしています。デザインのカスタマイズ方法も後ほど解説します。

上の画像のように、クリックで各見出しに遷移できるリンク付きの目次を自動生成してくれるのがTable of Contents Plusです。

見出しがあると何が便利なの？

見出しがあると、

自分が知りたいことがその記事に書いてあるかどうか
他に興味がありそうな内容はどんなことが書いてあるか

を読者が先に把握することができるので読みやすい記事になり滞在時間が伸びます。

逆に目次がない記事はそもそも読む気にすらならない人も多いです。

つまり目次があるだけで読者に読まれるので、検索順位アップや売上アップにもつながります。

Table of Contents Plusでできること

Table of Contents Plusでは具体的にどんなことができるの？

Table of Contents Plusでは具体的には以下のような機能があります。

Table of Contents Plusでできること

自動でリンク付きの目次を作成してくれる
固定ページやカスタム投稿タイプにも対応
h2やh3・h4など階層がわかるように目次を表示
いくつかのデザインから選択できる
ウィジェットに簡単に目次を表示できる
目次を表示する条件など、他にも詳細な設定ができる
ショートコードでも使える

階層構造がわかる表示にできたりデザインも含めて簡単にカスタマイズできるのがTable of Contents Plusの大きな魅力です。

個人的な意見としては、他の目次生成プラグインはエラーで動かないプラグインも多いけど、Table of Contents Plusはエラーがなくて使いやすい！！

⇡目次へ戻る

Table of Contents Plusのインストールと有効化

それでは、Table of Contents Plusの設定や使い方をインストール方法から順番に解説します。

まずはインストールから♪

注意

どのプラグインでもそうですがプラグインの相性によっては不具合が起こる可能性もあるので、インストールの前に以下の記事を参考にWordPressのバックアップを取っておきましょう。
>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】

WordPressの管理画面から「プラグイン」→「新規追加」をクリックします。

プラグインの検索窓に「Table of Contents Plus」と入力して検索します。

上の画像のプラグインがTable of Contents Plusになります。

「今すぐインストール」をクリックします。

インストールが完了したら、「有効化」をクリックします。

「プラグインを有効化しました。」と表示されて画面が切り替わればTable of Contents Plusのインストールと有効化が完了です。

⇡目次へ戻る

Table of Contents Plusの設定方法

次はTable of Contents Plusを使うためのおすすめの設定方法を解説します。

SEOに強いおすすめの設定を紹介するよ♪

設定は大きく以下の3つがあります。

設定①：基本設定
設定②：外観設定
設定③：上級者向け設定

※「設定③：上級者向け設定」も必須の設定です。

それぞれ順番に、変更すべきおすすめの設定と重要な点にフォーカスしながら解説していきます。

設定①：基本設定

まずは基本設定から！

まずは設定画面を開きましょう。

WordPressの管理画面から「設定」→「TOC＋」をクリックします。

上の画像の画面が表示されるので、ここから設定を進めていきます。

位置

項目それぞれについて簡単に紹介していくよ♪

目次を記事のどこに表示するかを以下の4つから選択することができます。

最初の見出しの前 (デフォルト)
最初の見出しの後
上
下

デフォルトのままがおすすめです。

表示条件

見出しが何個以上ある時に目次を表示するかを設定できます。

見出しが2つや3つでも目次がある方が読者にとっては分かりやすいので、
「2つ以上見出しがあるとき」に設定しています。

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

目次を表示するページを設定できます。

pageは固定ページ
postは投稿ページ(通常の記事ページのこと)

を表しています。

上記の2つのみにチェックが入っていればOKです。

見出しテキスト

目次に表示されるタイトルの文字を変更することができます。

初期は「Contents」になっていますが、

などもよく使われます。

「最初は目次を非表示」にチェックを入れると、以下のように記事を目次が閉じた状態で表示されるようになります。

ユーザーは「show」をクリックすることで目次を開くことができます。

memo

ユーザビリティとSEOを考えると、開いたままがおすすめです。

階層表示

h2やh3・h4など、階層がわかるように目次を作成するための設定です。

デフォルトのチェックありでは、上の画像のように階層で表示されます。

チェックを外すと階層がなくなります。

デフォルトのままが見やすくておすすめ！

番号振り

目次に番号をつけるかどうかの設定をできます。

チェックが入っていると、数字が上の画像のように最初に数字が表示されます。

チェックを外すと数字がなくなります。

この設定は好みでOK！

「設定①：基本設定」はこれで全て完了です。

設定②：外観設定

次は外観設定！

「外観」の設定では、目次のレイアウトやデザインについての設定をできます。

他の設定項目

以下は、外観設定の項目の一覧です。

項目名	設定内容
横幅	目次の横幅をピクセルや%で指定できます。
回り込み	配置についての設定です。デフォルトの「なし」が推奨。
文字サイズ	目次内の文字サイズをptや%などで指定できます。

設定③：上級者向け設定

設定はこの設定で最後だよ♪

最後は上級者向け設定についてです。

ここではやや詳細な設定をすることができます。

「hide」をクリックして設定メニューを表示させます。

見出しレベル

「見出しレベル」の項目では、h1~h6のどの見出しまで目次に表示するかを選択できます。

デフォルトのままだと、上の画像のようにh4も目次に表示されます。

h4~h6まで目次に入ると目次が見にくい(そもそもh5とh6は記事でも使わない)
h2だけだと情報が少なくて内容を理解しにくい

という理由から「h2」と「h3」の2つのみにチェックを入れています。

除外する見出し

プラグインやワードプレスのテーマによっては、記事の最後に「関連記事」などの見出しが自動で作成されて追加されることがあります。

その場合には上記のように、目次にその見出しが追加されてしまうのですが、それを防ぐのが「除外する見出し」の項目です。

除外したい見出しの名前を入力することで、

その名前の見出しは目次から削除することができます。

他の設定項目

上級者向けの設定には他には以下の項目がありますが、デフォルトのままでOKです。

項目名	設定内容
小文字	チェックするとアンカーに必ず小文字を使用する。アンカーとは、aタグのhrefに入る値。
ハイフン	チェックすると、アンカーでアンダースコアではなくハイフンを使用する。
ホームページを含める	チェックすると、ホームページ上の条件を満たす項目の目次を表示する。
CSSファイルを除外	チェックすると、Table of Contents PlusのCSSと外観設定が目次に適用されなくなります。自分でCSSでデザインをカスタマイズしたい場合はチェックを入れます。
テーマの見出し記号を保持	お使いのテーマで番号なしリスト要素に背景が含まれている場合、対応させるにはチェックを入れます。
見出しレベル	チェックを外すとそのhタグの見出しが目次に表示されなくなります。h2とh3だけでOK。
除外する見出し	プラグインやテーマで自動で生成される見出しなど、目次に入れる必要のない見出しを指定すると目次から除外できます。
スムーズ・スクロール上部余白	スムーズ・スクロール(目次の見出しをクリックした際に、瞬時の遷移ではなくスクロールで遷移させる)を利用する際に、画面上部がメニューバーに隠れないように高さを調整できます。メニューバーとかぶる場合はメニューバーの高さの分だけpxを指定。
パス限定	この項目にパスを入力すると、指定したパスのみで目次が表示され、他のページでは目次が表示されなくなる。
アンカーのデフォルト接頭辞	アンカーの接頭辞を変更することができます。

ここまで設定が完了したら、「設定を更新」をクリックして設定を保存しましょう。

これで設定は全て完了です。

設定の条件に従って、記事ページに自動で目次が表示されるようになります。

⇡目次へ戻る

Table of Contents Plusの使い方

ここからは、Table of Contents Plusの基本的な使い方から応用まで以下の6つを解説します。

記事に目次を表示する
ショートコードで任意の位置に目次を表示する
ショートコードで目次を非表示にする
目次をウィジェットに表示する
サイトマップを自動で作成する
目次のデザインをさらにおしゃれにカスタマイズする

目次を表示するだけじゃなくて色々できるんだね。

簡単だからさくっと紹介するね♪

使い方①：記事に目次を表示する

Table of Contents Plusの最も基本の機能ですが、「記事ページに目次を表示する」ことはTable of Contents Plusを有効化して解説の通りに設定を済ませれば全て自動で記事ページに表示されます。

設定がまだの方は「Table of Contents Plusの設定方法」の見出しでおすすめの設定方法と手順を解説しています。

設定が完了したのにうまく表示されない場合は「Table of Contents Plusで目次が表示されない時は？」の見出しで原因と対処法を解説しています。

使い方②：ショートコードで任意の位置に目次を表示する

以下のショートコードを使うことで、目次を記事の自分の好きな位置に表示することができます。

[toc]

使い方は上のショートコードを、目次を表示したい箇所に貼り付けるだけでOKです。

例えば上の画像のように[toc]と記載すると、

ショートコードを記載した位置に目次が表示されています。

使い方③：ショートコードで目次を非表示にする

ショートコードで目次を非表示にすることもできるよ♪

目次を非表示にしたい場合、非表示にしたい記事のどこかに以下のショートコードを貼り付けるだけでOKです。

[no_toc]

memo

貼り付ける場所はどこでもOKですが、わかりやすいように最初の見出しの前など自分でルールを決めておくのがおすすめです。

例えば上の画像のように[no_toc]と記載すると、

目次が非表示になっています。

使い方④：目次をウィジェットに表示する

ウィジェットに目次があると見やすいよね♪

Table of Contents Plusでは目次をウィジェットに表示するのもとっても簡単だよ♪

目次をウィジェットに表示するには、WirdPressの管理画面から「外観」→「ウィジェット」をクリックします。

ウィジェットに追加するための項目の中に「TOC＋」という項目が追加されているので、目次を表示したい箇所にドラッグ&ドロップで追加します。

記事ページを確認すると、サイトバーにも目次が表示されました。

目次をサイドバーのみに表示させたい場合

先の例では、記事のトップとサイドバーの2箇所に目次が表示されていますが、サイドバーだけに表示させることもできます。

サイドバーに「TOC＋」のウィジェットを追加する画面で、「目次をサイドバーのみに表示」という項目があるのでチェックを入れて「保存」をクリックしましょう。

記事トップの見出しが非表示になり、サイドバーだけの表示になりました。