アウトプットスタイル ブログ運用

WordPressでおしゃれな目次を作成するプラグイン『RTOC』がオススメな理由

2020年3月22日

WordPressの目次作成プラグインといえば、TOC+(Table of Contents Plus)が一番メジャーどころですが、TOC+でおしゃれなデザインにしたいのであればCSS編集は必須です

CSSの知識がない人からするとCSS編集は少しハードルが高いものですよね

しかし、先日リリースされた『RTOC(Rich Table of Contents)』という日本製のプラグインはCSSいらずでおしゃれデザインの目次の作成が行えます

僕もずっとTOC+を利用してきましたが、先日RTOCのデザインがすごくおしゃれで気に入ったので乗り換えました

RTOCでは以下のことができます

  • 専用の分かりやすい管理画面からワンクリックでデザインが決められる
  • 好きな場所に目次を表示させられる
  • スマホページに「目次にもどる」ボタンを設置できる

WordPressでおしゃれな目次を作成するプラグイン『RTOC』がオススメな理由

RTOCはワードプレステーマ『JIN』で有名な実力派ブロガーのひつじさん属するチームで作成されたプラグインです

ポイント

商品リンク作成のRINKERのように日本製のプラグインはなかなか優秀なものが多いので要チェック

おしゃれなデザインの目次作成が簡単にできる

デザイン目次1

デザイン目次2

好みの問題もあるとは思いますが、僕はTOC+のデザインよりもRTOCのデザインのほうが好きです

僕の場合、シンプル系のデザインにしてタイトルを「記事の概要」に変更しています

こうすることで、まるで目次ではなくコンテンツの一部のように表示することができるので気に入っています

記事ごとに目次のデザインを変えられる

目次を除外するページの指定ができる他、専用のショートコードを利用することで、好きな場所に目次を表示することができます

また、ショートコードは編集が可能で、ショートコードで表示する目次箇所のデザインを元の設定とは違うものに設定することも可能です

ショートコードで目次※ショートコードを利用すると元の位置にある目次が消えてしまうため、上記の目次は画像で表示しています

複数ジャンルのブログ構成であれば、この機能を使って記事ごとに印象を変えるのも一つの手ですね

スマホページに「目次にもどる」ボタンを設置できる

スマホページで下にスクロールした際に追尾する「目次にもどる」ボタンを設置可能です

目次に戻る

これはワードプレステーマに付属している機能でTOPへ戻るボタンなどがある場合は不要かなと思いますが、ない場合はこの機能を有効活用するのがいいでしょう

目次作成プラグインRTOCのインストール方法

上記でひつじさんが解説している通りなのですが、まずTOC+を利用している人はプラグインを停止しておきましょう

プラグイン検索窓で「RTOC」と検索して「Rich Table of Contents」をインストール>有効化

プラグインを追加

これでRTOCのインストールは完了です

目次作成プラグインRTOCの使い方

目次デザインの設定方法

管理画面がかなり分かりやすくて解説の必要もないかもしれませんが、念のため書いておきます

まず基本設定で「目次のタイトル」と表示箇所、表示させる見出しタグの設定、フォント設定が行えます

目次タイトルの設定

ちなみにフォントは以下から選択できます(2020年3月22日時点)

  • デフォルト
  • Helevetica
  • Noto sans

次にデザイン設定でタイトルの表示箇所やH2タグ、H3タグの目次表示デザインを4パターンから選択できます

目次表示デザイン1

また、枠デザインは5パターン用意されています

枠デザインをワンクリックで設定できるのはかなり嬉しいところです

目次表示デザイン2

目次表示のアニメーション設定までできちゃいます

現在はフェードかスライド、またはアニメーションなしの設定が可能

表示アニメーション

注意ポイント

現時点ではちょっとアニメーションのスピードが早すぎて、当ブログではうまくフワッとした感じに表示されてません
今後アニメーションスピードも変えられるようになることを期待してます

また、カラーを一括設定できるプリセットカラー設定が用意されています

プリセットカラー設定

プリセットカラーが気に入らないという場合は、個別パーツごとに自分で色を指定することも可能です

カラー設定(上級者向け)

応用設定では、目次に戻るボタンの設置と目次除外ページの設定、目次のデフォルト表示設定の変更が行なえます

応用設定

無料プラグインでここまで多彩なデザインを実装できるのは別格ですね

補足

ちなみに、僕はトップに戻るボタンをテーマ側で設置しているので目次に戻るボタンは利用していません

任意の箇所に別デザインの目次を表示させる方法

ショートコード

以下のようなショートコードを記載することで好きな場所に目次を表示させることができます

このショートコードの使い方はプラグインの設定ページに記載されています(めちゃくちゃ親切)

ショートコード解説

RTOCで目次をおしゃれデザインにしよう

まだリリースされたばかりのプラグインなので、これから更にブラッシュアップされていくことが期待されます

さすがにAFFINGERのすごい目次のように分析ができるようにまではならないと思いますが、現時点で有料プラグイン等を利用していない人はTOC+よりも使い勝手が良いのでオススメですよ

-アウトプットスタイル, ブログ運用

Copyright© イキカタシフト , 2020 All Rights Reserved Powered by AFFINGER5.