シンプルで美しいWordPress 国産目次プラグイン「Rich Table of Contents」が登場！

このプラグインのおすすめ度：[star rating=”100″ type=”percent”]（総合評価）

ついに国産の目次（もくじ）プラグイン「Rich Table of Contents」が登場ですよ！

実際にこのブログでもこのWordPressプラグイン「Rich Table of Contents（リッチ テーブル オブ コンテンツ）」をインストールして設定してみました。

略してRTOC！

WordPressを利用しているユーザー必見のプラグインです。目次を自動で生成してくれるプラグインの定番「Table of Contents Plus」からの乗り換えも超絶簡単！

この記事を書いた人

NORI( ブロガー/ドローンオペレーター )

Apple製品の他、カメラやドローンが好きです。趣味で2021年から登山やキャンプもはじめました。国交省全国包括許可承認取得済 三陸特/アマ無線4級/DJI CAMPスペシャリストを取得。運営者の詳しい情報はこちら

国産の目次プラグインRich Table of Contents

このWordPressのプラグイン「RTOC -Rich Table of Contents-」は、誰でも簡単に目次（もくじ）の作成を行うことができる日本発の目次自動生成が可能となるプラグインです。

【超お知らせ】

目次プラグイン「Rich Table of Contents」をリリースしました！

・無料プラグイン
・誰でもリッチな目次が作れる
・最新WPとの互換性100%
・目次へ戻るボタン標準搭載

プラグイン検索で「RTOC」と打てば一発で出てくるのでぜひ使ってみてください🙌https://t.co/bXNU2Tjxdl pic.twitter.com/we7hqhsM06

— ひつじ@JIN制作 (@hituji_1234) March 1, 2020

この目次（もくじ）自動生成が可能となるWordPressのプラグインはなんと 無料で使えます！

プラグインのインストール方法

【初心者でも安心】WordPress プラグインのインストール方法を動画で解説

Rich Table of Contents（リッチ テーブル オブ コンテンツ）を利用するには、以下のリンクからプラグインをダウンロードしてからFTPでアップするか、またはダッシュボードの「プラグイン」から「RTOC」を検索してプラグインをインストールします。

Download
QR-Code

Rich Table of Contents

開発者:
CROOVER.inc

金額:
無料

インストールが完了したら「有効化」のボタンをクリックします。

有効化が終わったら、ダッシュボート内にある「RTOC設定」をクリックしてここから細かい見出しのデザイン設定を行うことができます。

Rich Table of Contentsの設定

ここからRTOC（リッチ テーブル オブ コンテンツ）の設定です。Table of Contents Plus（テーブル オブ コンテンツ プラス）は、英語の設定画面で設定が難しかったという人も多いと思いますが、このプラグインは設定画面もクリックして選ぶことで、デザインやレイアウトを簡単にセットアップすることができます。

基本設定

ここで目次の基本設定を行うことができます。目次のタイトルを入れると隣に表示されている「Live Preview」ですぐに変更した内容が反映されます。どういう表示設定になるのかライブプレビューできるのがとてもわかりやすいですね！

デザイン設定

ここでは目次（もくじ）の各種のデザインを自由に設定することができます。タイトルの表示を左寄せにしたり、中央寄せにしたりなどワンクリックで切り替えができます。

H2のリスト形式/H3のリスト形式も表示されているデザインをクリックして選ぶだけで簡単に反映されます！

ワンクリックで簡単設定

目次枠のデザイン

目次を囲む枠は全部で5種類が設定されており、こちらも同じくデザインをクリックして選ぶだけで簡単に反映されます！非常にわかりやすいUIで便利です。

使い方や設定方法のヘルプ

設定方法がわからなくなった場合には「ヘルプタブ」をクリックすると各種設定項目についてのヘルプガイドが記載されています。

プリセットカラー設定

ここではプラグインのデフォルトで追加されているRTOCのデザインプリセットを選ぶことで、そのままそのデザインが利用できます。自分のサイトのカラーに近いものをクリックして選んでみるといいでしょう。

カラー設定（上級者向け）

自分のブログのテーマーカラーを忠実に設定している上級者の方は、ここから細かくそれぞれのカラーを設定していくことができます。こういう細かい設定ができるのもすごく使いやすくて素晴らしい！

応用設定

ここではプラグインの高度なカスタマイズを必要とされる場合に設定できる項目が用意されています。

PC表示でのテスト

設定後のパソコン表示での動作です。開く（OPEN）/ 閉じる(CLOSE)のボタンも標準でついています。デフォルトで閉じておくか開いておくかは「応用設定」の項目から選んで設定することが可能です。

スマートフォンでの表示動作テスト

スマートフォンで見ると「目次に戻るボタン」が表示されているのがわかります。必要がなければ、応用設定でOFFにしてしまうことが可能です。また自分のブログのデザインなどに応じてボタンの上下調整も応用設定で可能です。

目次タイトルにアイコンをつける応用設定

SANGOではFontawsomeを使えるようになっているので、以下のコードを入力すると以下のイメージと同じような設定でアイコンを表示することが可能となります。

<i class="fas fa-list-ul"></i> この記事の内容

RTOCの設定がうまく行かない時にチェックする項目

上記で設定してもうまく表示されないということがあるかもしれません。現在ユーザーからのフィードバックをもとに、公式でこのプラグインを入れて起こる不具合を調査しているようです。

参考までに以下の内容が該当していないか、自分のWordPressの設定を見直してみましょう。

「RTOCを使っていて吹き出しが表示されない！」という人

・a3 lazy loadを利用している
・Jetpackの画像アクセラレーターを利用している

この2つがセットになっていると不具合が起きている可能性が高いようです。Jetpackの設定から「画像アクセラレーター」をOFFにしてもらえると解決しそうです🙏

— ひつじ@JIN制作 (@hituji_1234) March 2, 2020

「RTOCを入れたら通常記事にエラーコードがでて記事が表示されてない！」という人

見出しの中に半角の括弧「(」が1つだけ入っている場合に起きる不具合のようです。アプデで解決できるかもしれませんが、エラーが起きているページがあれば()のように対にしてもらえると助かります。

— ひつじ@JIN制作 (@hituji_1234) March 2, 2020

プラグイン開発者へのレビュー方法

この素晴らしいプラグインを開発した開発者へのレビューは、WordPress.org のアカウントがあれば可能です。プラグインは世界中に公開されているので、利用者数が増えれば増えるほど開発者も嬉しいはず！

以下の方法でレビューを投稿してみてはいかがでしょうか。利用する皆さんレビューを書いて、無料でこのプラグインを開発・公開しているひつじさん（@hituji_1234）を応援してあげよう。

RTOC プラグインレビューを投稿する

Rich Table of Contentsのレビューまとめ

本記事は、国産目次プラグイン「Rich Table of Contents」についてのレビュー記事です。

想像以上に美しいデザインと簡単に設定ができる目次（もくじ）プラグインという印象です。パソコンでもスマホでもブログをもっと読みやすくするために、目次のデザインを設定してみてはいかがでしょうか。

以上、NORI（@norilog4）でした。

WordPress 国産目次プラグイン「Rich Table of Contents」の応用設定方法