こうへいのアフィリエイトエッセンス｜ネットで稼ぐための本質を身につけるブログ

サイトの記事ページの構造をわかりやすくまとめるために欠かせない存在の「目次」。

目次は検索ユーザーにとって役立つだけでなく、SEO面でも効果があるとされています。

そんな目次ですが、wordpressであれば難しいことをしなくても、「table of contents plus」プラグインを使えば簡単に作ることができます。

この記事では、「table of contents plus」の使い方や設定方法についてお伝えしていきます。

table of contents plusの特徴

table of contents plusは、インストールするだけで自動で目次を作ってくれるwordpressプラグインです。

目次は「見出し2」「見出し3」などの見出しを元に作成されるため、記事内で見出しを正しく設定している方は本当に目次を作るために何も考えることがありません。

このブログもtable of contents plusにより、記事内に設定した見出しが自動的に目次として表示されています。

目次は設定によって簡単なカスタマイズができるので、自分好みの目次にすることもできます。

それでは、次からtable of contents plusの使い方や設定方法を見ていきましょう。

table of contents plusのインストール方法

まずはtable of contents plusをwordpressにインストールしましょう。

wordpress管理画面の左側の「プラグイン」をクリックし、「新規追加」をクリックします。

続いて、検索窓に「table of contents plus」と入力します。

すると、一覧に以下のアイコンが目印の「table of contents plus」が表示されるので、

「今すぐインストール」をクリックします。

インストールが完了したら、そのまま「有効化」をクリックしてtable of contents plusを使える状態にしましょう。

これでtable of contents plusのインストールは完了です。

インストールしたすぐの状態でも記事内の見出しを元に目次が自動で作られますが、よりサイトや自分好みに合うように、設定でカスタマイズをしていきましょう。

次からは、table of contents plusの設定方法について順番に解説していきます。

table of contents plusの設定方法

table of contents plusの設定をするには、wordpressの管理画面の設定項目の中にある「TOC＋」をクリックします。

すると、以下のような設定が表示されます。

table of contents plusの設定は主に、

• 基本設定
• 上級者向け設定

の2つがあるので、それぞれに分けて解説していきます。

基本設定

位置

記事内のどの位置に目次を入れるかを決める設定です。

• 最初の見出しの前
• 最初の見出しの後
• 上
• 下

の4つから選択することができます。

お好みで選択してもいいのですが、おすすめはデフォルト設定の「最初の見出しの前」です。

一般的なサイトの記事構成は、

前書き → 記事本文

という流れが基本だと思うので、記事本文の手前である「最初の見出しの前」に目次を入れてあげると見やすくて自然になります。

実際に、ほとんどのサイトが「最初の見出しの前」に目次を入れています。

特別な理由がなければ、目次は「最初の見出しの前」に入れておくといいでしょう。

表示条件

table of contents plusは、記事内の見出しの項目を自動で目次にしてくれます。

この設定では、「記事内に見出しが○つ以上あれば目次を作成する」という条件設定ができます。

見出しが少ない記事に目次を入れてもあまり利便性はよくないので、記事内に3～4以上の見出しがあるときに目次を作るように設定するのがいいでしょう。

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

目次を表示させる記事の種類を設定します。

項目がいくつかありますが、基本的に「post」「page」だけ知っていれば十分です。

• post…投稿で作成する記事になります。普段よく作成する一般的な記事に該当します。
• page…固定ページで作成するページになります。プロフィールページやお問い合わせページが主に該当します。

デフォルトでは、「page」のみチェックされていることがありますが、この状態ではたくさん作成するメインの記事に目次が表示されないことになります。

なので、「post」にチェックが入っていなければ必ずチェックを入れておきましょう。

固定ページである「page」に目次を入れるかどうかはお好みでいいでしょう。

筆者が運営するサイトの固定ページには目次はいらないと思っているので、「page」にはチェックを入れていません。

見出しテキスト

見出しテキストの項目では、目次タイトルを変更したり、目次の初期表示状態などを設定することができます。

まず、目次のタイトルですが、目次のタイトルとは以下の部分になります。

デフォルトではタイトルが表示されるようになっていますが、もしタイトルが不要であれば「目次の上にタイトルを表示」のチェックを外します。

目次タイトルを表示させるのであれば、目次のタイトルテキストを変更することができます。

デフォルトでは「Contents」となっていますが、日本人が読む場合は読みにくいので変更するのが理想です。

テキストは、例としてもありますが、「目次」「コンテンツ」などがシンプルでおすすめです。

少しひねって「この記事でお伝えしたいこと」などもいいかもしれませんね。

 

続いて、目次の表示設定について解説していきます。

デフォルトでチェックされている「ユーザーによる目次の表示・非表示を切り替えを許可」の状態だと、

目次テキストの右側にあるテキストのクリックによって、目次一覧を閉じたり、目次一覧を表示させたりすることができます。

この目次の表示・非表示機能が不要であればチェックを外します。

タイトルテキストと同じく、目次の表示・目次の非表示を案内するテキストも変更することができます。

デフォルトでは、それぞれ「show」「hide」となっていますが、やはり英語表記は好ましくないので変更しておきましょう。

テキストは、「表示」「非表示」や「開く」「閉じる」などがおすすめです。

 

※「最初は目次を非表示」にチェックを入れておくと、最初に記事を見たときは目次を閉じた状態にしておくことができます。

階層表示

階層表示にチェックを入れておくと、見出しによって目次項目の配置が変わるため、記事全体の構成がわかりやすい目次になります。

階層表示は「階層表示あり」と「階層表示なし」を画像で見比べた方がわかりやすいので、画像を見てみましょう。

・「階層表示あり」

・「階層表示なし」

このように、階層表示によって記事の構成が見やすくなることがわかります。

なので、基本的に階層表示はチェックしておくのがおすすめです。

番号振り

番号振りにチェックを入れておくと、目次のテキストの左側に数字が自動的に振り当てられます。

「数字があると目次がわかりやすい」「数字があると目次が見にくい」など、数字については意見がかなり分かれます。

なので、数字についてはお好みで決めてしまうのがいいでしょう。

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

デフォルトの設定では、目次のテキストをクリックしたら、その目次の項目のところが一瞬で表示されるようになっています。（一般的な同記事内へのリンクと同じ）

ですが、「アンカーリンクにジャンプではなくスクロールする」にチェックを入れると、目次のテキストをクリックしたとき、高速で画面移動しながら目次項目のところまで行くようになります。

これもお好みで決めても問題ありません。

横幅

目次項目の横幅を決める設定になります。

デフォルトでは「自動」が選択されており、目次テキストの長さに応じて適切な横幅に設定してくれるようになっています。

デフォルトのままでも問題ありませんが、目次の横幅が端から端まで表示される「100％」の設定もおすすめです。

回り込み

回り込みの設定では、目次を左や右に回り込ませて表示させることができます。

ただ、普通に回り込み表示をさせても目次が見にくくなるだけなので、基本的にデフォルトの「なし」にしておくのが無難です。

文字サイズ

目次テキストのサイズを変更できる設定です。

もし「目次の文字はもう少し大きい方が見やすいかな」など思ったときは、この設定で文字サイズを変えてみるといいでしょう。

プレゼンテーション

目次項目の色などに関する設定です。

デフォルトで5パターン（グレー・水色・白・黒・透明）が用意されていることに加え、

自由にカスタマイズできるカスタムも用意されています。

ユーザーにとっての見やすさを優先し、最終的には好みで決めるといいでしょう。

上級者向け設定

ここからは、table of contents plusの上級者向け設定について解説していきます。

上級者向け設定ということで、基本的にデフォルトのままでいい項目がほとんどですが、「見出しレベル」はチェックしておきましょう。

※上級者向け設定は、下側にある上級者向けの「表示」をクリックすると表示されます。

小文字

目次のテキストを小文字に統一したいときの設定です。

特にこだわりがなければチェックを入れる必要はありません。

ハイフン

目次テキストにアンダースコアが入る場合、アンダースコアをハイフンに変換してくれる設定です。

特にこだわりがなければチェックを入れる必要はありません。

ホームページを含める

この項目にチェックを入れると、

サイトのトップページに表示させている固定ページなどにも目次を入れることができます。

一般的なサイトであれば必要のない設定になります。

CSSファイルを除外

基本設定の「プレゼンテーション」を無視し、追記したCSSによって独自のオリジナルの目次にする場合はチェックを入れます。

目次のデザインに関するcssを追記していない方には不要の項目になります。

テーマの見出し記号を保持

リスト要素にcssによる背景設定をしているならチェックを入れておく項目です。

これもcssによる独自の設定をしていないなら不要の項目です。

見出しレベル

見出しレベルとは、目次に表示される見出しの範囲を決める設定なので、上級者向け設定ですが必ずチェックしておきましょう。

初期設定ではh1～h6まで全てチェックされており、記事内の見出し1～6まで全ての見出しが目次に表示されるようになっています。

このままの設定だと、目次が細かく表示されるメリットもありますが、目次が長すぎることによって利便性を損なうデメリットもあります。

サイトのよってどの見出しの範囲まで目次として表示させた方がいいかは変わってくると思いますが、一般的に目次は「見出し2」～「見出し3」までを表示させるのが見やすいとされています。

このサイトも「h2」と「h3」だけにチェックを入れ、「見出し2」と「見出し3」だけ目次に表示させるようにしています。

除外する見出し

もし、特定の単語などのテキストが含まれる見出しを目次として表示させてたくないのであれば、ここで設定することができます。

特にこだわりがなければ何も設定する必要はありません。

スムーズ・スクロール上部余白

基本設定の「スムーズ・スクロール効果を有効化」にチェックを入れいた場合に設定できる項目になります。

ページをスクロールさせてページが表示されるとき、上側にどれだけ余白を入れるかを指定することができます。

記事ページに固定して設置しているヘッダー画像などがある場合、スクロールしたときにヘッダーと被ったりすることがあるので、被って見にくくなるのを防ぎたいときは適切な数値を入れて調節しましょう。

パス限定

サイト内にある特定の指定したページにだけ目次を表示させたいときに設定する項目です。

アンカーデフォルトの接頭辞

このプラグインによって目次が作成される際、目次テキストのリンクに英数字が割り当てられます。

この設定では、その割り当てられる英数字を変更することができます。

独自のページ内リンクを作成でもしていない限り、デフォルトの設定で問題ありません。

table of contents plusの補足

基本的なtable of contents plusの使い方は以上になりますが、

table of contents plusを使用するうえで知っておきたい補足についてもお伝えしておきます。

目次を表示させない方法

table of contents plusをインストールして設定が完了すると、目次が自動で作成されますが、

目次を表示させたくない記事が出てくることも考えられます。

そんなときは、table of contents plusの機能にあるショートコードを使います。

目次を表示させたくない記事があれば、その記事の本文の中のどこかに［no_toc］と記述します。

※実際に記述する場合は、全角の［］を半角の[]にしてください。(ここで正式な半角[]で記述すると、当記事の目次が表示されなくなるので全角表記にしています。)

記述するのはビジュアルエディタとテキストエディタのどちらでもOKです。

目次を表示させる方法

先ほどとは逆に、目次を表示させたい記事が出てくることも考えられます。

(固定ページは目次は作らないようにしてるけど、ある特定の固定ページには目次を表示させたい、など)

そんなときは、目次を作りたい記事の本文の中の、目次を入れたい場所に［toc］と記述します。

※実際に記述する場合は、全角の［］を半角の[]にしてください。

目次を表示させない［no_toc］と違い、［toc］は目次を入れたい任意の場所に記述する必要があることに注意しましょう。

まとめ

今回は、目次を記事内に自動で作れるtable of contents plusの使い方や設定についてお伝えしてきました。

インストールし、「基本設定全般」と「上級者向け設定の見出しレベル」を設定してあげるだけで、利便性の高い目次を簡単に表示させることができます。

記事内に目次を入れたい方はぜひ今回の内容を参考にしてみてくださいね。