今まで、Webサイトを閲覧しているとページの冒頭部分に目次を見たことがあるかと思います。

このようにWordPressで記事に目次を設置するにはEasy Table of Contentsというプラグインを使用します。

記事に目次を設置することで、このページはどのような記事を書いているのかが明確になり、目次の見出しをクリックすると見出しについての内容が書かれた場所までジャンプしてくれますのでとても見やすいサイトになります。

例えば、どこか遊びに行くと必ず、案内センターがあり、そこでガイドブックや地図などを受け取ることができます。
それと同じで、目次は記事の案内センターの役割を果たしています。

また、ヒートマップというツールを使って当ブログの目次を可視化したというような実験を行ったらしいのですが、目次の部分が赤くなっているという結果から、訪問者が目次をもとにたくさんクリックをしていることが判明したそうです。

その為、見やすい記事にしたい、ユーザーにとって見やすくて使いやすいサイトしたいと思った場合は、必ず、記事に目次を設置しましょう。

目次を設置するプラグインは他にもありますが、今回はWordPressのEasy Table of Contentsで目次を設置する方法について下記の内容で解説していきます。

⚫︎ Easy Table of Contentsで目次を設置する方法
⚫︎ 目次のデザインを変更する方法

Easy Table of Contentsとは

Easy Table of Contentsとは、ページ内の「見出し(h1〜h6タグ)」から見出しを生成するプラグインとなります。

その為、ページ内に見出しを全く使用してない場合は、目次は表示されませんので注意してください。

Easy Table of Contentsで目次を設置する方法

Easy Table of Contentsで目次を設置する方法はとても簡単で2ステップで完了します。
目次のデザインに対しては特に気にしていないと思っている方は是非、使用しましょう。

Easy Table of Contentsをインストール

まずは、メニューバーの[プラグイン]から[新規追加]を選択します。
すると、プラグインの一覧が表示されます。

プラグインの一覧が表示された後は、検索テキストで「Easy Table of Contents(tocでも良い)」と入力して検索すると、「Easy Table of Contents」が表示されます。

「Easy Table of Contents」が表示された後は、[インストール]を押してインストールを行います。

インストールが完了した後は[有効化]を押して有効にします。

これで「Easy Table of Contents」のプラグインのインストールは完了です。

設置したいページにコードを追記

Easy Table of Contentsをインストールした後は、設置したいページに下記のコードを追記します。

基本的にはsingleページに設置することが多いかと思います。
そのため、投稿内容に下記のようなコードを追記します。

こちらを投稿の内容の表示したい場所に追記するだけで目次を設置することができます。

実際に確認して見ましょう。

実行結果

投稿記事に目次が表示されました。
もし、目次が表示されない場合は、見出しの数が少ない可能性がありますので、見出しを増やして実際に表示されるのか確認しましょう。

目次のデザインを変更する方法

目次のデザインを変更するには下記のような方法があります。
⚫︎ CSSファイルを手動で変更する
⚫︎ プラグインの設定から自動で変更する

CSSファイルを手動で変更するとデザインを大きく変更することができますが、初心者の方にとっては難関だと思います。
また、プラグインの設定から自動で変更するととても簡単に目次のデザインを変更することができますが、デザインを大幅に変更することはできません。

今回はEasy Table of Contentsについての解説の為、プラグインの設定から自動で変更する方法について紹介していきます。

まずは、メニューバーの[設定]から[TOC+]をクリックします。

すると、目次の設定メニュー画面が表示されますので、メニューの設定が可能になります。

基本的には赤枠内の項目を設定することが多いかと思います。

⚫︎ 表示条件:
目次が表示されるための条件を設定することができます。
先ほど、目次が表示されない原因として、見出しの数が少ない可能性があるといいましたが、ここで見出しの数を設定することで目次が表示されない原因は解決できます。
⚫︎ 見出しテキスト:
目次のテキストを設定することができます。
目次の名前や、表示、非表示ボタンの名前などを変更することができます。

⚫︎ 横幅:
目次の横幅を設定することができます。
⚫︎ 文字サイズ:
目次の文字の大きさを設定することができます。
ptやrmでも設定できますが固定値になってしまいますので注意してください。
⚫︎ プレゼンテーション:
目次のデザインを設定することができます。

サイズとかは把握しにくいと思いますので、一度試しに数値を変更してみてどうなるのか確認しましょう。

設定した内容がきちんと反映されているかどうか、設定を変更して目次を表示して見ます。

実行結果

設定された内容が反映されていますが目次の枠が大きすぎるので調整が必要です。

今回のポイント

Easy Table of Contentsで目次を設置

⚫︎ WordPressで目次を設置するにはEasy Table of Contentsというプラグインを使用する

⚫︎ 目次を設置することでこのページはどのような記事を書いているのかが明確になり、目次の見出しをクリックすると見出しについての内容が書かれた場所までジャンプしてくれる

⚫︎ Easy Table of Contentsで目次を設置するには、プラグインのインストール後、設置したい場所にと追記する

⚫︎ Easy Table of Contentsで設置した目次のデザインを変更するには、[設定]の[TOC+]をクリックして変更する

Writer

ST

株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。