未分類

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

目次プラグインRichTableofContacts

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

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

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

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

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

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

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

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

Rich Table of Contentsの導入方法

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

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

まずプラグイン公式のLPページへ行き、プラグインをダウンロードしましょう。

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

LPページの一番上にある「プラグインを導入する」ボタンをクリックします。

すると、WordPress.ORGのページへ移動します。

右側の「ダウンロード」ボタンをクリックしてプラグインをダウンロードします。

ダウンロードしたファイルは解凍せずに「zip」形式のままで!

ファイルをワードプレスにインストールする

ワードプレスを開いて「プラグイン」→「新規追加」をクリックします。

次に「プラグインのアップロード」→「ファイルの選択」をクリックしてアップロードファイルを選びます。

ファイル名が合っているか確認して「今すぐインストール」をクリック。

インストールが完了したらすぐに「プラグインを有効化」をクリックしましょう。

これで導入は完了です。

次にデザインの設定をしていきます。

Rich Table of Contentsの設定方法

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

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

基本設定

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

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

まるこぼーろ

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

デザイン設定

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

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

プリセットカラー設定

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

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

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

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

応用設定

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

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

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

まるこぼーろ

設定はこれで終了だよ!

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

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

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

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

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

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で目次を可愛くしよう♪

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

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

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

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