カスタマイズは自己責任にてお願いします（カスタマイズ前にバックアップ推奨）。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。
〇〇をカスタマイズしてみました。
カスタマイズの準備
子テーマを使用している方は、style.cssを開いてください。
追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。
TOC+の設定
このカスタマイズは目次を常に開いているのが前提です。
こちらのチェックを外しておいてください。
手順：WordPressダッシュボード＞設定＞TOC+＞「ユーザーによる目次の表示・非表示を切り替えを許可」部分のチャックを外す。
カスタマイズコードの追加
下記のコードを追記してください。
/** 目次のカスタマイズ **/
@media (min-width: 768px){/*pc表示の設定*/
#toc_container .toc_title {/*タイトル部分*/
margin-bottom: 20px;/*外側下の余白*/
margin-top: 0;/*外側上の余白*/
font-size: 22px;/*文字の大きさ*/
background: #949494;/*背景色*/
padding: 0;/*内側の余白を0に*/
line-height: 60px;/*行の高さ*/
color:white!important;/*文字色*/
}
#toc_container .toc_list {/*コンテンツ部分*/
padding-bottom: 20px;/*内側下の余白*/
}}
/**** ↓ここから スマホ表示でも同じ設定 ****/
@media (max-width: 767px){
#toc_container .toc_title {
margin-bottom: 20px;
margin-top: 0;
font-size: 22px;
background: #949494;
padding: 0;
line-height: 60px;
color:white!important;
}
#toc_container .toc_list {
padding-bottom: 20px;
}}
/**** ↑ここまで同じ ****/
div#toc_container:before {/*枠線・背景の設定*/
border: 2px solid;/*枠線の太さと種類*/
border-color: #949494!important;/*枠線の色*/
opacity: 1;/*透明度*/
background: #FFFCF0;/*背景色*/
}
div#toc_container .toc_list > li a:hover {/*マウスホバーのとき*/
text-decoration: none !important;/*下線が出ないように*/
}
p.toc_title:before {/*アイコンを追加*/
content: "\f02d";/*アイコンの種類*/
font-family: "Font Awesome\ 5 Free";
font-weight:600;/*太文字*/
margin-right: 10px;/*外側右方向の余白*/
color: #fff !important;/*アイコンの色*/
}
#toc_container .toc_list > li {/*h2見出し部分*/
padding-left: 30px;/*内側左の余白*/
}
#toc_container .toc_list > li:after {/*h2の前の数字*/
color: #424242b3;/*数字の色*/
}
#toc_container .toc_list > li > ul > li {/*h3見出し部分*/
padding-left: 14px;/*もっと左に寄れってばよ＼(^o^)／*/
}
/** 目次のカスタマイズ **/
@media (min-width: 768px){
#toc_container .toc_title {
margin-bottom: 20px;
margin-top: 0;
font-size: 22px;
background: #949494;
padding: 0;
line-height: 60px;
color:white!important;
}
#toc_container .toc_list {
padding-bottom: 20px;
}}
@media (max-width: 767px){
#toc_container .toc_title {
margin-bottom: 20px;
margin-top: 0;
font-size: 22px;
background: #949494;
padding: 0;
line-height: 60px;
color:white!important;
}
#toc_container .toc_list {
padding-bottom: 20px;
}}
div#toc_container:before {
border: 2px solid;
border-color: #949494!important;
opacity: 1;
background: #FFFCF0;
}
div#toc_container .toc_list > li a:hover {
text-decoration: none !important;
}
p.toc_title:before {
content: "\f02d";
font-family: "Font Awesome\ 5 Free";
font-weight:600;
margin-right: 10px;
color: #fff !important;
}
#toc_container .toc_list > li {
padding-left: 30px;
}
#toc_container .toc_list > li:after {
color: #424242b3;
}
#toc_container .toc_list > li > ul > li {
padding-left: 14px;
}
カラーを変更したい場合
色を変更する際は赤文字部分を好きなカラーコードにしましょう。
まとめ
ちょっとしたカスタマイズなので、特にありません。
SANGOのメインカスタマイズ（？）サイトはこちら
