JIN

JINカスタマイズ|目次を可愛くしてみた

目次を可愛くカスタマイズ

カスタマイズは自己責任にてお願いします(カスタマイズ前にバックアップ推奨)。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

この記事では

〇〇をカスタマイズしてみました。


Before
前


After
後


MENくん
MENくん
無駄に長かった目次をシュッとさせてみたよ
くま3号
くま3号
このデザイン、、、SANGOの影響受けすぎやろ

カスタマイズの準備

子テーマを使用している方は、style.cssを開いてください。

追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

TOC+の設定

このカスタマイズは目次を常に開いているのが前提です。

こちらのチェックを外しておいてください。

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^)/*/
}

 

MENくん
MENくん
えへへ、細部をこだわったら長くなっちゃった
くま3号
くま3号
許す!
コメントなしのコード

/** 目次のカスタマイズ **/
@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;
}

 

カラーを変更したい場合

色を変更する際は赤文字部分を好きなカラーコードにしましょう。

まとめ

ちょっとしたカスタマイズなので、特にありません。

MENくん
MENくん
くま!目次が可愛くなったよ!!!
くま3号
くま3号
だから?

 

SANGOのメインカスタマイズ(?)サイトはこちら


ここにボックスタイトルを入力

 

関連記事