これまで多くの方からいいね!を頂いております。

ウェブサイトの記事を読むとき、目次がついているととても読みやすいですよね。ただし、目次を手動で作ると記事を書き換えたときに更新するのを忘れたり、該当の見出しへのリンクを貼り忘れたりして、目次としても役割を果たさなくなる可能性があります。

そこでおすすめなのが、ワードプレスの記事の目次を自動的に生成してくれるプラグイン「Table of Contents Plus」。プログラミングの知識のないワードプレス初心者にも使いやすいプラグインなので、難しく考える必要はありません。手動で目次を作る時間を減らし、その時間は新しいコンテンツ作りに当てていきたいものです。

そこで今回はワードプレスのプラグイン「Table of Contents Plus」でできることとその設定手順についてお伝えします。

Table of Contents Plusでなにができる?

need-help

ワードプレスの公式プラグイン「Table of Contents Plus」は、作成した記事の見出しの情報を基に自動的に目次を作成してくれるプログラムです。

ウェブサイトを見ていると、導入文のあと、本文が始まる前に目次が表示されていることがありますよね。例えばこんな画面です。

table-of-contents

【引用元:メディファンドposts|意外と簡単!AMP化をwordpressで設定する手順

目次にあるテキストはすべてそれぞれの見出しへのリンクになっています。リンクになっているおかげで、記事をすべて読んで必要な情報を探さなくても、目次を確認して読みたい部分だけ読むこともできます。

もちろん、手動でテキストを打ち込んで作成することも可能です。しかし、手動で作成した目次は、本文中の見出しを編集してもその内容は反映されません。また、目的の見出しの場所までジャンプするアンカーリンクを手動で貼るためにはHTMLも知識が必要となります。

「Table of Contents Plus」を利用すれば、手動で目次を作成する手間が省けるだけでなく、ユーザーにとって利便性の高い目次を提供することができます。プログラミングが苦手で、できれば簡単に操作できるプラグインで解決したいという人にはおすすめのプログラムです。

アンカーリンク付きの目次があるメリットって何?

book

ページに記載してある内容をすべて読んでほしいから、読みたい見出しにジャンプなんてしてほしくない、というサイト運営者もいるでしょう。では、目次があるメリットにはどんなものがあるのでしょうか。

目次からページに書いてある内容を推測できる

短い記事しかないサイトであれば、本文をすべて読んでもそれほど労力もかからないので、目次は不要かもしれません。
しかし、長文の記事がたくさんあるサイトの場合はどうでしょう。ページのどこに何が記載してあるか分からない長文を目にしたら、読む気が失せてしまうことありませんか?

見出しから構成される目次は、ページに記載されていることの概要を伝える役割を果たします。目次を読むことでユーザーは自分が求めている情報が記載されているかどうかを確認することができます。ユーザーにページの概要を伝えるためにも、長文の記事を含むサイトの場合には、目次は必須と考えましょう。

読みたい見出しにジャンプできる

目次にあるそれぞれの見出しにアンカーリンクが貼られていることで、読みたい見出しまでジャンプすることができます。ページの一部だけ読んで離脱されるのは困ると考える人もいるでしょう。

しかし、その一部を読むことで、さらに深く知りたいという興味が湧いた場合には、ページの全文を読み進めるでしょう。もっと先まで見越すなら、ページが有益と判断されれば、ウェブサイトのリピーターを増やすことにもつながっていきます。

いきなり全文を読んでもらうことを求めず、まずは読みたい場所から読んでもらうことで、少しずつファンを増やしていきましょう。

Table of Contents Plusの設定方法

programing

アンカーリンク付きの目次を自動生成してくれる「Table of Contents Plus」。プラグインの設定に不安があるワードプレス初心者でも簡単にインストールすることができます。興味がある人はインストールして、ページに目次を付けてみましょう。

手順1.Table of Contents Plusをインストール

ワードプレスの管理画面のメニューから【プラグイン】を選択します。新規追加の画面で「Table of Contents Plus」と検索し、該当するプラグインが見つかったら、【いますぐインストール】をクリックします。

インストールが完了すると【有効化】というボタンが現れます。【有効化】をクリックすることで、このプラグインが有効化されます。

管理画面以外でも以下のURLからダウンロードすることも可能です。
【参照元:Table of Contents Plus|WordPressプラグインTable-of-Contents-Plus

手順2.基本設定をする

ワードプレスの管理画面のメニューから【設定】から【TOC+】を選択します。

表示される画面は「基本設定」「サイトマップ」「ヘルプ」の3つのタブで構成されています。デフォルトで表示されている「基本設定」タブの画面で、設定を進めていきます。

位置

自動生成された目次を表示する位置を指定します。特にこだわりがない場合にはデフォルトの「最初の見出しの前」のまま運用を始めましょう。

表示条件

「〇つ以上見出しがあるとき」という形で、目次を表示する条件を指定します。見出しが少なく、目次を掲載するまでもないページには目次を表示しないようにすることができます。2~10から選択できますが、見出しが1つの場合を除いては目次があって損することはないので、2つ以上という設定で問題ありません。

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

記事の種類によって目次を自動的に挿入したいものにチェックを入れます。目次を挿入できるコンテンツの種類は以下の5つが提示されていますが、基本的には問い合わせページ等には目次は不要なケースがほとんどなので、どれを選択していいか分からない人は「post」のみで運用を始めてみましょう。

  • post(投稿した記事)
  • page(固定ページ)
  • custom_css(カスタムcss)
  • customize_changeset(カスタマイズチェンジセット)
  • wpcf7_contact_form(問い合わせフォーム)

見出しテキスト

自動生成される目次の上に表示するタイトルのテキストを設定します。シンプルに「目次」でもかまいませんし、「記事の概要」「言いたいことをまとめると」などのように目次が記事の全体像を表していることを伝えるのもいいでしょう。運営しているサイトに合った文言を選ぶことが大切です。

階層表示

見出しの階層を表示するかどうかを指定します。階層表示をしない場合には、「h1」タグの情報のみで目次を生成します。記事のなかで「h2」「h3」「h4」タグも設定している場合には、階層表示にチェックを入れ、すべての階層の見出しを表示した方がより記事の全体像が伝わりやすくなります。

番号振り

目次に番号を振るかどうかを指定します。チェックを入れると、階層ごとに自動的に振られた番号が目次に表示されます。見出しの頭に番号が振られていると、数字が二重に表示されてしまいます。番号振りにチェックを入れた場合には、hタグの先頭に番号を付けないように注意してください。

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

自動的に生成された目次のテキストは、アンカーリンクになっているので、該当する見出しの本文までジャンプして記事を読むことができます。デフォルトの動作は「ジャンプ」になっていますが、ジャンプではなくスクロールで移動させたい場合には、「アンカーリンクにジャンプではなくスクロールする」にチェックをいれます。こちらは好みに合わせて設定してください。

横幅

目次表示の横幅を指定することができますが、特にこだわりがない場合にはデフォルトの「自動」のままで問題ありません。

回り込み

目次の設置する位置を「なし」「右」「左」の3つから選ぶことができますが、こちらもデフォルトの「なし」のままで問題ありません。気になる場合は「右」や「左」に設定して見た目を確認してみてもいいでしょう。

文字サイズ

目次の文字のサイズを指定することができます。デフォルトでは「95%」に設定されています。変更する必要はありませんが、もっと大きくあるいはもっとコンパクトにしたいといった希望がある場合には、数パターン試してみましょう。

プレゼンテーション

目次のデザインを選択します。運営するウェブサイトのトーンに合ったものを選ぶといいです。

上級者向け

さらに詳細な設定することが可能です。メニューの名前のとおりワードプレスやプログラミングの知識に長けている上級者はこちらの内容も確認し、必要なものがあれば設定しましょう。まだワードプレスな不慣れな初心者の人は、まずは基本設定で運用を始めてみましょう。

目次を自動生成するうえで注意すること

自動的に目次が表示されるので、細かいことを気にしなくていいと思いがちですが、「Table of Contents Plus」を使って正しく目次を表示させるためには注意しなければいけないことがあります。

記事の見出しにはHTMLタグ(h1、h2、h3、…)を使う

自動生成の基となるのはHTMLタグで設定された見出しです。見た目だけ見出しに見えるようにデザインしても、見出しとは認識されないので注意しましょう。

HTMLタグの階層を正しく設定する

たかが目次、されど目次です。記事の冒頭にある生地の全体像を表す目次の階層がキレイに整理されていないと、記事の信用性にも関わってきます。記事のタイトルがh1タグ、大見出しはh2タグ、中見出しはh3タグ、などと、それぞれの見出しのスタイルを決め、階層をうまく使って記事を作成しましょう。

階層は2~3階層で収めた方が読みやすいですが、それ以上の階層を使用した場合には、どの階層まで目次に表示するかを決めて設定しましょう。どの階層の目次を表示するかは、「上級者向け」メニューの「見出しレベル」で設定することができます。

さて今回はワードプレスの記事に目次を作成することができるプラグイン「Table of Contents Plus」についてお伝えしましたが、いかがでしたでしょうか。

ウェブサイトの訪問者の離脱を防ぎ、ファンを増やしていくためには、よりユーザーに親切で有益なページを作成することが重要です。記事の冒頭に目次がついていることで、ユーザーにページに記載されている内容をより簡潔に伝えるだけでなく、求めている情報が記載されている箇所を示すこともできます。

長文な記事を快適に読んでもらうためにも、便利なプラグインを使って見やすい目次を表示したいものです。

記事の目次を自動生成するワードプレス公式プラグイン「Table of Contents Plus」

  • 見出し用のHTMLタグのデータを基に目次を自動生成するプラグイン
  • 目次を表示する位置やサイズ、階層レベルなど詳細な設定が可能
  • 目次があるページは記事の全体像が伝わりやすく、求めている情報が探しやすい
  • 自動生成される目次を意識してHTMLタグの階層を正しく設定することが重要

ワードプレスで記事を作成して、プレビューで自動生成された目次を確認すると、こちらが伝えたいと意図しているものとは違う目次ができ上がっているということがあります。

目次を見るだけでページの概要が伝えられるような見出しで構成していくことは、記事の精度を上げることにもつながります。プラグインによる自動生成で目次を作る労力を省きながらも、より魅力的な記事を作り上げていきましょう。