Amazonでお得な買い物

【JIN】RTOCを使って1分で目次を追加|Rich Table of Contentsが便利

JINの目次をRTOCでオシャレにする

今回は、WordPressテーマ「JIN」で目次を表示するためのおすすめのプラグインをご紹介します。

先日、スタイルのインポートをしたら記事から目次がごっそり消えてしまったため、急いでしらべたところ「Rich Table of Contents (RTOC)」というプラグインが非常にデザイン性も優れていて使いやすいということがわかりました。

尚、プラグインのインストールから目次の表示までは「1分」でできます。

目次
スポンサーリンク

Rich Table of Contents (RTOC)

ここではRich Table of Contents(RTOC)のインストールから有効化の手順を解説していきます。

RTOCインストール

プラグイン新規追加より「Rich Table of Contents」をインストールします。

RTOC(Rich Table Contents)のインストール

インストールが完了したら有効化しましょう。

RTOC有効化後

記事の目次をプレビューするとしっかり目次が表示されていました。

RTOCを有効化したときの目次

目次の設定

目次の設定はRTOC設定から開くことができます。

目次の設定

基本設定

設定できる項目
  • 目次のタイトル
  • 目次を表示させるページ
  • 表示させる見出し設定
  • 表示条件
  • フォント設定

目次のタイトルは「Contents」なっていますが、私は「目次」としておきました。

目次を表示させるページには投稿、固定ページそれぞれ設定することができます。

これは使えるなと思ったのが、表示させる見出し設定です。

指定した見出しの数がないページには目次を非表示でき、無駄な情報を省くことに役立ちます。

デザイン設定

デザイン設定ではその名の通り目次の見栄えを整えることができます。

設定できる項目
  • タイトル表示設定
  • H2/H3のリスト形式
  • 枠のデザイン
  • 表示アニメーション
  • スムーススクロール

定番カラー設定

設定を細々変えるのが面倒な方におすすめなのが「定番カラー」。

定番カラーの種類

7種類のカラー設定が予め用意されているので、簡単に設定したいという方には便利です。

定番カラーの種類
  • JIN Color
  • サニーブルー
  • ダーク
  • フェミニン
  • アクアマリン
  • スマート
  • シトラス

応用設定

応用設定では細かな動きが設定できます。

設定できる項目
  • 目次に戻るボタン
  • 目次に戻るボタンの位置
  • 目次へ戻るボタンのテキスト
  • 上下調整
  • 除外する投稿/固定ページID
  • Table of Contents default display settings
  • 開閉ボタンの開く/閉じるテキスト
  • プラグインCSSを読み込まない

1番助かるのは「除外する投稿/固定ページID」を設定できること。

記事を書いていると、「目次まで表示する必要があるのか?」というくらい文字数を書けていないことがあります。そういったときは目次を非表示させれば、ユーザーにとって見やすい記事ができます。

ショートコード

ショートコード

こちらのショートコードを記事の好きな位置に貼り付けることで目次の表示ができます。

[rtoc_mokuji title=”” title_display=”” heading=”h3″ list_h2_type=”” list_h3_type=”” display=”” frame_design=”” animation=””]

例えば、記事の概要説明の後に目次を表示することもできますし、いきなり目次から開始するなんてこともできます。ユーザーが求める情報に合わせて記事を作り込むことができますよ。

スポンサーリンク

まとめ

目次は本と同じでユーザーに記事の構成を伝えるための唯一の手段です。

目次をいかに見やすくて、わかりやすくさせるかでサイトのユーザビリティが左右されるといっても過言ではありません。

スポンサーリンク
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

インドア派で体育会系のソフトウェアエンジニアです。普段はパソコンをしながらコーヒーを飲むのが至福の時間。日々の生活を快適にするための情報を随時アップしていきます。

コメント

コメントする

目次