
こんにちは。 ろしおです。
詳しいプロフィールはこちら
ブログ記事の読みやすさは色々な要素から成り立っていますが、
その中でも目次をつけるのは非常に効果的です。
今回は、目次を自動で作ってくれるプラグイン、
「Table of Contents Plus(テーブル・オブ・コンテンツ・プラス)」
の使い方を解説していきます。
Table of Contents Plus とは
Table of Contents Plusとは見出し(H1~H6)を元に、
目次を自動で生成してくれる便利なプラグインです。
そのため、見出しを全く使っていない記事では
目次を作ることができないため、その点だけご注意ください。
プラグインのインストール方法については以下の記事を参考にしてください。
Table of Contents Plusで検索してください。

上記をインストールしてください。
Table of Contents Plus 設定
そのままでも使えますが、設定を変更してより見やすい目次にしましょう。

「設定」→「TOC+」をクリック。
目次の表示設定(基本部分)

「基本設定」から必要最低限のものを設定していきます。
- 表示条件
デフォルトでは4つ以上になっているため、
必要に応じて設定を変更しておきましょう。 - 以下のコンテンツタイプを自動挿入
色々書いてありますが
「post=投稿ページ」「page=固定ページ」と、覚えておけば十分です。
「post」にチェックを入れましょう。 - 見出しテキスト
目次のタイトルを変更できます。 - スムーズ・スクロール効果を有効化
目次をクリックした時にスクロールで移動するようになります。
自分が今ページのどこに飛んだのか分かり易いので、
こだわりが無ければチェックしておきましょう。

後はプレゼンテーションから好きなデザインを選び、
「設定を更新」をクリックすればOKです。
上級者向け設定
上記の基本設定だけでも十分ですが、
もう少し詳しく設定したい場合は、
上級者向けの「(表示)」をクリックしてください。

こちらも色々と設定できますが、取り合えず2項目覚えれば大丈夫です。
- 見出しレベル
目次の対象となる見出しレベルを設定できます。
僕はH1~H3までを対象としています。 - スムーズ・スクロール上部余白
上部に固定メニューバーがある時は数値を変えておきましょう。
30のままだと見出しが被ってしまい表示されなくなります。
見出しも含めた表示の方が、読みやすいため設定しておくと良いです。
ちなみに僕は100pxに設定してあります。
最後に「設定の更新」をクリックします。
以上でプラグインの設定が完了しました。
実際に表示されている確認をしよう
Table of Contents Plusで作成された目次は投稿編集画面では見られません。
プレビューで確認してみましょう。

左側が投稿編集画面で、右側がプレビュー画面です。
このように表示されていれば問題なしです。
目次のあるなしではぱっと見の印象もかなり違います。
このように簡単に設定できるので是非、導入してみてください(^^)
コメント