WordPressの目次作成プラグインといえば、TOC＋（Table of Contents Plus）が一番メジャーどころですが、TOC+でおしゃれなデザインにしたいのであればCSS編集は必須です。
CSSの知識がない人からするとCSS編集は少しハードルが高いものですよね。
しかし、先日リリースされた『RTOC（Rich Table of Contents）』という日本製のプラグインはCSSいらずでおしゃれデザインの目次の作成が行えます。
僕もずっとTOC＋を利用してきましたが、先日RTOCのデザインがすごくおしゃれで気に入ったので乗り換えました。
RTOCでは以下のことができます。
- 専用の分かりやすい管理画面からワンクリックでデザインが決められる
- 好きな場所に目次を表示させられる
- スマホページに「目次にもどる」ボタンを設置できる
この記事の流れ
WordPressでおしゃれな目次を作成するプラグイン『RTOC』がオススメな理由
【超お知らせ】
目次プラグイン「Rich Table of Contents」をリリースしました！
・無料プラグイン
・誰でもリッチな目次が作れる
・最新WPとの互換性100%
・目次へ戻るボタン標準搭載プラグイン検索で「RTOC」と打てば一発で出てくるのでぜひ使ってみてください🙌https://t.co/bXNU2Tjxdl pic.twitter.com/we7hqhsM06
— ひつじ@JIN制作 (@hituji_1234) March 1, 2020
RTOCはワードプレステーマ『JIN』で有名な実力派ブロガーのひつじさん属するチームで作成されたプラグインです。
おしゃれなデザインの目次作成が簡単にできる
好みの問題もあるとは思いますが、僕はTOC+のデザインよりもRTOCのデザインのほうが好きです。
僕の場合、シンプル系のデザインにしてタイトルを「記事の概要」に変更しています。
こうすることで、まるで目次ではなくコンテンツの一部のように表示することができるので気に入っています。
記事ごとに目次のデザインを変えられる
目次を除外するページの指定ができる他、専用のショートコードを利用することで、好きな場所に目次を表示することができます。
また、ショートコードは編集が可能で、ショートコードで表示する目次箇所のデザインを元の設定とは違うものに設定することも可能です。
※ショートコードを利用すると元の位置にある目次が消えてしまうため、上記の目次は画像で表示しています。
複数ジャンルのブログ構成であれば、この機能を使って記事ごとに印象を変えるのも一つの手ですね。
スマホページに「目次にもどる」ボタンを設置できる
スマホページで下にスクロールした際に追尾する「目次にもどる」ボタンを設置可能です。
これはワードプレステーマに付属している機能でTOPへ戻るボタンなどがある場合は不要かなと思いますが、ない場合はこの機能を有効活用するのがいいでしょう。
目次作成プラグインRTOCのインストール方法
初心者さん向けに、RTOCのインストール方法を動画にしておきました！
・プラグイン新規追加
・「RTOC」と検索
・インストール&有効化この手順で利用できます🤲
JINで培ったUI設計とデザインへのこだわりを採用し、目次プラグインの中でもかつてないほど使い勝手の良いものに仕上げました！ pic.twitter.com/iP6fGVAAXf
— ひつじ@JIN制作 (@hituji_1234) March 1, 2020
上記でひつじさんが解説している通りなのですが、まずTOC+を利用している人はプラグインを停止しておきましょう。
プラグイン検索窓で「RTOC」と検索して「Rich Table of Contents」をインストール＞有効化。
これでRTOCのインストールは完了です。
目次作成プラグインRTOCの使い方
目次デザインの設定方法
管理画面がかなり分かりやすくて解説の必要もないかもしれませんが、念のため書いておきます。
まず基本設定で「目次のタイトル」と表示箇所、表示させる見出しタグの設定、フォント設定が行えます。
ちなみにフォントは以下から選択できます（2020年3月22日時点）。
- デフォルト
- Helevetica
- Noto sans
次にデザイン設定でタイトルの表示箇所やH2タグ、H3タグの目次表示デザインを４パターンから選択できます。
また、枠デザインは５パターン用意されています。
枠デザインをワンクリックで設定できるのはかなり嬉しいところです。
目次表示のアニメーション設定までできちゃいます。
現在はフェードかスライド、またはアニメーションなしの設定が可能。
アニメーションスピードについて
今後アニメーションスピードも変えられるようになることを期待してます。
また、カラーを一括設定できるプリセットカラー設定が用意されています。
プリセットカラーが気に入らないという場合は、個別パーツごとに自分で色を指定することも可能です。
応用設定では、目次に戻るボタンの設置と目次除外ページの設定、目次のデフォルト表示設定の変更が行なえます。
無料プラグインでここまで多彩なデザインを実装できるのは別格ですね。
トップに戻るボタンの必要性
任意の箇所に別デザインの目次を表示させる方法
以下のようなショートコードを記載することで好きな場所に目次を表示させることができます。
このショートコードの使い方はプラグインの設定ページに記載されています（めちゃくちゃ親切）。
RTOCで目次をおしゃれデザインにしよう
まだリリースされたばかりのプラグインなので、これから更にブラッシュアップされていくことが期待されます。
さすがにAFFINGERのすごい目次のように分析ができるようにまではならないと思いますが、現時点で有料プラグイン等を利用していない人はTOC+よりも使い勝手が良いのでオススメですよ。
