こんにちは、”あんどっち”です。
あなたはWordPressに記事を投稿した時に、記事内に【目次】は設置していますか？
目次があるとその記事に何が書いてあるのか一目で分かるし、記事を見返した時に目次から見たい項目へジャンプできる様になるので、読者さんにとっては非常に便利です。
書籍で考えてもらうとイメージしやすいかと思いますが、本屋さんへ行って書籍を買う時って目次を見てどんな事が書いてある本なのか確認しませんか？
また、自分の知りたい情報が何ページに書いてあるのか、目次を見ればすぐに分かりますよね。
これと同じ事があなたのブログでも出来るんです。
つまり、目次を設置するだけでも読者さんにとって見やすいブログになるという事ですね。
WordPressでは、【Table of Contents Plus】というプラグインをインストールして、簡単な設定をしてやるだけで全ての記事に目次が自動で作成されるので、とっても簡単ですよ！
この記事では、WordPressで投稿した記事に自動で目次を作成してくれるプラグイン【Table of Contents Plus】のインストールと、設定手順について解説していきますので、あなたがまだ記事に目次を設置していないのであれば、これを機にやってみてくださいね。
それでは、順番に解説していきます！
【Table of Contents Plus】は記事に自動で目次を作成・設置してくれるプラグイン
【Table of Contents Plus】とは、WordPressに必ず入れておくべきプラグインです。
投稿した記事の見出し部分を自動で目次にして、記事内で設定した場所に設置してくれます。
しかも、設定だけしておけば過去に書いた記事も、これから投稿する記事も全て自動的に設置してくれるニクイやつなんです。
記事の冒頭部分に設置しておけば、読者さんが目次を見て記事の内容を知る事ができますし、目次から読みたい項目まで一気にジャンプする事もできるので読む側としては非常に便利ですね。
また、目次を設置することによって、読者さんが読みやすい記事になるので結果的にSEOにも効果があります。
読む方からすれば、記事に何が書いてあるのかさっさと知りたいですし、「さっきの説明どこに書いてあったっけな？」という時にも目次があればすぐに分かりますよね。
自然と読者さんからは「読みやすいブログだ」と認識してもらえるので離脱率は下がり、何度も読みに来てくれるリピーターになってもらえる可能性が上がります。
これだけ効果のある目次が【Table of Contents Plus】を使えば簡単に設置できてしまうので、WordPressでブログを始めたらすぐにでも導入して欲しいプラグインです。
【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】を使って記事内に目次を作成する為の設定をします。
WordPressのダッシュボードから、【設定】→【TOC＋】と進んでください。
【Table of Contents Plus】の設定画面になりますので、ここから目次を表示する際の設定をしておきます。
① 目次を表示する位置の設定ができます。デフォルトで【最初の見出しの前】に設定されているので、これは触らずそのままで大丈夫です。
② 見出しの数によって目次を表示するか・しないか、の設定ができます。さすがに見出しが一つしかない記事に目次は必要ありませんからね。
見出しが２つの記事もなかなか無いと思いますが、基本的には【２つ以上】で良いでしょう。
③ 目次を表示したい記事の設定ができます。【post】（一般の投稿記事）と、【page】（固定ページ）にはチェックを入れておきましょう。
④ 目次のタイトルと、表示・非表示の言葉の設定が出来ます。ここはあなたのお好みで設定してください。（僕の設定は以下の通りです）
⑤ ここにチェックを入れておくと、目次を階層にして表示してくれます。（僕はチェックを入れています）
⑥ 番号振りといって、目次の項目の順に番号を振ってくれます。個人的には番号があった方が見やすいと思うので僕はチェックを入れています。
その下に【スムーズ・スクロール効果を有効化】という項目がありますよね。
これは、目次の項目をクリックした際にジャンプするのではなく、シュルシュル～っと一気にスクロールさせる事ができる設定なのですが、試しにやってみたらスマホでやると目がチカチカして気持ち悪かったので、チェックはしないままの設定にしてあります。
一度ご自身で試してみた感じでチェックを入れるか決めてください。
⑦ 【プレゼンテーション】とは、目次の背景色の事です。ここもお好みで設定してください。
因みに、背景が【水色】だとこんな感じで↓
【黒】にするとこんな感じになります↓
使っているテーマによっても変わると思いますが、僕のテーマではグレー、白、透明は全部同じ色にしか見えませんでした。
はい、では設定の続きに戻ります。
次は、【上級者向け】を表示してください。
⑧ 【見出しレベル】という項目で、どの見出しタグから目次として表示するのかを選択します。基本的には『h2』からで良いと思いますが、お使いになっているテーマによっては『h3』以降という場合もあるようですので、有料テーマの場合は確認して選択してください。
※『h1』タグは記事タイトルで使っているので、目次に表示するのは『h2』以降です。
・それぞれの見出しタグが目次に割り振られるとこの様に表示されます↓
ひとまずこれで設定は完了です。
最後に【設定を更新】をクリックするのを忘れないでくださいね。
ここで解説した８項目以外は、基本的にデフォルトのままの方が使いやすいと思います。
有料テーマDiverの【Table of Contents Plus】設定
僕は【Diver】というテーマを使っているので、Diverの設定についても解説しておきます。
【TOC＋】の設定が出来たら、ダッシュボードから、①【Diverオプション】→②【投稿設定】と進みます。
③ にある、【TOC＋プラグインにDiverスタイルを適用する】にチェックを入れてください。これで目次の表示がDiverスタイルになります。
【基本カラー】と【文字色】については、下にDiverスタイルの目次を見本として載せておくので、どこに割り振られている色なのか参考にしてください。
【基本カラー】は、「もくじ」の部分と、周りの枠部分です。
【文字色】は、そのままですが目次に表示される見出し部分の文字の色ですね。
この辺りもお好みでアレンジしてください。
デフォルトの目次（Diverスタイル無し）↓
Diverスタイルの目次↓
また、見比べてもらえば分かりますが、Diverスタイルでは『h3』以降は番号が振られません。
「①②③」となっているのが『h2』で、「1.2.3.」となっている部分は、見出し自体に番号を振っている為です。
Diverスタイルを適用するかしないかだけでこれだけ違いがあります。個人的にはDiverスタイルの方がスッキリしていて見やすいですね！
まとめ
この記事では、ブログ記事に自動で目次を作成・設置してくれるWordPressのプラグイン【Table of Contents Plus】のインストール手順と設定方法について解説しましたがいかがでしたか？
これであなたのブログ記事にも【目次】が表示されるようになりましたね！
目次があると、読者さんが何が書いてある記事なのか、知りたい情報がどこに書いてあるのかがすぐに分かる様になり、読みやすくて便利なブログと認識してもらえるので、読者さんの離脱率は下がり、逆にリピート率は上がり、結果的にSEO効果が上がるようになります。
もし、まだブログに目次を設置していないのであれば非常に勿体無いですから、この記事を参考に【Table of Contents Plus】を導入してみてくださいね。
記事の見出しを【目次】として抜き出すので、見出しを付ける『順番』も意識してください。
また、見出しを見ただけで何が書いてある項目なのか、内容が分かる様に付ける事も重要です。（見出しで答えを言ってしまう位でOK）
【目次】を意識して見出しを付ける様にすれば、自然と誰が見ても読みやすい記事になりますよ！
それでは、今日もお疲れ様でした。
