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

どうすれば目次を作れるの?

こんな疑問を持っていないでしょうか?

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

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

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

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

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

というわけで本日は、

本日のテーマ
  1. 記事内に目次を生成する方法
  2. Table of Contents Plusの設定方法

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

\\おすすめブログテーマ//

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

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

その方法とは…

方法:Table of Contents Plus

Table of Contents Plusの画像
Table of Contents Plus

目次を自動で生成してくれるプラグイン

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

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

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

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

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

手順1

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

手順2

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

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

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

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

Table of Contents Plusを設定する

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

設定はめちゃ簡単なので、心配することなかれ

手順1:設定画面へ

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

TOC+=「Table Of Contents Plus」の略

手順2:基本設定

基本設定画面

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

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

位置

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

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

表示条件

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

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

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

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

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

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

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

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

(その方法は、後ほど解説します)

見出しテキスト

目次が表示されている時

目次が表示されていない時

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

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

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

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

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

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

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

階層表示

階層表示アリ
階層表示ナシ

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

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

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

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

番号振り

番号振りアリ
番号振りナシ

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

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

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

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

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

  • ジャンプの場合=一瞬で画面を移動
  • スムーズの場合=スクロールしながら画面を移動

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

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

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

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

横幅

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

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

回り込み

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

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

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

文字サイズ

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

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

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

プレゼンテーション

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

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

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

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

手順3:上級者向け

上級者向け設定画面

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

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

見出しレベル

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

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

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

目次を表示させない方法

この記事には目次を出したくない…

目次を生成していると、こんな悩みを持つこともあるのではないでしょうか?

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

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

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

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

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

結論:記事内にコードを挿入!

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

[no_toc]

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

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

挿入方法

ショートコードの挿入方法

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

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

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

補足

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

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

記事の編集画面

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

実際の画面

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

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

本日は、

本日のテーマ
  1. 記事内に目次を生成する方法
  2. Table of Contents Plusの設定方法

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

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

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

シェア嬉しい!

コメントを残す

メールアドレスが公開されることはありません。