WordPressブログで目次を作る方法【→Table of Contents Plus】

ブログにおいて、目次はかなり大切な存在です。

というのも、目次は、ユーザビリティ（記事の読みやすさ）を向上させるからです。

たとえば、目次がない記事を想像してみてください。どうですか？読みにくいと感じてしまいますよね？

このように、目次を導入するかしないかで、ユーザーに与えるストレスが大きく変わってきます。

なので、まだ目次を導入していないのであれば、この記事を見ながら一緒に導入していきましょう。

というわけで本日は、

というテーマでブログを執筆していこうと思います。

オータニが使うおすすめテーマ

WordPressブログで目次を作る方法

実は、WordPressの場合、一瞬で目次を作ることができます。

その方法とは…

方法：Table of Contents Plus

WordPress運用者のほとんどは、Table of Contents Plusを使って目次を作っています。

なので、かなり信頼できるプラグインと言えるでしょう。

もしも、その他の便利なプラグインについて知りたい方は、『【2021年版】WordPressのおすすめプラグイン１１選』を参考にしてください。

Table of Contents Plusをインストールする

では、Table of Contents Plusをインストールしましょう。

手順１

まずは、WordPressの管理画面から「プラグイン」→「新規追加」を選択します。

手順２

次に、検索窓に「Table of Contents Plus」と検索します。

すると、上記画像のプラグインが出現しますので、「今すぐインストール」→「有効化」を選択。

これでインストールは全て終了となります。

インストールが終わったら、次は、設定外面へと進みましょう。

Table of Contents Plusを設定する

では、ここからはTable of Contents Plusを設定していきましょう。

手順１：設定画面へ

まずは、WordPressの管理画面から「設定」→「TOC＋」を選択します。

※TOC＋＝「Table Of Contents Plus」の略

手順２：基本設定

基本的には、上記の箇所にチェック項目を入れておけば、大きな問題はありません。

ただ、これだけだと味気ないので、それぞれの項目の説明もしておきますね。

位置

これは、目次を生成する位置を設定する項目のことです。

基本的には、「最初の見出しの前（デフォルト）」を設定しておきましょう。

表示条件

これは、見出しがいくつある時に、目次を生成するか？を設定する項目です。

基本的に、オータニは、どれだけ目次が少なかろうと目次は生成したい派なので、「２つ」で設定しています。

以下のコンテンツタイプを自動挿入

これは、どんなコンテンツに目次を生成するか？を設定する項目です。

基本的に、「Post（通常記事）」と「Page（固定ページ）」にチェックが入っていれば大丈夫です。

ちなみに、オータニは、「Page（固定ページ）」には、チェックを入れていません。

なぜなら、固定ページでは、ランディングページ（販売ページ）を作成しているのですが、基本ランディングページに目次は不必要だからです。

ただ、ページごとに目次を生成しない設定方法などもありますので、チェックを入れておくのもアリです。

（その方法は、後ほど解説します）

見出しテキスト

これは、ユーザーに見出しを出す方法を設定する項目です。

基本、「目次の上にタイトルを表示」にはチェックを入れ、名前は分かりやすく「目次」としておきましょう。

次に、「ユーザーによる目次の表示・非表示を切り替えを許可」にもチェックを入れておきましょう。

理由は、目次をうざいと感じるユーザーもいるからです。

そして、「テキストを表示」のところを「表示」、「テキストを非表示」のところを「非表示」と設定しておきましょう。

最後に、「最初は目次を非表示」のところは、チェックしないように。

というのも、最初に目次が表示されていないと、ユーザーがサイト全体の内容を理解できないからです。

階層表示

これは、目次を階段のように表示するかを設定できる項目です。

ここには、チェックを入れることをおすすめします。

なぜなら、チェックを入れると、H2、H3タグなどが見やすい状態で目次が生成されるからです。

これら２つは同じ記事の目次ですが、どっちが見やすいかは一目瞭然ですよね？

番号振り

これは、目次に番号をふるかどうかを設置できる項目です。

正直、これについては好みの問題もありますが、オータニはチェックを入れています。

というのも、オータニはSTORK（ストーク）19というWordPressテーマを使っているのですが、その場合、すごくおしゃれな感じで番号を振ってくれるからです。

STORK（ストーク）19以外のテーマだとちょっと味気ない感じになるので、STORK（ストーク）19以外はチェックを外した方がいいでしょう。

スムーズ・スクロール効果を有効化

これは、目次をクリックした際の、移動方法を設定できる項目です。

基本、チェックを入れなくてOKです。

というのも、チェックを入れると、ページが重くなってしまうから。

もしも、どうしても動的表現を入れたい！ということであれば、チェックを入れてもOKですが。

横幅

これは、目次の横幅を選択することができる項目です。

これに関しては、デフォルトでOKです。

回り込み

これは、ページをスクロールした時に、目次を回り込ませるかどうかを設定する項目です。

基本、チェックを入れなくてOKです。

というのも、回り込ませた目次は、文字くずれしていることが多く、逆にユーザーのストレスになる可能性が高いからです。

文字サイズ

これは、目次の文字サイズを変更する項目です。

基本、これもデフォルトでOKです。

もしも、「もうちょっと文字を大きくしたい！小さくしたい！」などの願望があれば、いじるようにしましょう。

プレゼンテーション

これは、目次のデザインを選択できる項目です。

ぶっちゃけどれでもいいですが、オータニはサイトのメインカラーを考慮して「水色」を選択しています。

なので、あなたのサイトデザインに合わせて使い分けるようにしましょう。

ただ、「カスタム」のところにチェックを入れると、下記のように目次を細かく設定することができますので、どれも気に入らない場合は、デザインしてみるのもアリです。

手順３：上級者向け

この画面は、「上級者向け」の（表示）をクリックしたら、出現します。

上級者向けのところは、全てを設定する必要はありませんので、大切な箇所だけ解説しますね。

見出しレベル

これは、どのレベルの見出しを出現させるかを設定できる項目です。

基本、H２、H３タグを出現させることが多いですね。もちろん、H２タグだけでもOKです。

結局のところ、見やすければいいので、目次が多すぎて見にくくなることが多ければ、H２タグだけにチェックを入れるようにしましょう。

目次を表示させない方法

たとえば、オータニの場合、ランディングページ（販売ページ）などがまさにそうですね。

>>ランディングページの例はこちら

この場合、目次を生成してしまうと、金額などのユーザーが知りたいところだけしか閲覧されなくなるので、CVR（成約率）が低下してしまいます。

なので、目次は使い分けるようにしましょう。

しかし、どうやって目次を非表示にすればいいのでしょうか？

結論：記事内にコードを挿入！

記事中のどこでも大丈夫なので、下記のコードを挿入しましょう。

[no_toc]

ちなみに、オータニは、記事の最後に挿入するようにしています。

なぜなら、後からどこに挿入したのか分からなくなってしまうからです。

挿入方法

旧エディタの場合は、ただ記事内に上記コードを挿入すればOKです。

しかし、新エディタ（Gutenberg）の場合は、「ショートコード」というブロックを挿入してから、コードを挿入しましょう。

そうしないと、目次が表示されたままとなってしまいます。

補足

コードは、実際にページ上に表示されません。

どういうことかというと、たとえば、下記は、コミュニケーションプラグラム『CHANGE』の編集画面です。

記事下に、コードを入れているのですが、実際に表示して見ると、ページ内にコードは表示されません。

まとめ：WordPressブログで目次を作る方法

では、最後にまとめましょう。

本日は、

というテーマでブログを執筆しました。

目次はユーザビリティを高める上で欠かせないものです。

なので、Table of Contents Plusは必ず導入しておくようにしましょう。