このような悩みを解決します!
- ブログ記事内の目次のメリット知りたい
- 読みやすいブログを作りたい
- カンタンにおしゃれな目次を作りたい

おそら副業図鑑100ブログ
派遣看護師転職100ブログ
Twitterフォロワー1500人以上
5桁ブロガー(最高月収50000円/月以上)
今回は、WordPressプラグイン『RTOC』で目次を作るメリットと簡単でおしゃれな目次の作り方を解説していきます。
- 超簡単に目次が作れる
- おしゃれな目次
- スマホユーザーへの目次に戻るボタンが便利
- 日本語で分かりやすいプラグイン
『RTOCを使用した目次の例』

このような、WordPressプラグイン『RTOC』なら誰でもカンタンにおしゃれな目次を作ることができます。
この記事を読むと、ブログに目次を作るメリット、『RTOC』を使用するメリット、『RTOC』での目次の作り方が分かるため、ぜひ参考にしてください。
目次を作るメリット

- 記事の内容がすぐに分かる
- SEO対策になる
記事の内容がすぐに分かる
目次の機能として1番重要なのは、ブログ記事の内容がすぐに分かることです。

読み手は役に立つ情報を求めてアクセスしているため、欲しい情報がすぐに分からないと離脱する可能性が高いです。
記事内のすべての情報を必要としておらず、一部分だけ欲しい場合が多いです。
そのため、読み手に役立つ情報がすぐに分かり、クリック一つで必要な情報までジャンプできる目次が便利となってきます。
SEO対策になる

目次のメリットである記事の冒頭で要点がすぐに分かることから、読み手の役に立つ情報提供ができます。
結果、ユーザーに有益な情報を提供しているページとして、Googleから評価を受け検索上位に表示(SEO)されやすくなります。
そのため、目次を作ることが読み手にとって良いコンテンツとなり、SEO対策になる効果があります。
WordPressプラグイン『RTOC』で目次を作るメリット

- 超簡単に目次が作れる
- おしゃれな目次
- スマホユーザーへの目次に戻るボタンが便利
- 日本語で分かりやすいプラグイン
超簡単に目次が作れる

- RTOCのプラグインをインストール
- インストール後に目次の基本設定やデザインを選ぶ
この2ステップのみで誰でも簡単に目次が作れます。
おしゃれな目次

RTOCで作った目次はこの通りおしゃれな目次のため、読み手を惹きつける効果があります。
また7種類というデザイン性の豊富さからブログユーザーで使用している方が多いです。
プリセットカラー(自分好みのデザインにできる)設定があるため、初期デザイン(7種類)で納得できない方でも自由自在にカスタマイズできます。
スマホユーザーへの目次に戻るボタンが便利

RTOCの特徴であるスマホで見た時に好きな場所に目次に戻るボタンを設置できます。
読み手により読みたい情報がそれぞれ違います。そんな時に、目次に戻るボタンをクリックすると、すぐに目次に戻れるため非常に便利な機能です。
日本語で分かりやすいプラグイン
日本人が作成したWordPressプラグインのため日本語で分かりやすいため、すぐに設定することができます。
プラグインの中には、英語表記のため分かりにくいプラグインがたくさんあるため、RTOCを使って目次を作ることが最適ですね。
『RTOC』おしゃれで簡単な目次の作り方

- RTOCのインストール
- 基本設定
- デザイン設定
- プリセットカラー設定
- カラー設定
- 応用設定
順番に解説していきます。
RTOCのインストール

WordPress管理画面→外観→プラグイン→新規追加をクリックする。

検索窓に『RTOC』と入力すると『Rich Table of Contents』のプラグインが表示される。
『有効化』をクリックする。

WordPress管理画面に『RTOC設定』ボタンが表示されるとインストール完了です。
基本設定をしよう

次に、WordPress管理画面の『RTOC設定』をクリックします。

RTOCの目次設定をクリックしてまずは、基本設定からいきます。
基本設定では、目次のタイトル、目次を表示させるページ、表示させる見出し設定、表示条件、フォント設定ができます。
RTOCの基本設定では、右側に目次のデザインのLive Previewが表示されるため、確認しながら設定していきましょう。
目次のタイトル

初期設定では、Live PreviewがContentsになっています。読み手に分かりやすくタイトルは『目次』で設定します。
目次を表示させるページ

目次を表示させるページは『投稿』『固定ページ』にチェックします。
投稿した記事だけに目次を表示させたい場合、投稿だけにチェックすればOKです。
表示させる見出し設定

見出し(H2、H3、H4)まであり、どこまで目次に表示させたいのかを設定できます。
見出しH3までに設定します。見出しが多すぎると、要点が掴みづらいためH3までの設定をおすすめします。
表示条件

表示条件は3or4の設定で問題ありません。表示条件が3なら見出しが2個以下場合は目次が表示されない設定になります。
フォント設置

目次のフォント設定を選びます。デフォルト、Helvetica、Noto Sansから好きなフォントを選びましょう。
デザイン設定をしよう
ここでは、タイトルのデザインや目次の枠組みを設定します。

タイトルの表示設定

目次タイトルの左寄せ、中央寄せを選べます。
タグH2・H3の形式

H2とH3それぞれの見出しタグのデザインを選べます。
枠のデザイン

目次の枠のデザインを選べます。
表示アニメーション

目次が表示される時のアニメーションを選べます。
スムーススクロール

目次の項目をクリックした時に、そのページまで飛ぶまでの動きを設定できます。
プリセットカラーを設定しよう

プリセットカラーは7種類あるため、自分好みのデザインを選べるのが特徴です。
カラー設定をしよう

プリセットカラーで満足している方は、カラー設定はスルーしましょう。
上記のプリセットカラー設定で納得できない方は、カラー設定してください。
目次のタイトル、背景、H2タグなどをそれぞれ別の色に変更することができます。
応用設定をしよう

応用設定では、RTOCの特徴である目次に戻るボタンなどの設定ができます。
目次に戻るボタン・位置・テキスト
『目次に戻るボタン』はスマホだけ表示されます。どのページからでも目次に戻れるため、読み手の利便性が上がります。設定をONにすることをおすすめします。
目次に戻るボタンを左右どちらに・どんなテキストを表示させるのか設定します。
上下調整
目次に戻るボタンの上下調整をします。
除外する投稿・固定ページID
目次を表示させたくない投稿・固定ページがあれば、IDを設定します。
投稿記事のIDは投稿一覧で、固定ページのIDは固定ページ一覧で確認できます。
Table of Contents default display settings

目次を開いたor閉じた状態にしておくのかを選べます。目次を開いた状態にするのがおすすめです。
開閉ボタンの開く・閉じるテキスト
目次の開閉ボタンを設定します。初期設定はOPEN、CLOSEになっています。開く、閉じるなどの自分の好きなテキストに変更できます。
プラグインのCSSを読み込まない
基本的にチェックなしで問題ありません。
最後に変更を保存のボタンをクリックします。
効果的な目次の作り方

- 目次は開いておく
- 箇条書きで簡潔に
- 見出しはH3までに
目次は開いておく
目次は開いたままの設定にしましょう。
始めから目次を閉じていると、目次が見つけられないことがほとんどです。
目次を作っても読み手に気づかれないと意味がありません。そのため、目次は開いておきましょう。
箇条書きで簡潔に
目次を箇条書きで簡潔に書くことで、読み手が欲しい情報にいち早く辿り着けます。
せっかく目次を設置しても、目次の文章が長すぎるとすぐに何の情報なのか判断できません。
見出しはH3までにしよう
上記でも解説しましたが、目次が多すぎると読みづらくなってしまいます。
そのため、見出しはH3までにしましょう。
【まとめ】さっそくおしゃれな目次を作ろう

今回は、WordPressプラグイン『RTOC』で目次を作るメリットと簡単でおしゃれな目次の作り方を解説しました。
『RTOC』なら誰でも簡単におしゃれな目次を作ることができます。
ブログ記事の冒頭に目次を作ることで、読み手がすぐに求めている情報へ辿り着けるため、記事を読んでもらいやすくなります。
どんなに良い記事を書いたとしても、読み手に見られなければ全く意味がありません。
そうならないためにも、分かりやすい箇条書きで目次を作る必要がありますね。
WordPressブログを低コストで始めたい方やブログを始めようか悩んでいる方は、以下の記事を参考にしてください。
当ブログでは国内最速レンタルサーバー【ConoHa WING】を使用中