2020年度 レスポンシブ対応のTwitter ヘッダー画像はいくつで設定するのがベストなの?

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

WordPress プラグイン 紹介

前回紹介した、国産の目次(もくじ)プラグイン「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 プラグイン 紹介シンプルで美しいWordPress 国産目次プラグイン「Rich Table of Contents」が登場!
コメントを閉じる

コメントを残す