JIN

目次プラグイン「Rich Table of Contents」がとっても可愛い!導入と設定方法を解説します

目次プラグインRichTableofContacts

とっても可愛い目次プラグイン「Rich Table of Contents」がリリースされました!

このプラグインを制作したのはJIN開発メンバーの方達です。

  1. ひつじさん(@hituji_1234
  2. りょうたさん(@tech_ryota
  3. 赤石さん(@cps_kazuya

実際に使用みたらとっても設定しやすく可愛かったです。

どのワードプレステーマを使用していても使えるプラグインで、完全無料!

さらに「目次へ戻るボタン」が標準装備!?

この記事では導入と設定方法を紹介します♪

▼完成形は現在表示されている目次です▼

Rich Table of Contentsの導入方法

RTOC

目次プラグイン「Rich Table of Contents」の導入方法を紹介していきます。

プラグインをダウンロードする

RTOCプラグインはワードプレスダッシュボードのプラグインからダウンロードすることができます。

RTOCダウンロード
  • プラグイン検索でRTOCと打ち込む
  • ワードプレスの管理画面を開く
  • プラグイン検索で「RTOC」と検索する
  • ダウンロードする
  • 有効化する

ダウンロードができたら設定をしていきます。

Rich Table of Contentsの設定方法

プラグインを有効化すると、ダッシュボードのメニュー欄に「RTOC設定」というものが出現します。

RTOC設定

ここをクリックすると「Rich Table of Contents」のデザイン設定をすることができます。

基本設定

基本設定を変更していきます。自分の好きなデザインになるように設定を変えてみてください。

RTOC設定

右側にはデザインのプレビューが表示されるので完成がどうなるのか、目で確認できます。

まるこぼーろ

フォントの変化はこんな感じ!

RTOCフォント

デザイン設定

次に細かいデザイン設定を選んでいきます。

RTOCデザイン設定
デザイン設定
デザイン設定

好みに合わせて設定してみましょう。

プリセットカラー設定

次にカラー設定をおこないます。

「JIN Color」の項目のみJINの設定カラーが反映されます。

今までブログ内で設定していたカラーをそのまま使用したい人は、この「JIN Color」を選びましょう。

その他のものは、次の項目で細かく色を指定することができますよ。

応用設定

応用設定では「目次に戻るボタン」や「目次を除外する記事」などを選ぶことができます。

応用設定

「目次に戻るボタン」はスマホ表示のみです。

目次に戻るボタンは記事を読んでくれるユーザーにとって、記事内を読みやすくするものなので「ON」にすることをおすすめします。

まるこぼーろ

設定はこれで終了だよ!

スマホで見ても綺麗に収まっています!目次へ戻るボタンが可愛い♪

ショートコードでカスタマイズもできる

目次のショートコードを使用すると、カスタマイズや好きなところに目次を入れることもできますよ。

RTOCショートコード

ショートコードの解説も書かれていてとっても初心者に嬉しい対応!

ぜひ好きなようにカスタマイズしてみてくださいね。

Rich Table of Contentsで不具合が出た時は

Rich Table of Contentsプラグインですが、導入したら不具合が出たという声がいくつかあったようです。

ひつじさんが解決方法をツイートしていたので紹介しておきます。

  • a3 lazy loadを利用している
  • Jetpackの画像アクセラレーターを利用している
  • 見出しに半角のカッコが1つだけ入っている

現に当ブログでもプラグイン導入後少しブログデザインが崩れました。

私は上記のツイートとは少し違う理由でデザインが崩れましたが、無事不具合をなおすことができたので同時に紹介しておきます。

前に使用していた目次プラグインを削除する

Rich Table of Contentsを導入する前に「Table of Contents Plus」の目次プラグインを使用していました。

そのプラグインを停止せずに新しいRich Table of Contents目次プラグインを導入しました。

そのせいかボックスのショートコードがあらわになってデザインが崩れてしまったんです。

前使用していた目次プラグインは一度停止。新目次プラグインが綺麗に反映されるのを確認してから前回の目次プラグインを削除しました。

前に使用していた目次プラグインのカスタマイズを削除する

前に使用していた目次プラグインを少しカスタマイズしていました。

そのカスタマイズが「追加CSS」に残っていたので、削除したところデザインが崩れる不具合は解消しました。

もし目次プラグインをカスタマイズしていたという方がいたら削除してみてください。

Rich Table of Contentsで目次を可愛くしよう♪

RTOC

目次がとっても可愛くなって大満足!

目次へ戻るボタンが標準装備なのがとっても嬉しいですね。

使いやすい目次を求めている方はインストールして使ってみてください♪

プラグイン公式ページへ行く