簡単・おしゃれな目次自動生成プラグイン「Rich Table of Contents」

WordPress・プラグイン

はじめに

記事内から見出し(<h1>~<h6>)タグを拾い出して自動で目次の生成をしてくれる便利なプラグインは色々ありますが、有名なのは以下の2つです。

  • Table of Contents Plus
  • Easy Table of Contents

それぞれの使い方については以下をご覧ください。

 

上記2種のプラグインは、設定項目もデザインもよく似ていて、ほとんど変わりがありません。

 

「Rich Table of Contents」の特徴

Rich Table of Contents

上記2つのプラグイン同様の表示条件などの設定はもちろん可能ですが、独自の特徴があります。

日本の会社が制作したプラグイン
デザインがおしゃれ
ショートコード利用が可能

 

初期デザインサンプル

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

 

同様に、枠のデザイン(5パターン)、表示アニメーション(3パターン)から好みのものを選択します。

枠のサンプル

 

基本のカラーパターンを選択

Rich Table of Contents

 

カラーパターンのサンプル

 

カスタムカラーにする場合は、その下にある「カラー設定」から好きな色を指定できます。

※こちらで色を変更しても、プレビューが表示されます。

Rich Table of Contents

 

ボタンの位置やテキストなど細かな設定も可能。

Rich Table of Contents

 

最後に「変更を保存」を押します。

 

以上で完了です。

 

設定項目では変更できないカスタマイズは以下も参考にして下さい。

 

ショートコード

ショートコードタブで、表示されるコードを記事内に挿入する事で、好きな位置に目次を表示する事も可能です。

1つの記事内に1つしか設置できないので、通常の自動挿入の目次利用をしている場合は使えません。

Rich Table of Contents

 

コード 解説
title="" 任意のテキスト 目次のタイトルを設定できる項目です。この値が設定されていない場合管理画面の設定が反映されます。
title_display="" left,center leftを入力するとタイトルは左寄せ、centerを入力するとタイトルは中央寄せになります。
heading="" h2,h3,h4 どの見出しを表示させるかを設定できます。例えばh3としておくと、h2〜h3までの見出しが目次に表示されます。
list_h2_type="" round,
number1,
number2
roundを入力すると●が、number1,number2を入力すると数字がh2見出し前に表示されるようになります。
list_h3_type="" round,
number1,
number2
roundを入力すると●が、number1,number2を入力すると数字がh3見出し前に表示されるようになります。
display="" open,
close
openと入力すると目次が開いた状態で、closeと入力すると目次が閉じた状態で表示されます。
frame_design="" frame1,
frame2,
frame3,
frame4,
frame5
目次の枠のデザインを設定できます。
animation="" fade,
slide,
none
目次の表示アニメーション設定を行うことができます。

 

関連記事