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』の編集画面です。

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

ブログでお金を稼ぎたい

正直、GoogleやYouTubeなどを使って、ブログの知識を得て、挑戦するにもアリだとは思います。

ただ、当たり前の話ですが、そのような独学による学習では、それなりの時間がかかるということは否定できません。

だから、しっかりコーチの指導を受けて、サイト運営をすることが必要となります。

あなたもブロプロになろう！

ブロプロとは、ブログでお金が稼げるプロになるというコンセプトの個別プログラムです。

心理学をベースにしたマンツーマンサポートなので、成果にコミットしやすいプログラムとなっています。

もしも、「ブログでお金を稼げるようになりたい！」という方は、下記の記事を参考にしてください。

ブロプロ

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

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

本日は、

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

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

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