改めて言うまでも無く、WordPressでブログ記事を書くなら目次は必須です。
目次を付ける理由は、その記事内に何が書いてあるのか冒頭でわかる様にする事。また、ページ内リンクなので見たい所へすぐに飛ぶ事も出来ます。
この記事ではプラグインを使って作成・カスタマイズする方法とプラグインなしで自作する方法をそれぞれ解説します。目次のメリットと合わせて参考にしてくださいね。
この記事はこんな方におすすめ。全部解決します！
- 目次って必要？具体的にどんなメリットがあるの？
- WordPressでおすすめ目次プラグインと設定はどうするの？
- 出来ればプラグインを使わず目次を自作したい！
この記事の目次
ブログやWebサイトで目次を表示するメリットは？
ブログ記事の全体像をひと目で把握してもらうのが目次を付ける理由です。
忙しい読者の傾向として、見たい所だけを見る、いわゆる斜め読みをします。
とくに長文記事の場合、見たい情報があるのか目次で確認出来ますし、その情報へリンクで移動出来るのはとても便利です。
目次の具体的なメリットをまとめると以下の4つになります。
- ブログ記事の全体像がひと目でわかる
- 読みたい箇所までリンクで移動できる
- 目次が検索結果に表示されることがある
- 実際に読者にクリックされている
具体的に見ていきます。
ブログ記事の全体像がひと目でわかる
繰り返しですが、基本的にユーザーは斜め読みをします。その様なユーザーは、「探している情報だけを早く知りたい」と考えています。
目次があれば、探している情報をすぐに見付ける事が出来ます。すぐに見付けられないとページの離脱に繋がります。
つまり急いでいるユーザーの離脱を防ぐのが目的ですが、これは「記事の導入部で結論を先に述べる」のと同じ理屈です。
Googleの検索エンジンも、メインコンテンツの上部にある内容やリンクを重視しています。目次の内容は記事の見出しと同じ内容が入りますから、こういった点でもメリットがあります。
読みたい箇所までリンクで移動できる
目次があれば、ユーザーは目次をクリック（タップ）すれば、読みたい箇所まですぐに内部リンクで移動できます。
実は、記事が長いと途中で離脱してしまうユーザーも多いです。
目次が設置してあると、長文記事でも目的の見出しまで一気にリンクで移動出来ます。つまりユーザービリティが高まります。
Googleの検索エンジンもリンクを辿る事が出来るので、SEO的にも効果的です。
目次が検索結果に表示されることがある
Googleで検索した際、検索結果ページに目次が表示されることがあります。検索エンジンも、「aタグとhref属性で内部リンクされている目次」はクロール出来ますから。
実際にユーザーにクリックされている
実際に、WordPressの目次はユーザーにしっかりとクリックされています。
ユーザーがどこをクリックしたのかを把握できる「ヒートマップツール」を見ると、目次をかなり利用している事がわかります。
上記の画像だと、すでに知っている基本的な内容は飛ばし、興味のある内容を直接見に行っているのがわかりますね。
WordPress（ワードプレス）で目次を作成する3つの方法
WordPressで記事を書くのであれば、目次作成は３つ方法があります。
- 目次作成プラグインを活用する
- プラグインなしで目次を作成する
- テーマ標準機能を使用する
どれも一長一短ありますが、順に解説していきます。
プラグインを使って目次を作成する方法
WordPressを使っているなら、プラグインを使って目次を挿入する方法が一般的です。
目次作成のおすすめプラグインは「Table of Contents Plus」です。
残念ながら大抵の目次プラグインはテーマの影響を受けてしまい、デザインが崩れてしまいます。
Table of Contents Plusなら、設定用のCSSも用意されています。もちろんCSSを使えるなら自分で調整してもOKです。
おすすめテーマのSTORK19
だと初めからデザインが調整されています。
プラグインのインストール方法
管理画面の左メニュー「プラグイン」画面へ行き、
- 画面一番上の「新規追加」ボタンをクリック。
- 画面右側に「プラグインの検索」の所に「Table of Contents Plus」と入力。
- 似ているものも出てきますが、少しだけなので迷わないはずです。
見つけたら、右上に「今すぐインストール」ボタンがありますのでクリック。その後表示が「有効化」に変わり、更にそれを押すと「有効」になります。
「有効」後、設定画面へ行くには以下をご覧ください。
管理画面の「設定」→「TOC+」という項目がありますので、ここから設定していきます。
※プラグインの一覧ページからも設定ページへ行けます。
Table of Contents Plus [TOC+] の設定を解説！
ブログ記事を書く際、とても重要度の高いHTMLタグであるHタグ（見出し）を入れているかと思います。
Table of Contents Plusの特徴は、記事ページに設定したHタグ（見出し）レベルから、自動的に目次を作成出来る事です。
以下、具体的に設定項目の解説をしていきますね。
Table of Contents Plusの設定項目
①【位置】
目次を表示する位置を設定します。
おすすめはデフォルトの「最初の見出しの前」です。
②【表示条件】
「記事内に見出しが何個以上あれば目次を表示するか？」という設定です。
見出しが少ない記事であれば目次を作る必要はないですから。2～10個の間で選べます。
③【以下のコンテンツタイプを自動挿入】
目次を表示させるページタイプを選択します。
デフォルトではpost（投稿記事）のみになっています。例えば、固定ページでも目次を付けたいならpage（固定）にチェックします。
④【見出しテキスト】
目次の上に表示するテキストを指定する設定です。
⑤【階層表示】
h2やh3など見出しレベルに合わせて、階層表示する場合にはチェックを入れます。字下げして表示させた方が分かり易いので、チェックしておきましょう。
⑥【番号振り】
目次の先頭に番号を表示させる場合にチェックを入れます。番号が付いていると分かり易いですね。
⑦【スムーズ・スクロール効果を有効化】
目次をクリックした際に、該当の見出しまでスルスルッとスクロールで移動します。
⑧【外観】
目次の横幅サイズや色味などを変更できます。
テーマでデザインを用意してくれているなら、ここは触らなくて良いです。
これらの設定が完了したら、記事に目次が表示されているはずです。
上級者向け設定
設定画面の下に上級者向けの設定があります。
①【CSSファイルを除外】
STORK19の様にデザインを用意してくれているテーマや、自分でCSSを編集出来るのであれば「CSSファイルを除外」にチェックを入れましょう。
デザインが用意されているテーマは？
プラグイン用に、はじめからデザイン・レイアウトが調整されているテーマがありますのでご紹介します。
- STORK19
- Diver
- Cocoon
プラグインなしで目次を自作する：ページ内リンク
プラグインを用いずに自作で目次を作るには、最低でも「HTML」「CSS」の知識が必要です。
残念ながらプラグインと同じ様な目次を手動で付けるには、手間がかかり現実的ではありません。
ですので、自作する場合は目次と言うより、「ページ内リンク」として使う方がおすすめです。
自作する場合、以下の手順で進めます。
- テキストエディタで、目次の部分を作る
- 各見出しに「id=”〇〇”」で名前をつける
- 各目次にリンクを挿入する
まずはテキストエディタで、目次（ページ内リンク）になる部分を作っていきます。
//目次 <a href="#見出しのid名">○○○</a>
<ul>
<li><a href="#facebook">Facebook</a></li>
<li><a href="#twitter">Twitter</a></li>
<li><a href="#instagram">Instagram</a></li>
</ul>
//記事の見出し id="固有の名前を付ける"
<h2 id="facebook">Facebook</h2>
<h2 id="twitter">Twitter</h2>
<h2 id="instagram">Instagram</h2>記事の見出しにidの名前をつけたら、今度は目次にリンクを挿入します。
リンクを挿入するには、「liタグ」の中の文字を「aタグ」で囲んで、「href」に先ほどつけたそれぞれのid名を「#」をつけて記載します。（# + id名）
あとはCSSでデザインを変更すれば、きれいな見出しになります。プラグインと同じように記事の好きな所に挿入出来ます。
テーマ標準機能を使用する
テーマによってはプラグインを使わなくても、最初から目次機能が備わっていることもあります。
たとえば有料テーマの中でも人気が高い【THE THOR（ザ・トール）】 
には、最初から「目次の表示機能」が搭載されています。
まとめ – WordPressの目次を作るなら、プラグインがおすすめ！
今回は、WordPressに目次を入れるメリットや、具体的な目次の作成方法について解説しました。
結論から言うと、手軽に設定するならプラグインがおすすめ。
自分で目次を作成する方法は、毎回記事を書く度に、別途目次を用意しなければいけません。
簡単にWordPressに目次を設定したいなら、おすすめしたプラグイン「Table Of Contents Plus」を使ってみて下さいね。
note
ただの見出しだと当然リンクではありませんが、目次を付ける事で結果的にリンクが張られた状態になります。