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

WordPress おすすめプラグイン rich table of contents 設定方法

本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。

前回紹介した、国産の目次(もくじ)プラグイン「Rich Table of Contents」の応用設定を紹介します。

ここでは、追尾サイドバーなどにこの目次を設置する設定方法やCSSの設定で目次タイトルのフォントサイズやウエイトの変更をすることができます。

この応用設定の注意

この応用設定についてはWordPressのテーマ、SANGO、SANGOの子テーマ、PORIPUの子テーマに対応しています(検証済み)

この記事を書いた人

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

SANGOではFontawsomeを使えるようになっているので、以下のコードを、RTOC設定内の「基本設定」→ 目次のタイトルへ入力すると以下のイメージと同じような設定でアイコンを表示することが可能となります。

入力コード

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

RTOC設定の基本設定で以下の部分に上で紹介しているコードを入力します。ライブプレビューで表示するとエラーにはなりますが、更新後投稿ページを見るとちゃんとアイコンが表示されます。

目次タイトル編集

目次 追尾サイドバー RTOC

追尾サイドバー(PCのみ)に目次を追加する方法

RTOCは以下の動画のように、追尾サイドバーに目次を追加することも可能です。

PC表示 追尾サイドバー RTOC

サイドバーへの追加方法と追加するコード

以下のようなデザインを設定するにはこのコードをウィジェットのサイドバーに追加することで対応できます。細かいコードの設定はRTOC設定のショートコード内にある「ショートコードの解説」に詳しく記載してあります。

ウイジェットへの追加方法

追尾サイドバー(PCのみ)にRTOCの目次を追加して表示させたい場合には、上記コードを、以下の場所へコピペします。
テキストのボックスを追尾サイドバー(PCのみ)にドラッグ&ドロップで追加後、「タイトル無し」にした状態で上記コードをコピペして保存します。

RTOC 追尾サイドバー 追加方法

目次のタイトルフォントを太くする方法

この方法はCSSを追加して変更する必要があります。以下のCSSを子テーマにコピペして貼り付けて自分のブログに合わせてフォントサイズや大きさを調整が可能です。

追記CSSコードはこちら

実際のデザイン

目次 追尾サイドバー RTOC

現在SANGOでわかっている不具合

試行錯誤していろいろと設定していてわかったことですが、コードボックスのショートコードを使い、このRTOCのショートコードをHTMLエスケープツールで変換させて紹介しようとすると、記事内でもくじが表示されないなどといった不具合があることが判明しています。

Rich Table of Contentsの応用設定まとめ

本記事は、国産目次プラグイン「Rich Table of Contents」について応用設定の解説記事です。

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

NORI

簡単に設定できると思うのでチャレンジしてみてね!

以上、NORI(@norilog4)でした。

WordPress おすすめプラグイン 紹介 rich table of contents シンプルで美しいWordPress 国産目次プラグイン「Rich Table of Contents」が登場!

コメントの通知/購読設定
受け取る通知
guest

0 件のコメント
古い順
新しい順 評価順
Inline Feedbacks
全てのコメントを見る