※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

副業

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

RTOCサイドバー追尾

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

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

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

RTOCサイドバー追尾
最初のH2タグの直前に目次が表示されます。

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

RTOCサイドバー追尾

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

RTOCサイドバー追尾

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

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

RTOCのサイドバー追尾手順
  • STEP1
    「外観」→「ウィジェット」を選択
    RTOCサイドバー追尾
  • STEP2
    「サイドバー追尾【PC】」に「テキスト」をドラッグ
    RTOCサイドバー追尾
  • STEP3
    ショートコードを貼り付け

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

    RTOCサイドバー追尾
  • STEP4
    「保存」をクリック
    RTOCサイドバー追尾

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

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

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

RTOCサイドバー追尾

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

RTOCサイドバー追尾

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

RTOCサイドバー追尾
気になると言えば気になるね
できることならデザインを合わせたい!

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

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

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

RTOCサイドバー追尾
RTOCサイドバー追尾

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

RTOCサイドバー追尾

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

/***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のスキルは素人同然です。

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

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

RTOCのサイドバー追尾|まとめ

以上、RTOCをJINでサイドバー追尾する方法でした。

先ほどのコードを貼り付けた結果は、本記事サイドバー追尾で表示されているとおり^^

この記事が少しでも皆さんのお役に立てれば幸いです。

最後まで読んでくださり、ありがとうございました。

以上です。