ブログ 広告

WordPress簡単おしゃれな目次プラグインの使い方【Rich Table of Contents】

お悩みぐま

ブログをはじめてみたけど、目次ってどうやってつくるの?

Webサイトでよくみかける目次。
プラグインで作れるみたいだけど、種類もたくさんあってどれがいいのかよくわかりませんよね。

この記事を読むとわかること
  • あっという間にできる目次の作り方と手順
  • おしゃれな目次ができるプラグイン
  • 目次を作るメリット
お悩みくま

この記事の手順をマネするだけで、あっという間に目次がつくれるよ♪

サクッとおしゃれな目次をつくって、読者さんがどんどん読みたくなるページ設計をしていきましょう。

簡単におしゃれな目次を作れるプラグインは「Rich Table of Contents」

WordPressで目次をつくるなら、目次自動生成プラグインの導入がおすすめです。

サクッと簡単に目次が作れるからです。
手作りする方法もあるのですが、手間と時間がかかってしまいます。

目次作りより、記事を書くことに時間をかけたいですよね。

なので目次を作りたいなら、プラグインの追加でサクッと完成させちゃいましょう。

お悩みぐま

おすすめな自動で目次を作るプラグインはどれ?

目次プラグインを検索すると出てくるのが、だいたい下記の2つです。

・Rich Table of Contents
・Table of Contents Plus

結論
おしゃれで使いやすい目次は「Rich Table of Contents」

下の画像は、2つの目次プラグインで作った目次の比較画像です。

数字の表示形式など、デザイン性が高いのは断然左のRich Table of Contents

また、Rich Table of Contentsは、目次デザインのカスタマイズ性も圧倒的に高いです。

数字の表示方法や、枠、カラーなど、自分好みのカスタマイズが可能となっています。

さらにカスタマイズ方法も、直感的に操作できるつくりになっていて、初心者でも使いやすいのが特徴です。

豆知識
Rich Table of Contentsは、WordPress人気テーマJINの開発チームが手掛けた日本発のプラグインです。デザイン性と使いやすさを追求したつくりになってます。

くまきち

ここからはRich Table of Contentsの導入手順と使い方を解説するよ

Rich Table of Contentsでサクッとおしゃれな目次をつくる方法:インストール手順

まず、目次プラグイン「 Rich Table of Contents 」をインストールします。

①WordPress管理画面メニューより【プラグイン】→【新規追加】
➁プラグイン検索欄に Rich Table of Contents と入力→【今すぐインストール】をクリック

③【有効化】をクリック→インストール完了です!

インストールした時点で、投稿したページに目次が表示されます。
なお、目次は編集画面では表示されません。
プレビューや公開した記事で確認しましょう。

Rich Table of Contents目次の作り方:サクッとおわる設定方法

Rich Table of Contents をインストールすると、左に「RTOC設定」という項目が追加されます。ここから、Rich Table of Contentsの目次設定ができます。

WordPress管理画面より【RTOC設定】をクリック。

目次設定タブがあり、5つの項目の設定ができます。

①基本設定
➁デザイン設定
③プリセットカラー設定
④カラー設定(上級者向け)
⑤応用設定

設定変更をしたときは、最後に【変更を保存】を忘れずにクリックしましょう。

①基本設定

「目次タイトル」は自由に変更可能。
初期設定では「Contents」になっています。

くまきち

「目次」や「もくじ」にするとわかりやすいよ♪


「表示させる見出し設定」はH2からH4までの表示設定が選べます。
読者さんが記事の内容を一目でわかりやすいようにH3までの設定がオススメです。

「フォント」は、3種類(デフォルト・Helvetica・Noto Sans)から選べます。
選ぶと右のイメージ画像が変わりますので、確認しながらお好みの設定を選びましょう。

➁デザイン設定

タイトルの表示位置や、H2H3の形式や枠のデザインを選べます。
H2とH3のデザインの組み合わせ次第で目次のイメージが変わりますよ♪
右のイメージ画像を参考にしながら好きなスタイルを見つけて下さい。

表示アニメーションは、ページ表示スピードが遅くなる場合もあるので「なし」がおすすめです。

スムーススクロース設定をONにすると、目次をクリックしたときに、スクロースしたようにクリックした場所へ移動します。
OFFだと、瞬時に目次をクリックした場所へ移動します。

③プリセットカラー設定

あらかじめ設定されたカラーバリエーションから、好きな色見を選べます。

ちなみにJINcolorは、WordPressテーマ「JIN」を使用している方向けのカラーです。
JINで設定したカラーが反映されます。

④カラー設定(上級者向け)

プリセットカラー設定で決めた色をさらにカスタマイズできます。
色にこだわりたい方は、カラー設定でお好きな色を選びましょう。

くまきち

(小声)下手にいじるより、プロが作ったプリセットカラーセットで選んでおくと間違いありません…!

⑤応用設定

目次ボタンやテキスト設定ができます。

ちなみに目次ボタンはスマホだけで表示されるボタンです。


表示にすると常に画面したに表示され、いつでも目次に戻ることができます。

読者さんがページ内を動きやすくなるので、目次ボタンは表示がオススメです。

設定変更をしたときは、最後に【変更を保存】を忘れずにクリックしましょう。

目次を作る3つのメリット

WordPressでWebページをつくるなら、目次は必須です。
なぜなら、メリットしかないから!

目次を作る3つのメリット
①記事の内容がひと目でわかる
➁見たい所に移動できる
③SEO評価につながる

メリットを理解しておくと、目次の言葉選びや書き方への工夫が深まります。

目次の作り方と一緒に、ぜひメリットも知っておいてください。

目次を作るメリット:①記事の内容がひと目でわかる

目次があることで、読者さんは記事の内容を一目で理解できます。

読者さんは「自分が知りたいことが解決できる記事なのか?」を、目次をみて瞬時に判断しています。

もしも目次がなければ、一体どんな内容の記事かわかりませんよね?

自分が知りたいことが解決するかしないかわからない記事を読んでくれる人は少ないでしょう。

読者さんが記事の内容を理解しやすい目次をつくりましょう。

目次を作るメリット:➁見たい所に移動できる

目次を設置しておくことで、クリックするだけで読みたい場所に移動できるというメリットがあります。

あなたも、目次クリックで知りたい所だけ読むことがありませんか?

くまきち

たしかに!全部は読んでないかも…

知りたいことがでてくるまで全部読むのは大変ですよね。

目次があることで、読者さんの「知りたいことだけ早く知りたい」ニーズを満たして、利便性の向上につながります。

目次を作るメリット:③SEO評価につながる

目次を作ることで、SEO評価にもつながります。

目次があると、記事の内容が一目でわかりやすくなり、読みたい所へすぐ移動でき、読者が使いやすいサイト設計になるからです。

Googleは利便性が高い読者ファーストな記事を評価します。

そのため、目次があることで読者が使いやすいコンテンツになる=GoogleのSEO評価につながることが期待されます。

まとめ:サクッとおしゃれな目次をつくって見やすい記事へ

WordPressで目次をつくるなら、目次自動生成プラグインを導入しましょう。

おしゃれで1番使いやすい目次プラグインは「Rich Table of Contents」です。

「Rich Table of Contents」(RTOC)とは?
WordPress人気テーマJINの開発チームが手掛けた日本発の自動目次生成プラグイン。
デザイン性と使いやすさを追求した設計。

枠や、デザイン感のカスタイマイズの種類が豊富で操作も簡単♪

目次の設定手順は、インストール→有効→【RTOC設定】→お好みの設定を選ぶ→【変更の保存】をクリックするだけ。

くまきち

Rich Table of Contentsで、サクッとおしゃれな目次を作って、読者さんが使いやすいサイトにしていこう

ブログデザインが整ったら、
アイキャッチや、ヘッダー画像の作り方を知っておきましょう♪

センスゼロでも簡単にできる!ブログアイキャッチ画像の作り方デザインスキルなし主婦でも5分でおしゃれにできた!Canvaブログアイキャッチ画像作り方・手順~設置 ...