こんにちは、キザルです。
WordPressのテーマは「JIN」を使っています^^
ということにずっとモヤモヤしていましたが、ついに解決しました。
functions.phpは触らずに追加CSSだけでRTOCのサイドバー追尾を整えることができました。
今回は自分の備忘録も兼ねて、そのコードを共有したいと思います^^
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サイドバー追尾](https://yuru-fire.com/wp-content/uploads/2021/03/RTOCサイドバー追尾01.png)
WordPress管理画面の「RTOC設定」から細かい設定も可能ですよ。
![RTOCサイドバー追尾](https://yuru-fire.com/wp-content/uploads/2021/03/RTOCサイドバー追尾02.png)
また「RTOC設定」→「ショートコード」で作成できるショートコードを貼り付けて、好きな場所に目次表示もできます。
![RTOCサイドバー追尾](https://yuru-fire.com/wp-content/uploads/2021/03/RTOCサイドバー追尾03.png)
RTOCをサイドバー追尾にする手順
RTOCはサイドバーに追尾させることもできます。
-
STEP1「外観」→「ウィジェット」を選択
-
STEP2「サイドバー追尾【PC】」に「テキスト」をドラッグ
-
STEP3ショートコードを貼り付け
「RTOC設定」→「ショートコード」より取得したショートコードを貼り付けます。
-
STEP4「保存」をクリック
以上でRTOCのサイドバー追尾ができます。
サイドバー追尾で気になる点
RTOCのサイドバー追尾で気になる点は、サイドバーのデザインとフィットしないところ^^;
![RTOCサイドバー追尾](https://yuru-fire.com/wp-content/uploads/2021/03/RTOCサイドバー追尾08.png)
このときタイトルを入れるとデザイン的には整合しますが、もともとあるタイトルと被っちゃいますね^^;
![RTOCサイドバー追尾](https://yuru-fire.com/wp-content/uploads/2021/03/RTOCサイドバー追尾09.png)
あとH2のないトップページやカテゴリページで、空っぽのテキストが表示されたりします。
![RTOCサイドバー追尾](https://yuru-fire.com/wp-content/uploads/2021/03/RTOCサイドバー追尾10.png)
追加CSSでサイドバー追尾のRTOCをカスタマイズ
ということで、RTOCをサイトバー追尾で綺麗に表示できるようにカスタマイズしてみました。
「外観」→「カスタマイズ」→「追加CSS」に下記コードをコピペするだけでOKです。
![RTOCサイドバー追尾](https://yuru-fire.com/wp-content/uploads/2021/03/RTOCサイドバー追尾11.png)
![RTOCサイドバー追尾](https://yuru-fire.com/wp-content/uploads/2021/03/RTOCサイドバー追尾12.png)
ただし、このコードはJINのサイドバーデザインのスタイル6に合わせたものです。
![RTOCサイドバー追尾](https://yuru-fire.com/wp-content/uploads/2021/03/RTOCサイドバー追尾13.png)
使える人はかなり限定的になりそうですね^^;
/***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サイドバー追尾***/
RTOCのサイドバー追尾|まとめ
以上、RTOCをJINでサイドバー追尾する方法でした。
先ほどのコードを貼り付けた結果は、本記事サイドバー追尾で表示されているとおり^^
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでくださり、ありがとうございました。
以上です。