くるみ
ということで今回は
- JINを使っているが目次のデザインをもっといい感じにしたい
- デフォルトのデザインもいいけど、他のサイトと被りがちだから差別化したい
という方に向けて、そんなJINの目次を可愛くするカスタマイズ方法をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
目次の完成イメージ
記事内の目次
before
after
JINのテーマカラー(?)である紺色を基調に仕上げてみました。
幅を少し狭めることにより記事内を圧迫せず、薄い影をつけることによって少しだけ目を惹くようにしています。
もちろんその基調の色を変えることも容易なのでご安心ください。
サイドバー追従の目次
before
after
記事内の目次のデザインはもちろん踏襲しつつ、記事を読んでいる読者の目線を逸らさないように少し控えめなものにしました。
(※上の完成イメージの灰色の枠線は目次のものではありません)
JINの目次のカスタマイズ方法
手順は以下の通りです。バックアップは忘れずにしておこう
早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをオススメします。
「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

step1:「Rich Table of Contents」の設定を変更する
まず目次生成プラグイン「Rich Table of Contents」の設定を変更していきます。
「そもそもまだ目次すら作ってないよ」という場合はJIN公式の目次の作り方を参考にして、プラグインのインストールから有効化まで行ってください。
ページ下部にある「変更を保存」から保存してあげてください。
step2:CSSを追加する
次に、以下のどれかの方法でCSSのコードをコピペします。
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
くるみ
「カスタマイズするの初めてでそもそも追加の仕方が分からない…」という方は以下の記事を参考にしてみてください。

コードはこちら
/*--------------------------------------
目次(記事内)のカスタマイズ
--------------------------------------*/
.cps-post-main .rtoc-mokuji-content{
margin: 0 auto 40px;
border-radius: 10px;
border-top: 5px solid #3b4675; /* お好きな色に変更 */
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
width: 75%;
padding:20px 25px;
background-color:#fefefe;
}
.rtoc-mokuji-content #rtoc-mokuji-title{
display: block;
padding: 0px;
text-align: center;
margin:5px 25px 30px 0;
color:#3b4675; /* お好きな色に変更 */
font-size:23px;
font-weight:900;
}
.rtoc-mokuji-content #rtoc-mokuji-title:before {
font-family:"jin-icons";
content:"\e918";
display:inline-block;
margin-right: 5px;
}
#rtoc-mokuji-title button{
display:none;
}
.rtoc-mokuji-content ol{
padding:0 1.7em 0 1em;
}
.rtoc-mokuji-content ol>li:after{
content:none;
}
.rtoc-mokuji-content a {
display: block;
border-bottom: dashed 1px silver;
padding-bottom: .5em;
line-height: 1.5;
position: relative;
text-decoration:none;
}
.rtoc-mokuji-content .level-1>.rtoc-item{
font-weight: 900;
padding-bottom: .3em;
position:relative;
}
.rtoc-mokuji-content .level-1>.rtoc-item:before {
font-family:"jin-icons";
content:"\e902";
background:none!important;
left:2px;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item {
font-size: .9em;
padding:.3em 1em .1em 1.1em;
position:relative;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item:before{
background:none!important;
font-family:"jin-icons";
content:"\e904";
font-size:.1em;
position:absolute;
top:10px;
left:0px;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item a{
color:#444;
font-weight:400;
}
/* モバイル */
@media screen and (max-width: 480px) {
.cps-post-main .rtoc-mokuji-content {
padding:15px 5px;
}
.cps-post-main .rtoc-mokuji-content {
width: 95%;
}
}
/*--------------------------------------
目次(サイドバー追従)のカスタマイズ
--------------------------------------*/
#widget-tracking .rtoc-mokuji-content #rtoc-mokuji-title{
font-size:20px;
margin-bottom:25px;
}
#widget-tracking .rtoc-mokuji-content ol{
padding:0 2em 0 1.3em;
}
#widget-tracking .rtoc-mokuji-content ol>li{
padding-bottom:1em;
}
#widget-tracking .rtoc-mokuji-content .level-1>.rtoc-item:before {
position:absolute;
left:-19px;
top:2px;
font-size:.85rem;
}
#widget-tracking .rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item:before{
top:8px;
}
.cps-post-main .rtoc-mokuji-content{
margin: 0 auto 40px;
border-radius: 10px;
border-top: 5px solid #3b4675;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
width: 75%;
padding:20px 25px;
background-color:#fefefe;
}
.rtoc-mokuji-content #rtoc-mokuji-title{
display: block;
padding: 0px;
text-align: center;
margin:5px 25px 30px 0;
color:#3b4675;
font-size:23px;
font-weight:900;
}
.rtoc-mokuji-content #rtoc-mokuji-title:before {
font-family:"jin-icons";
content:"\e918";
display:inline-block;
margin-right: 5px;
}
#rtoc-mokuji-title button{
display:none;
}
.rtoc-mokuji-content ol{
padding:0 1.7em 0 1em;
}
.rtoc-mokuji-content ol>li:after{
content:none;
}
.rtoc-mokuji-content a {
display: block;
border-bottom: dashed 1px silver;
padding-bottom: .5em;
line-height: 1.5;
position: relative;
text-decoration:none;
}
.rtoc-mokuji-content .level-1>.rtoc-item{
font-weight: 900;
padding-bottom: .3em;
position:relative;
}
.rtoc-mokuji-content .level-1>.rtoc-item:before {
font-family:"jin-icons";
content:"\e902";
background:none!important;
left:2px;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item {
font-size: .9em;
padding:.3em 1em .1em 1.1em;
position:relative;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item:before{
background:none!important;
font-family:"jin-icons";
content:"\e904";
font-size:.1em;
position:absolute;
top:10px;
left:0px;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item a{
color:#444;
font-weight:400;
}
@media screen and (max-width: 480px) {
.cps-post-main .rtoc-mokuji-content {
padding:15px 5px;
}
.cps-post-main .rtoc-mokuji-content {
width: 95%;
}
}
#widget-tracking .rtoc-mokuji-content #rtoc-mokuji-title{
font-size:20px;
margin-bottom:25px;
}
#widget-tracking .rtoc-mokuji-content ol{
padding:0 2em 0 1.3em;
}
#widget-tracking .rtoc-mokuji-content ol>li{
padding-bottom:1em;
}
#widget-tracking .rtoc-mokuji-content .level-1>.rtoc-item:before {
position:absolute;
left:-19px;
top:2px;
font-size:.85rem;
}
#widget-tracking .rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item:before{
top:8px;
}
あともし「デザインを変えるのは記事内(サイドバー)の目次の方だけでいい」という場合は、「〇〇のカスタマイズ」とコメントアウトがあると思うのでいらない方のコードを消してあげればOKです。
ここまで来ればカスタマイズは終了。お疲れ様です。
くるみ
CSSの変更が反映されない場合の対処法
「CSSを追記して保存したにも関わらず反映されないぞ…」となった場合は、以下が原因であることが多いです。- キャッシュ系プラグイン
- プラウザキャッシュ
キャッシュ系プラグインを疑う
「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
Chromeをお使いの場合は以下のショートカットキーで削除できます。
Windows | [Shift]+[Ctrl]+[Delete]キー |
Mac | [shift]+[command]+[delete」キー |
まとめ
他のJINカスタマイズに関しては以下の記事でまとめているので、ぜひ参考にしてください。
JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝