Rich Table of Contentsを使っておしゃれな目次を作る

実は私、初めてブログを作った時は目次なしで記事を投稿していました。

そのブログは1年ほど運営し成果が上がらなかったので、記事を見直すことに。

自分の投稿してきた記事を見ていくと、

「目次がないと、知りたいことをすぐに仕入れたい読者さんには不親切なブログかも...」

と思うようになりました。

実際、私も色んなブログを見る時、素早く情報を得るために目次をしっかり見ていたんです。

特に文字数の多い記事になってくると、目次があると便利です。

記事の中に自動で「目次」を作ってくれるプラグインTable of Contents Plusが有名ですが、私のおすすめはRich Table of Contentsというプラグインです!

Rich Table of Contentsだと、おしゃれで見やすい目次が簡単に作れるので是非利用しましょう。

この記事では、Rich Table of Contentsの設定について解説していきます。

Rich Table of Contentsとは?

Rich Table of Contentsとは、投稿した記事の目次を自動で生成できるプラグインです。

このプラグインを使えば、シンプルで美しい目次を簡単に作ることができます。

上記の自動生成された目次は、記事本文の「見出し(h2)」や「見出し(H3)」を判別し作られています。

また、見たい見出しをクリックすると、その見出しの位置まで移動することもできます。

これはWordPress有料テーマ「JIN」の開発チームによって作られたプラグインなのですが、「JIN」というテーマもとても美しいデザインです。

このブログのテーマは「Diver」を使っていますが、Rich Table of Contentsは「JIN」以外のWordPressテーマでも問題なく使うことができます。

Rich Table of Contentsのインストール

Rich Table of Contentsをインストールしていきます。

①ダッシュボードのプラグインの「新規追加」をクリック
②「Rich Table of Contents」または「RTOC」と入力
③Rich Table of Contentsの「今すぐインストール」をクリックし、「有効化」をクリックして有効化します

Rich Table of Contentsの設定

Rich Table of Contentsをインストールすると、ダッシュボードに「RTOC設定」が表示されますのでクリックしてください。

「目次設定」のタブが選択されているので、そのままの画面で設定していきましょう。

基本設定

「基本設定」にスクロールすると、右側にLive Preview(ライブプレビュー)がついてきます。

設定を変更すると、ライブプレビューに変更した内容が反映されるので、確認しながら色々変更してみましょう。

デザイン設定

目次デザインを自由に設定することができます。

タイトルの表示は「左寄せ」と「中央寄せ」に簡単に切り替えができ、H2やH3のリスト形式もクリックするだけで簡単に変更し、右のライブプレビューに反映されます。

枠のデザインも、5種類の枠に変更できます。

プリセットカラー設定

デフォルトで追加されているRTOCのデザインプリセットの色を選ぶことができます。

6種類あるので、サイトカラーに近いものをクリックして選びます。

カラー設定

タイトルやテキストのカラーを変えたい場合は、ここで細かく設定することができます。

応用設定

高度なカスタマイズをしたい場合は、ここで設定することができます。

設定をしたら、忘れずに「変更を保存」をクリックしてくださいね。

「目次に戻るボタン」は、スマートフォンで確認すると表示されています。スマートフォンでも確認しましょう。

 

ヘルプ

もし分からないことがあれば、「ヘルプ」タブを選択すれば解決するでしょう。

PC・スマートフォンでも確認

設定が終わったら、パソコンやスマートフォンで確認しましょう。

「OPEN」「CLOSE」ボタンを押して切り替わるかどうかも確認します。

スマートフォンでは、「目次へ」ボタンが表示されるので、きちんと動くかどうか確認します。

まとめ

Rich Table of Contents
・基本設定...目次の基本設定
・デザイン設定...各種のデザインを設定
・プリセットカラー設定...デザインプリセットを選んで設定
・カラー設定(上級者向け)...タイトルカラーなど細かいカラーを設定
・応用設定...高度なカスタマイズをする場合に設定

今回は、目次プラグイン「Rich Table of Contents」の設定画面の解説をしました。

とても美しいデザインが魅力的です。設定も簡単!

ブログの雰囲気が、一気におしゃれになります。

目次をうまく取り入れて、読みやすいブログにしていきましょう!

おすすめの記事