WordPressを使ったサイトでは記事の内容や全体構成を一目で把握するために、目次が設定されていることが多いと思います。
しかし、目次を手作業で作成すると「本文のみ更新し、目次の最新化を忘れる」や「リンクを貼り忘れる」等、手作業であるがゆえのミスも発生してしまいます。
WordPressのプラグイン「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のインストール／有効化
Table of Contenst Plusのインストール／有効化の方法についてご紹介します。
まず、WordPressの管理画面で「プラグイン」→「新規追加」を選択します。
次に、画面右上の検索フォームから Table of Contenst Plus で検索を行い、インストールを実施します。
インストール済みプラグインから「有効化」をクリックすれば、インストール完了です。
Table of Contents Plusの設定方法
次に、Table of Conetents Plusの設定方法をご紹介します。
「インストール済みプラグイン」→「Table of Conetents Plus」の「設定」を選択してください。
基本設定
基本設定では、「目次の表示位置や名称、番号付与」などの設定ができます。実際に表示される目次の内容を確認するのが良いと思います。
以下は私の設定内容です。
位置
見出しを表示する位置を以下4つから選択します。目次はパっと見て、全体概要を把握することが目的ですので、おすすめはデフォルトの「最初の見出しの前」です。
- 最初の見出しの前（デフォルト）
- 最初の見出しの後
- 上（記事タイトルの下）
- 下（記事の一番下）
表示条件
hタグの見出しが何個ある場合に目次を表示するかを設定します。
2〜10まで選択できますが、目次はなるべく表示した方が良いので最も小さい値の「2」がおすすめです。
以下のコンテンツタイプを自動挿入
以下の記事の種類において、目次の表示／非表示を設定します。
| 選択肢 | 説明 |
| post | 通常の投稿記事 |
| page | 固定ページ |
| custom_css | カスタムcss |
| customize_changeset | カスタマイズチェンジセット |
| wpcf7_contact_form | 問い合わせフォーム |
プロフィールなどの固定ページや問い合わせフォームには目次は不要ですので、post(投稿記事)にのみチェックが良いです。
見出しテキスト
目次自体のタイトルを設定します。
| 選択肢 | 説明 |
| 目次の上にタイトルを表示 | 目次のタイトルです。そのまま「目次」とするのが一般的です。 |
| ユーザーによる目次の表示・非表示を切り替えを許可 | チェックを入れると目次の開閉ができるようになります。ユーザビリティ的にも許可しておくのが良いです。 |
| テキストを表示 | 目次を開くリンクの文言を設定します。 |
| テキストを非表示 | 目次を閉じるリンクの文言を設定します。 |
| 最初は目次を非表示 | チェックを入れると最初は目次が非表示となります。初めから目次が開いていると邪魔なので、チェックを入れるのが良いです。 |
目次のタイトルは「目次」とするのが一般的ですが、たまに「言いたいことをまとめると」などのタイトルにしているブログも見かけます。
ご自身のブログの雰囲気／テーマに沿った設定が大事だと思います。
階層表示
目次の階層を表示するかを設定します。目次は階層を表示させた方が見やすくなるので、チェックを入れておいた方が良いです。
番号振り
目次の階層に沿った番号を自動で振るかを設定します。ここもチェックを入れて、自動で番号が付与されるようにするのがおすすめです。
ただし、見出しに番号を含めてしまうと、目次で番号が並んでしまうことになります。そのため、ここにチェックを入れた場合は見出しに番号を含めないように注意してください。
スムーズ・スクロール効果を有効化
Table of Contents Plusで作られた目次をクリックすると、クリックした箇所に移動できます。そのクリック後の移動方法が、「ジャンプ形式」か「スクロール形式」かを選べます。
どちらにするかは好みですが「スクロール形式」であれば、目次からどの程度移動して見出しに到着したかがわかりやすいため、私は「スクロール形式」（チェックをつける）がおすすめです。
横幅
目次の横幅を設定します。ここではデフォルトで設定されている「自動」のままが良いです。
回りこみ
目次の設置位置を設定します。以下3つから選択できますが、デフォルトの「なし」のままが良いです。
- なし（デフォルト）
- 右
- 左
文字サイズ
目次の文字の大きさを設定します。デフォルトの95%が良いです。
プレゼンテーション
目次のデザインを選択します。好みですが、デフォルトのままが良いです。
上級者向け設定
上級者向け設定で変更が必要な項目は、見出しレベルの変更だけです。
おすすめの設定は「h2とh3」の表示設定です。h4まで表示すると目次が大きくなりすぎるため、あまりおすすめできません。
以上で設定は完了です。デフォルトから少し変えたいという方は以下のカスタマイズ方法についてもご覧ください。
目次表示のカスタマイズ方法
目次の表示位置を中央揃えにする
Table of Contents Plusの基本設定だけでは、以下のように目次が左詰めになると思います。
私は目次の左詰めにかなり違和感があり、真ん中に持って行きたかったのですが、「Table of Contest Plus」では、目次の表示位置を中央揃えにする項目がありませんでした。
そのため、目次を中央揃えにしたい方はスタイルシート（style.css）を修正する必要があります。以降、style.cssの修正方法についてご紹介します。
まず、「外観」→「テーマの編集」からスタイルシート（style.css）に移動してください。そして、以下のcssの記載を「style.css」にコピーしてください。
/* 見出しを中央に揃える設定 */
#toc_container {
margin-left: auto;
margin-right: auto;
}
すると、以下のように目次が記事の真ん中に表示されます。（すぐ反映されない方は、ブラウザのキャッシュクリアをお試しください）
記事ごとに目次の表示場所変更、非表示設定
Table of Contents Plusでは、記事ごとに目次の「表示場所変更」や「非表示」を設定することができます。
目次の表示場所変更
特定の記事のみ目次の表示場所を変更したい場合、記事内で目次を表示したい箇所に以下を記述するだけです。
［toc］
なお、誤って上記のショートコードを1つの記事に2個以上してしまった場合でも、有効となるのは最初の記述のみです。目次が2個以上表示されることはありません。
目次の非表示
特定の記事のみ目次を非表示にしたい場合、記事内のどこかに以下を記述します。
［no_toc］
文字数が少ない記事では目次が邪魔になるため、この記述をしておくのが良いと思います。
目次のデザイン変更
私の目次はデフォルトから変更しており、
- h2の見出しには、青いアンダーライン
- h3の見出しには、細い点線のアンダーライン
となるように変更しております。
そのまま使いたいという方は以下のcssをコピーしてください。なお、私のテーマは、simplicityを利用しています。
/*--------------------------------------
TOC+
--------------------------------------*/
#toc_container {
display: block !important;
width: 85% !important;
background: #ffffff ;
border: 1px solid #ccc;
font-size: 95%;
box-sizing: border-box;
line-height: 1.4;
margin: 36px auto;
padding: 1em 2em;
}
#toc_container .toc_title {
text-align: center;
}
#toc_container .toc_list {
width: 95% ;
padding-left: 0;
}
#toc_container ul {
list-style: none;
margin-bottom: 0;
}
#toc_container ul li {
margin: 1px;
padding-left: 0;
text-indent: 0;
}
#toc_container ul a {
display: block;
text-decoration: none;
color: #444; /* リンク色 */
border-bottom: 1px dotted #ccc; /* リンク下線(1pxの間隔と色指定)*/
}
#toc_container .toc_list > li {
margin-bottom: 30px;
}
#toc_container .toc_list > li > ul > li {
margin-bottom: 8px;
}
#toc_container .toc_list > li > a {
margin-bottom: 8px;
border-bottom: 2px solid #00f; /* 大見出しの下線 */
font-size: 110%; /* 大見出しのフォントサイズ */
}
#toc_container ul ul {
padding: 0;
}
#toc_container li {
margin-bottom: 1em;
padding-bottom: 0.2em;
}
このカスタマイズについてはnaifix様のサイトを参考にさせていただいております。詳細は本家のサイトの方がわかりやすいと思いますので、そちらをご覧ください。
まとめ
WordPressのプラグイン「Table of Contents Plus」を使うことで簡単に目次の自動生成が出来るようになりました。
ただし、見出しタグが正しい構成になっていないと、目次の構成も変な構成になってしまいます。
見出しタグを正しい構成にしておくことは「ユーザビリティの向上」や「SEO対策」として重要です。そのため、見出しの正しい構成を理解した上で、記事を投稿することが大事ですね。
私はバズ部さんのサイトで見出しについて勉強しましたので参考にしてみてください。
コメント