RTOCのサイドバー追尾をカスタマイズ【WordPress｜JIN】

こんにちは、キザルです。

WordPressのテーマは「JIN」を使っています^^

カエルくん

RTOCをJINでサイドバー追尾させたいんだけど、デザインと合うようにカスタマイズできないの？

ということにずっとモヤモヤしていましたが、ついに解決しました。

キザルくん

追加CSSだけで対応できた！

functions.phpは触らずに追加CSSだけでRTOCのサイドバー追尾を整えることができました。

今回は自分の備忘録も兼ねて、そのコードを共有したいと思います^^

JIN以外のテーマでは未検証です。

RTOCとは

「RTOC(Rich Table of Contents)」はWordPressのプラグインです。

インストールして有効化するだけで、リッチな目次を自動で作成してくれます。

WordPressのテーマ「JIN」制作チームの

達による開発です^^

https://twitter.com/hituji_1234/status/1234060281707286529?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1234060281707286529%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fikikata-shift.com%2Frtoc

実際に有効化したらこんな感じ。

最初のH2タグの直前に目次が表示されます。

WordPress管理画面の「RTOC設定」から細かい設定も可能ですよ。

また「RTOC設定」→「ショートコード」で作成できるショートコードを貼り付けて、好きな場所に目次表示もできます。

RTOCをサイドバー追尾にする手順

RTOCはサイドバーに追尾させることもできます。

RTOCのサイドバー追尾手順

STEP1

「外観」→「ウィジェット」を選択
STEP2

「サイドバー追尾【PC】」に「テキスト」をドラッグ
STEP3

ショートコードを貼り付け

「RTOC設定」→「ショートコード」より取得したショートコードを貼り付けます。
STEP4

「保存」をクリック

以上でRTOCのサイドバー追尾ができます。

サイドバー追尾で気になる点

RTOCのサイドバー追尾で気になる点は、サイドバーのデザインとフィットしないところ^^;

このときタイトルを入れるとデザイン的には整合しますが、もともとあるタイトルと被っちゃいますね^^;

あとH2のないトップページやカテゴリページで、空っぽのテキストが表示されたりします。

気になると言えば気になるね

できることならデザインを合わせたい！

追加CSSでサイドバー追尾のRTOCをカスタマイズ

ということで、RTOCをサイトバー追尾で綺麗に表示できるようにカスタマイズしてみました。

「外観」→「カスタマイズ」→「追加CSS」に下記コードをコピペするだけでOKです。

ただし、このコードはJINのサイドバーデザインのスタイル6に合わせたものです。

使える人はかなり限定的になりそうですね^^;

/***RTOCサイドバー追尾***/
/* タイトル設定 */
#sidebar #rtoc-mokuji-title{
    font-size: 0;
    background-color: #ff7f50;/* ←テーマカラー */
    padding: 10px 0; 
    width: 100%;
}
#sidebar #rtoc-mokuji-title:before{
    font-size: 0.95rem;
    color: white;
    content: "もくじ";/* ←タイトル */
}

/* コンテンツ設定 */
#sidebar #rtoc-mokuji-wrapper ol{
    margin-top: 0px;
    padding: 1.5em 1.5em 0em 2.5em!important;
    max-height: 300px;/* ←縦の長さの最大値 */
    overflow-y: auto;/* ←最大値を超えるときスクロール */
}
#sidebar #rtoc-mokuji-wrapper ol li:last-child{
    padding-bottom: 1.5em;
}
#sidebar #rtoc-mokuji-wrapper ol ul li:last-child{
    padding-bottom: 0em;
}

/* マウスが乗った時 */
#sidebar #rtoc-mokuji-wrapper li a:hover{
    transition:0s;
    color: red;
    text-decoration: none;
}

/* マウスが離れた時 */
#sidebar #rtoc-mokuji-wrapper li a{
    transition:0s;
}
/***RTOCサイドバー追尾***/

ちなみに僕のCSSのスキルは素人同然です。

うまく出来なかった場合はごめんなさい！

逆に、もっといい方法があったら教えて下さい^^