ワードプレス(WordPress)のプラグインRich Table of Contentsのインストールと設定方法や使い方を詳しく解説します。
- Rich Table of Contentsの使い方と詳細な設定方法がわかります
- 全設定項目とおすすめの設定がわかります
- Table of Contents Plusと目次の比較をしているので両者の見た目の違いがわかります
Rich Table of Contentsで実現できること
Rich Table of Contents(略してRTOC)はWordpressの無料プラグインです。
日本の会社が開発しており、設定画面も日本語なので使うのは簡単です。
このプラグインをインストールして有効化すると記事に目次を自動で作成してくれます。
Rich Table of Contentsで自動生成した目次は下記のように表示されます↓
Rich Table of Contentsで自動生成した目次(PC)↑初期設定(デフォルト)の状態からタイトル文字を”目次”に、位置を中央に変更後に生成した目次です。右上のアイコンをクリックすると目次を閉じることができます。
上の写真はWordPressの有料テーマ「JIN」を利用した時に表示されるRich Table of Contentsの目次になります。
他のWordPressテーマを利用している場合は表示が異なる可能性があります。
当記事内の写真はすべて有料テーマ「JIN」を利用して表示させた目次です。
Rich Table of Contentsの良い点と残念な点
他の目次作成プラグインと比較した場合のRich Table of Contentsの良い点と残念た点を挙げてみます。
Rich Table of Contentsの残念な点
Rich Table of Contentsは少々不満な箇所があります。
- 目次の見出しはH4までしか表示できない。H5～は表示不可
- 目次タイトルの位置を中央寄せの設定にした場合、スマホでは開閉ボタンがタイトルの下に表示されるため高さが生じる
Rich Table of Contentsの良い点
他の目次作成プラグインに比べてRich Table of Contentsは設定が簡単で使い勝手が良いです。
- 日本人が開発しているので安全安心
- 設定画面が全て日本語表記なのでカスタマイズが簡単
- 目次設定画面内の「Live Preview」で見出しの設定変更が直ぐに確認できる
- スマホに【目次に戻る】ボタンを表示させることができる
Rich Table of Contentsのインストール方法
Rich Table of ContentsプラグインをWordpressにインストールする手順を解説します。
WordPressのダッシュボード(管理者画面)のプラグインの新規追加を選択します↑WordPressのダッシュボード(管理者画面)のプラグインの新規追加をクリックします。
プラグインを追加画面の検索ボックスに「Rich Table of Contents」と入力して検索結果を表示させます- 検索ボックスに”Rich Table of Contents”と入力すると下に検索結果が表示されます
- ”Rich Table of Contents”の今すぐインストール”ボタンをクリックします
“インストール中”と表示されます
Rich Table of Contentsのインストールが完了すると”有効化”と表示されるのでクリックします↑Rich Table of Contentsのインストールが完了すると有効化ボタンが表示されるのでクリックします。
Rich Table of Contentsは有効化されましたこれでRich Table of Contentsのインストールと有効化が完了しました。
次は設定をしていきます。
Table of Contents Plus等の他の目次自動生成プラグインから”Rich Table of Contents”に乗り換える場合は、使わないほうの目次生成プラグインを無効化するだけで大丈夫です。
Rich Table of Contentsの使い方と設定方法
Rich Table of Contentsはインストールして有効化した直後に投稿と固定ページに自動的に目次が挿入されます。
初期設定(デフォルト)の状態で既に記事の中に自動で目次が生成されています。
なのでとりあえず使えれば良い場合は設定変更は必須ではありません。
Rich Table of Contentsの設定を変更する方法を解説します。
WordPressのダッシュボード(管理者画面)で”RTOC設定”を選択します↑WordPressのダッシュボード(管理者画面)の”RTOC設定”をクリックします。
目次設定の項目数は5つ
目次設定の大項目には下記のつの中項目があります。
- 基本設定 (目次の基本設定を行います)
- デザイン設定 (各種のデザインを設定します)
- プリセットカラー設定 (予め用意されているデザインカラーを変更します)
- カラー設定 (タイトル文字や背景、枠線の色を変更できます)
- 応用設定 (目次へ戻るボタンやCSS除外などの高度なカスタマイズが可能です)
それぞれを詳しく解説していきます。
Live Preview
目次設定の右側に「Live Preview」が表示されるので、目次のデザインを変更する際、直ぐに確認することができて便利です。
Rich Table of Contents 目次設定のLive Preview↑応用設定の項目の開閉ボタンも動作します。
このLive Previewで確認できるのはPCでの目次表示だけです。スマホでの目次表示は確認できません。
【目次に戻る】ボタンはスマホにしか表示されません。※PCには表示されません。
基本設定
Rich Table of Contents 目次設定の基本設定| 項目名 | 説明 | 初期設定 |
|---|---|---|
| 目次のタイトル | 目次内の最上部に表示されるタイトルを変更 | Contents |
| 目次を表示させるページ | 目次を表示させたくないページの種類を選択 | ☑投稿、☑固定ページ |
| 表示させる見出し設定 | 目次に表示したい見出しの階層を選択 | H3まで表示 |
| 表示条件 | 目次を表示する条件を見出しの個数で指定 | 4(個) |
| フォント設定 | 目次内の文字の種類を変更 | デフォルト |
- 目次のタイトル：目次
- 目次を表示させ見出し設定：H4まで表示
- 表示条件：2
- フォント設定：Noto Sans
※初期設定から変更する箇所だけを記載しています。
次に各項目の詳細を説明します。
目次のタイトル
目次内の最上部に表示されるタイトルを変更することができます。
初期設定では「Contents」になっています。
日本語のほうが利用者側が理解しやすいので「目次」に変更するのをおすすめします。
目次を表示させるページ
自動で目次を表示(挿入)したいページの種類を選択することができます。
投稿への目次は必須なのでそのままで大丈夫です。
プロフィールやサイトマップ等の固定ページはどちらでもいいですが、おすすめは表示するです。
なのでどちらも初期設定のままでOKです。
表示させる見出し設定
H2～H4の見出しのどこの階層までを目次に表示するのかを変更することができます。
H5まであると良いのですがありません。。
細かい階層まで目次に含めたほうが利用者に対して親切なので「H4まで表示」に変更することをおすすめします。
表示条件
目次を表示する条件を見出しの個数によって指定可能です。
記事内に見出しの数が何個あったら目次を表示(挿入)するのかを1個～10個の間で指定することができます。
初期設定では4個になっているので見出しの数が3個しかない記事に目次は表示されません。
見出しの数が少ない記事でも目次があったほうが便利なので「2」に変更することをおすすめします。
フォント設定
目次内で利用されるフォント(文字)の種類を下記の3種類から選択できます。
- デフォルト
- Helvetica
- Noto Sans
デフォルトでも問題ありませんが、「Noto Sans」にしたほうが文字がクッキリハッキリして視認性が良くなるのでおすすめです。
デザイン設定
Rich Table of Contents 目次設定のデザイン設定- 表示アニメーション：OFF
※初期設定から変更する箇所だけを記載しています。
タイトルの表示設定
目次の一番上に表示されているタイトルの位置を「左寄せ」か「中央寄せ」に変更することができます。
この設定は完全に好みで大丈夫ですが、PCとスマホでは表示位置が下記のように異なります。
設定が「中央寄せ」の場合、スマホだと【開閉ボタン】の表示がタイトルの下に位置してしまうので目次の面積が広くなってしまいます。もしそれが気に入らない場合は「左寄せ」にすることをおすすめします。※PCの表示では起きません。
H2のリスト形式
目次内のH2の見出しのデザイン(形式)を4種類から選択できます。
この設定は視認性に関わる部分ですが、完全に好みのデザイン(形式)で大丈夫です。
初期設定では2桁の番号になっています。1桁の番号に変更することもできますが、
先頭に0があった方が通し番号っぽいので初期設定のままのほうがおすすめです。
H3のリスト形式
目次内のH3の見出しのデザイン(形式)を4種類から選択できます。
前項のH2と同じで好みの形式で大丈夫です。
見出しは階層構造なのでH2とH3に番号が付いていると数字が目立つので初期設定の「丸」のままのほうが見た目がスッキリするのでおすすめです。
枠のデザイン
目次の枠の線のデザインを5種類から選択することができます。
目次の視認性に影響する部分なので協調されてクッキリしている初期設定のままがおすすめです。
表示アニメーション
目次を表示するときのアニメーションを下記の3種類から選択することができます。
- フェード
- スライド
- なし
フェードとスライドはどちらも記事を開いた際に目次が時間差で表示されます。
具体的には「スライド」は下から上にスライドして表示されます。
「フェード」は徐々に浮かび上がる様に表示されます。
どちらも表示遅延と紛らわしいので表示アニメーション設定は「なし」にすることを強くおすすめします。
表示アニメーションとは記事を開いたときに目次を出現させる演出方法のことです。
スムーススクロール
スムーススクロールを「ON」にすると、目次内の見出しのリンクをクリックした後の動きを移動(スクロール)表示にすることができるので、クリックした先の項目にジャンプしている感じを演出することができます。
いっぽうこの設定をオフにするといきなりクリックした見出しの項目が表示されます。
利用者の混乱を避けるため「ON」にすることをおすすめします。
プリセットカラー設定
Rich Table of Contents 目次設定のプリセットカラー設定Rich Table of Contentsで最初から用意されている下記7種類のカラー設定の中から変更できます。
- JIN Color
- サニーブルー
- ダーク
- フェミニン
- アクアマリン
- スマート
- シトラス
各色を選択後に、後項目のカラー設定でさらに細かくカスタマイズすることができます。
プリセットカラーとは予め用意されたカラー設定の雛形(テンプレート)のことです
カラー設定
Rich Table of Contents 目次設定のカラー設定| 項目名 | 説明 |
|---|---|
| タイトルカラー | 目次内の最上部に表示されるタイトル文字の色 |
| テキストカラー | 目次内の文字の色 |
| 背景カラー | 目次内の背景色 |
| 枠線カラー | 目次枠線の色 |
| H2カラー | H2見出しの先頭の番号または丸の色 |
| H3カラー | H3見出しの先頭の番号または丸の色 |
| 目次へ戻るボタンのカラー | スマホの時だけ表示される「目次へ戻るボタン」の色 |
カラー設定では前項の「プリセットカラー設定」で選択した色をカスタマイズできます。
細かく好みの色にしたい場合に設定を変更することをおすすめします。
「プリセットカラー設定」で”JIN Color”を選択している場合は下記のテキストが表示されて設定の変更はできません。
「プリセットカラー設定」で”JIN Color”を選択している場合はカラー設定は利用できない応用設定
Rich Table of Contents 目次設定の応用設定| 項目名 | 説明 | 初期設定 |
|---|---|---|
| 目次に戻るボタン | 目次に戻るボタンの表示の有無 | ON |
| 目次に戻るボタンの位置 | 目次に戻るボタンの位置を左右から選択 | 左寄せ |
| 目次へ戻るボタンのテキスト | ボタンの表示文字を変更 | 目次へ |
| 上下調整 | 目次を表示するボタンの位置を数値で調整 | 空欄 |
| 除外する投稿ID | 目次を表示させたくない投稿記事のIDを指定 | 空欄 |
| 除外する固定ページID | 目次を表示させたくない固定ページのIDを指定 | 空欄 |
| 目次のデフォルト表示設定 | 最初から目次を開くか閉じるか | 最初から表示させる |
| 開閉ボタンの開くテキスト | 目次内の文字の種類を変更 | OPEN |
| 開閉ボタンの閉じるテキスト | 目次内の文字の種類を変更 | CLOSE |
| プラグインのCSSを読み込まない | プラグイン側のCSSを適応するか否か | □(オフ) |
| 7日間目次使用率を計測する | 目次の使用率を計測するか否か | OFF |
次に各項目の詳細を説明します。
- 上下調整：5 ※環境によるのでスマホで確認が必要
- 開閉ボタンの開くテキスト：表示
- 開閉ボタンの閉じるテキスト：非表示
※初期設定から変更する箇所だけを記載しています。
目次に戻るボタン
PCでは表示できませんが、スマホには【目次に戻る】ボタンを表示させることが可能です。
スマホに表示させる【目次に戻る】ボタンの表示の有無を選択できます。
スマホは画面が小さく手動で目次に戻るのは大変なので、初期設定のままの「ON」でボタンを表示させるのをおすすめします。
Rich Table of Contentsの目次に戻るボタン(スマホ)目次に戻るボタンの位置
スマホに表示できる【目次に戻る】ボタンの位置を「左寄せ」か「右寄せ」に変更することができます。
初期設定の「左寄せ」がおすすです。
【目次に戻る】ボタンはスマホにしか表示されません。※PCには表示されません。
目次に戻るボタンのテキスト
目次に戻るボタンの文字を変更することができます。
初期設定の「目次へ」のままで大丈夫です。
ちなみにボタンの文字を初期設定の「目次へ」から「目次へ戻る」に変更すると文字がボタンから若干はみ出ます
上下調整
スマホに表示できる【目次に戻る】ボタンの位置を調整できます。
利用環境によって異なりますが「5」や「30」などの値がおすすです。
設定変更後はスマホでボタン位置の確認が必要になります。
除外する投稿ID
目次を表示したくない投稿(記事)があればその記事のIDをボックスに入力します。
除外する固定ページID
目次を表示したくない固定ページがあればその固定ページのIDをボックスに入力します。
目次のデフォルト表示設定
記事内の目次を最初から開いた状態にするのか、最初は閉じた状態にしておくのかを選択することができます。
これは完全に好みで大丈夫ですが、最初から表示させるのが一般的で、実際に最初から目次を表示しているブログサイトのほうが数は多いです。
なので初期設定の「最初から表示させる」のほうをおすすめします。
開閉ボタンの開くテキスト
目次の一番上のタイトルの横に表示される目次の開閉ボタンの”開いている”時のボタンに表示される文字を変更することができます。
初期設定は「OPEN」になっているので、デザイン性を重視しないブログサイトでは日本語の「開く」や「表示」に変更することをおすすめします。
開閉ボタンの閉じるテキスト
目次の一番上のタイトルの横に表示される目次の開閉ボタンの”閉じている”時のボタンに表示される文字を変更することができます。
初期設定は「CLOSE」になっているので、デザイン性を重視しないブログサイトでは日本語の「閉じる」や「非表示」に変更することをおすすめします。
プラグインのCSSを読み込まない
プラグイン側のCSSを読み込まないようにすることができます。
ここは初期設定の□(オフ)のままで大丈夫です。
7日間目次使用率を計測する
この設定をONにすると7日間目次の使用率を計測できます。
計測結果は投稿記事の編集画面の最終行辺りに「RTOC 目次使用率」として表示されます。
Rich Table of Contents(RTOC)の目次使用率の測定結果↑過去1週間分の日毎の目次使用率が％で表示されます。
リセットボタンを押すと計測結果を初期化できます。
目次の測定結果は最初から目次を”開いた状態”と”閉じた状態”とでは目次使用率の％に大きな差が出ます。目次に気づかない利用者がいるからです。
ショートコード
ほとんど使う機会はありませんが、ショートコードを利用すると記事内の任意の位置に目次を表示させることができます。
Rich Table of Contents(RTOC)の目次のショートコード画面ショートコードはビジュアルエディタだとテキストモード、ブロックエディタだとHTMLで入力しないといけません。
ショートコードを記事に入力すると、入力した位置にしか目次は表示されません。
つまり自動の目次は挿入されません。ショートコードの目次または自動挿入の目次のどちらか1つだけしか目次は表示されないからです。
ヘルプ
Rich Table of Contents(RTOC)の設定にはヘルプ画面がありQAが日本語で表示されています。
Rich Table of Contents(RTOC)のヘルプ画面の日本語QAスマホだと目次タイトルの下に開閉ボタンが表示される
デザイン設定内のタイトル表示設定で「中央寄せ」にするとPCではタイトルの右側にきちんと開閉ボタンが表示されるので問題ないのですが、スマホだとタイトルの下に開閉ボタンが表示されるので目次が閉じた状態だと枠線の面積が大きくなるので見た目が悪くなります。
※タイトル表示設定で「中央寄せ」にしていると、スマホでは必ず目次の開閉のどちらの状態でも開閉ボタンの位置は目次タイトルの下になります。
開閉ボタンの設定が「中央寄せ」の状態でのPCとスマホの状態比較
開閉ボタンの設定が「中央寄せ」になっているPCとスマホの目次が閉じた状態の画面を比較してみます。
タイトル表示設定が「左寄せ」の時のスマホの目次
Rich Table of Contentsのタイトル表示設定が「左寄せ」の時の目次画面(スマホ)タイトル表示設定が「中央寄せ」の時のスマホの目次
Rich Table of Contentsのタイトル表示設定が「中央寄せ」の時の目次画面(スマホ)↑左寄せの時と比較すると開閉ボタンがタイトルの下に表示されるので目次を閉じた状態だと目次の面積が広くなり、見た目のバランスが悪いです。
Table of Contents PlusとRTOCどちらがおすすめ？
Rich Table of Contents(RTOC)はH4までの見出ししか目次に表示することはできず、H5の見出しは表示できないので緻密な情報を扱いたい記事には不向きです。
他の目次作成プラグインで人気のある「Table of Contents Plus」はH6の見出しも目次に表示できます。しかもデザインや見た目はとても似ています。
両者の主な違いはH6見出しの表示の有無とフォント設定の有無の2点です。
H6の見出しを表示したい場合は「Table of Contents Plus」のほうがおすすめです。
Noto Sansフォントを使いたい場合は「Rich Table of Contents」をおすすめします。
とはいえ扱いやすく設定項目も分かり易く、見やすいフォントに設定できる「Rich Table of Contents」のほうが僅差でおすすめです。
Rich Table of Contents(RTOC)のほうが初心者向けです
「Rich Table of Contents」と「Table of Contents Plus」の目次を比較
実際に「Rich Table of Contents」と「Table of Contents Plus」の目次をPCで比較してみます。
どちらも表示する見出しの階層は最大に設定しています。
「Rich Table of Contents」のフォントはNoto Sansに設定しています。
「Rich Table of Contents」の目次
Rich Table of Contentsの目次(PC)「Table of Contents Plus」の目次
Table of Contents Plusの目次(PC)「Table of Contents Plus」はH5のに見出しも目次に表示されていますが、「Rich Table of Contents」の目次の見出しはH4までしか表示されないので全体的に短くなっています。
「Table of Contents Plus」はH2見出しの番号を2桁に設定できません。
両者を比較すると行間、全体のバランス、フォントが若干違うことがわかります。
まとめ
Rich Table of Contents(RTOC)は国産のプラグインなので設定項目が判り易く使い勝手が良いのが特長です。
プラグイン自体のアップデート(更新)頻度も高く、安全性も高いので他の目次プラグインよりも安心して利用できます。
ただし、前述したように導入候補の「Table of Contents Plus」と比較すると僅かな部分に一長一短があり、デザインも微妙に異なります。
「Rich Table of Contents」の一番残念な点はH5の見出しが表示できないことです。
とはいえ目次プラグインの選定に迷ったらRich Table of Contents(RTOC)で間違いありません。もっとも無難な選択になります。
