こんな方に読んで欲しい！
- WordPressで執筆した記事に、目次を付けたい！
- HTMLやCSSを使わずに自動で目次を付けたい！
- 過去の記事にも目次を付けたい！
目次は、その記事に書いてあることをざっくりと読者に伝えることができます。
目次に書かれている内容で、「読むか読まないかの判断」をする人もいるでしょう（筆者がそうです）。
ただ、記事を執筆するたびに目次を手動で作るのはとても手間がかかります。正直に書けば面倒なんです！
そこで今回は、目次を自動で作成し、過去の記事にも適用できて、あなたの記事執筆を効率化できるプラグインの１つとして、「Table of Contents Plus」の導入から使い方まで徹底解説します！
もくじ
1. 目次を自動で作成するプラグイン「Table of Contents Plus」ってなに？
簡単に言えば、<h2>や<h3>で設定する見出しを、記事の最初の方にまとめて表示してくれるプラグインです。
例えば、Googleアドセンスの申し込み方法に関する記事の目次は、こんな感じです。
実際の記事は、こんな感じですね。
各見出しは、そこに何がかかれているかを考えて付けている（はず）なので、そのまま目次になるわけです。
2. 「Table of Contents Plus」のメリット
「Table of Contents Plus」のメリットとして、以下の２つが挙げられます。
- 過去記事にも自動で目次を生成できる
- あなたのWebサイトのデザインに合わせて、見た目を選択できる
それぞれについて詳しくみていきましょう！
1-1. 過去記事にも自動で目次を生成
例えば、WordPressで記事を100記事執筆した後で、記事に目次を付けようとしたら・・・。
1記事ずつ手動で目次を作成していたら、何時間かかるかわかりません。
疲れてくると、抜けや間違いもあるでしょう。想像しただけで嫌になります。
「Table of Contents Plus」は、過去の記事に対しても目次を設定することができます。つまり、どのタイミングで「Table of Contents Plus」を導入しても手間となるようなことはありません。
あとで記事を見直して、記事の見出しを書き換えた場合、自動的に目次も変更されます。これは便利！
目次の作成を気にすることなく記事を執筆することができるようになります。
1-2. あなたのWebサイトのデザインに合わせて、見た目を選択できる
「Table of Contents Plus」は、設定を一括で変更することができます。デザイン設定も同様です。
「Table of Contents Plus」では5つの基本デザインが準備されていて、選択するだけで全記事のデザイン変更が可能です。
CSSの知識があれば、オリジナルのデザインも作れます。
1-2-1. Table of Contents Plusのデザイン グレー (デフォルト)
よく見る一般的なデザインです。インターネットビジネスラボのように背景が白のWebサイトとの親和性が高いですね。
1-2-1. Table of Contents Plusのデザイン 水色
淡い色を取り入れたWebサイトに合うデザインです。淡いピンクを基調カラーにしている場合など、この水色が合うでしょう。
1-2-2. Table of Contents Plusのデザイン 白
背景色が白以外の色であれば、目次の背景だけ白を選択することで、際立たせることができます。
1-2-3. Table of Contents Plusのデザイン 黒
濃い色を基調カラーにしたWebサイトに合うかもしれません（筆者は使ったことがありません）。
※文字色を白に変更しています。
1-2-4. Table of Contents Plusのデザイン 透明
背景が透けて見えるデザインです。このサンプルは背景が白地なので、白と変わらないですね。これも筆者は使ったことがありません。
2. プラグイン「Table of Contents Plus」の導入方法
「Table of Contents Plus」の導入操作を解説します。
この章に書いてある通りに作業を進めることでスムーズに導入できますよ！
まずはWordPressサイトの管理画面にログインしてください。
左側の管理メニューから
①「プラグイン」を選択します。右側には今インストールされているプラグインが一覧で表示されます。
②上側の「新規追加」ボタンをクリックしましょう。
右上の検索欄に「Table of Contents Plus」と入力してください。つづりを間違わないようコピペしましょう。
右上に表示された「錨（いかり）」のアイコンが描かれているプラグインです。
「今すぐインストール」をクリックし、終わったら水色の「有効化」ボタンをクリックして有効化します。
プラグイン「Table of Contents Plus」の導入はこれで完了です！
3. プラグイン「Table of Contents Plus」の設定
プラグインの設定をします。WordPressの管理画面、左側メニューから、設定 > TOC＋ をクリックしてください。「Table of Contents Plus」ではなく、略称の「TOC＋」となっていますので、ご注意ください。
3-1. 目次の位置設定
目次をどこ表示するかを設定できます。選択肢は下記の4か所です。
- 最初の見出しの前（デフォルト）
- 最初の見出しの後
- 上
- 下
ここは「最初の見出しの前（デフォルト）」でOKです。
3-2. 目次の表示条件
その記事に含まれている「見出しの数」で、目次を表示するかしないかを設定することができます。
デフォルトでは4つになっています。つまり4つ以上見出しがあれば目次を表示する設定です。変更する場合はプルダウンメニューから選択しましょう。
※筆者は、3つ以上に変更しています。
3-3. 目次を表示するコンテンツの種類
コンテンツタイプによって目次を表示するかしないかを選択できます。
投稿に対して目次を表示させたいので「post」にもチェックを入れて選択しています。デフォルトではチェックがついていませんので設定の時に入れるようにしましょう。
3-4. 見出しテキスト
目次に表示される「言葉」を設定できます。
最初は「もくじ」ではなく「contents」となっていますので、わかりやすく日本語にしておきましょう。
3-5. 階層表示
個人的には、チェックを入れて階層表示した方が見やすいと感じます。
特に、<h4>まで使う（3層まで使う）場合は、階層表示の方が良いでしょう。
階層表示にチェックを入れる
階層表示のチェックを外す
3-6. 番号振り
目次に番号を振る方法は2つあります。
- 見出し自体に番号を振る（番号振りのチェックを外す）
- Table of Contents Plus の機能を使う（番号振りにチェックを入れる）
インターネットビジネスラボは、「1-1-1. 」のように、階層をハイフン（-）でつなぎたかったので、見出し自体に番号を振っています。
これは、お好みで設定してください。
見出し自体に番号を振る
実際の見出しはこんな感じです。
Table of Contents Plus の機能を使う
実際の見出しはこんな感じです。
ここがポイント！
「見出し自体に番号を振る」場合は、記事中の見出しに直接番号を振るため、目次と見出しが一致します。
ただし、公開後などに内容を追加する際、見出しの番号を全て手作業で直す手間も発生します。
3-7. スムーズ・スクロール効果を有効化
目次はリンクになっていて、クリックすると該当する場所まで移動するのですが、その移動を
- パッと瞬間移動する
- スルスルとスクロールする
の2つから選択できます。
筆者はスクロールを使っています。そこまでにどのくらいの文字数で解説されているか伝えられますし、スクロール中に気になるキーワードが見えれば、少し戻って見てくれるためです。
3-8. 外観（デザイン設定）
- 横幅
100％がおすすめですが、テーマによってはテーマ自体のデザインの影響を受けてはみ出したりします。その場合は75％にしましょう。設定したら、必ず公開ページでチェックしてください。 - 回り込み
「目次の次にテキストがくる」の場合、目次を左に、テキストを右に表示させる機能です。ただ、目次を「最初の見出しの前（デフォルト）」に設定していれば、「目次の次に見出しがくる」ので、ここの設定は関係ありません。 - 文字サイズ
目次の文字サイズを設定します。そのまま95％で良いでしょう。 - プレゼンテーション
「1-2. あなたのWebサイトのデザインに合わせて、見た目を選択できる」で紹介したデザインは、ここで選択します。
全ての設定が完了したら「設定を更新」ボタンを押すのを忘れないようにしてください。これを押さないと設定が保存されません。
3-9. 上級者向け
いろいろ細かい設定ができますが、重要なのは「見出しレベル」の設定です。
<h2><h3><h4>などの見出しを、どこまで目次に含めるか設定できます。
<h2><h3>にチェックを入れた場合
<h2><h3><h4>にチェックを入れた場合
これは、普段あなたがどこまで見出しを使っているかによって変更しましょう。<h4>までよく使っているのであれば<h4>まで含めます。
ここに注意！
ただし<h4>まで含めると、目次が縦に長くなり、読者がスクロールする長さも長くなります。必要に応じて、目次を非表示にしておくなど調整しましょう。
4. 「Table of Contents Plus」の使い方
執筆の際に行うことは特にありません。
設定を終えれば、あとは自動で目次を表示してくれます。便利！
5. まとめ
目次は、手動で１記事ごとに設定することもできますが、かなり手間です。
あとから修正する際も、過去の記事に目次を追加する際も、効率を考えたら手動で行うメリットはありません。自動で目次を生成するWordPressプラグイン「Table of Contents Plus」に任せてしまいましょう！
目次を付けると、読者は記事の全体像をつかむことができ、自分の欲しい答えが書いてあるかを把握しやすくなります。結果、ユーザの満足度も向上します。
１度設定すればあとは自動！「Table of Contents Plus」は導入必須のプラグインの１つですね。
