くるみ
- SANGOの目次を可愛くかつ見やすくカスタマイズしたい
- 他のサイトと目次のデザインが被りやすい…なんだかなぁ
という方に向けて「SANGOの目次をスッキリ見やすくするカスタマイズ方法」をまとめました。
本記事を参考にすれば、コピペだけで記事内の目次を一段階おしゃれにすることができます。
お品書き
目次の完成イメージ
オレンジver
カスタマイズ後の目次のイメージは上の通り。ウチのデザインそのまんまです。
SANGOカラーver
SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。
くるみ
カスタマイズの内容は以下の通り。
- 各見出し前にアイコンをつけて可愛く
- 区切り線をつけて見やすいように
- 幅を狭くしてスッキリ
デフォルトのものだと幅が広く記事を圧迫している印象があったのでスタイリッシュにしてみました。
SANGOの目次のカスタマイズ方法
手順はいたってシンプルかつ簡単です。「上の完成イメージとは違う色合いにしたい」という場合はstep2も行う必要があります。
バックアップを忘れずに
早速カスタマイズしていきたいところですが、万が一の事態に備え事前にバックアップを取っておくことをオススメします。
「バックアップとかそもそもどうやるの?」という場合は以下の記事を参考にしてみてください。

step1:CSSコードをコピペする
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

オレンジverのコード
#toc_container{
margin:0 auto;
border:0;
border-radius:10px;
border-top: 5px solid!important;
border-top-color: #f8c678!important;/*上のボーダーの色*/
box-shadow: 0 2px 2px rgba(0,0,0,.2)!important;/*表の影*/
width:87%!important;
}
@media screen and (min-width:600px){
#toc_container{
width:70%!important;
}
}
.toc_title{
display:block!important;
padding:0px!important;
text-align:center;
margin-right:15px!important;
color:#f8c678!important; /*タイトルの色*/
}
.toc_title:before{
position:relative!important;
font-size:.9em!important;
width:45px!important;
height:45px!important;
margin-right:5px;
background-color:#f8c678!important;/*タイトルのアイコンの背景色*/
}
.toc_list a{
color:#333;/*文字色*/
display: block;
border-bottom: dashed 1px silver;
padding-bottom: .5em;
font-weight: 700;
line-height: 2;
position: relative;
}
.toc_list li{
font-weight: 700;
line-height: 1.5;
position: relative;
padding:.3em 1em .1em 1.1em!important;
list-style: none!important;
}
.toc_list> li>a{
padding-bottom:.3em;
}
.toc_list li:before{
font-family: "Font Awesome 5 Free"!important;
content: "\f138";
position:absolute;
left: -.4em!important;
color: #f8c678;/*アイコンの色*/
font-weight: 900;
top: .4em;
}
.toc_list li ul a{
font-weight: 400!important;
font-size:.9em;
padding-top:0em;
padding-bottom:.2em;
}
.toc_list li ul li:before{
content: "\f105";
left: 0em!important;
font-size: 1.2em;
top: .2em;
}
#toc_container{
margin:0 auto;
border:0;
border-radius:10px;
border-top: 5px solid!important;
border-top-color: #f8c678!important;
box-shadow: 0 2px 2px rgba(0,0,0,.2)!important;
width:87%!important;
}
@media screen and (min-width:600px){
#toc_container{
width:70%!important;
}
}
.toc_title{
display:block!important;
padding:0px!important;
text-align:center;
margin-right:15px!important;
color:#f8c678!important;
}
.toc_title:before{
position:relative!important;
font-size:.9em!important;
width:45px!important;
height:45px!important;
margin-right:5px;
background-color:#f8c678!important;
}
.toc_list a{
color:#333;
display: block;
border-bottom: dashed 1px silver;
padding-bottom: .5em;
font-weight: 700;
line-height: 2;
position: relative;
}
.toc_list li{
font-weight: 700;
line-height: 1.5;
position: relative;
padding:.3em 1em .1em 1.1em!important;
list-style: none!important;
}
.toc_list> li>a{
padding-bottom:.3em;
}
.toc_list li:before{
font-family: "Font Awesome 5 Free"!important;
content: "\f138";
position:absolute;
left: -.4em!important;
color: #f8c678;
font-weight: 900;
top: .4em;
}
.toc_list li ul a{
font-weight: 400!important;
font-size:.9em;
padding-top:0em;
padding-bottom:.2em;
}
.toc_list li ul li:before{
content: "\f105";
left: 0em!important;
font-size: 1.2em;
top: .2em;
}
SANGOカラーverのコード
#toc_container{
margin:0 auto;
border:0;
border-radius:10px;
border-top: 5px solid!important;
border-top-color: #92ccfb!important;/*上のボーダーの色*/
box-shadow: 0 2px 2px rgba(0,0,0,.2)!important;/*表の影*/
width:87%!important;
}
@media screen and (min-width:600px){
#toc_container{
width:70%!important;
}
}
.toc_title{
display:block!important;
padding:0px!important;
text-align:center;
margin-right:15px!important;
color:#92ccfb!important; /*タイトルの色*/
}
.toc_title:before{
position:relative!important;
font-size:.9em!important;
width:45px!important;
height:45px!important;
margin-right:5px;
background-color:#92ccfb!important;/*タイトルのアイコンの背景色*/
}
.toc_list a{
color:#333;/*文字色*/
display: block;
border-bottom: dashed 1px silver;
padding-bottom: .5em;
font-weight: 700;
line-height: 2;
position: relative;
}
.toc_list li{
font-weight: 700;
line-height: 1.5;
position: relative;
padding:.3em 1em .1em 1.1em!important;
list-style: none!important;
}
.toc_list> li>a{
padding-bottom:.3em;
}
.toc_list li:before{
font-family: "Font Awesome 5 Free"!important;
content: "\f138";
position:absolute;
left: -.4em!important;
color: #92ccfb;/*アイコンの色*/
font-weight: 900;
top: .4em;
}
.toc_list li ul a{
font-weight: 400!important;
font-size:.9em;
padding-top:0em;
padding-bottom:.2em;
}
.toc_list li ul li:before{
content: "\f105";
left: 0em!important;
font-size: 1.2em;
top: .2em;
}
#toc_container{
margin:0 auto;
border:0;
border-radius:10px;
border-top: 5px solid!important;
border-top-color: #92ccfb!important;
box-shadow: 0 2px 2px rgba(0,0,0,.2)!important;
width:87%!important;
}
@media screen and (min-width:600px){
#toc_container{
width:70%!important;
}
}
.toc_title{
display:block!important;
padding:0px!important;
text-align:center;
margin-right:15px!important;
color:#92ccfb!important;
}
.toc_title:before{
position:relative!important;
font-size:.9em!important;
width:45px!important;
height:45px!important;
margin-right:5px;
background-color:#92ccfb!important;
}
.toc_list a{
color:#333;
display: block;
border-bottom: dashed 1px silver;
padding-bottom: .5em;
font-weight: 700;
line-height: 2;
position: relative;
}
.toc_list li{
font-weight: 700;
line-height: 1.5;
position: relative;
padding:.3em 1em .1em 1.1em!important;
list-style: none!important;
}
.toc_list> li>a{
padding-bottom:.3em;
}
.toc_list li:before{
font-family: "Font Awesome 5 Free"!important;
content: "\f138";
position:absolute;
left: -.4em!important;
color: #92ccfb;
font-weight: 900;
top: .4em;
}
.toc_list li ul a{
font-weight: 400!important;
font-size:.9em;
padding-top:0em;
padding-bottom:.2em;
}
.toc_list li ul li:before{
content: "\f105";
left: 0em!important;
font-size: 1.2em;
top: .2em;
}
step2:お好みの色にカスタマイズする
ここは「上の完成イメージとは違う色合いにしたい」という方向け。
コピペしたCSSの「/*〇〇色*/」とあるところのカラーコードを、それぞれお好みの色にしてください。
色の調整も終わればカスタマイズは終了。
くるみ
CSSの変更が反映されない場合
「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。キャッシュ系プラグイン
「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
Chromeをお使いの場合は
Windows | [Shift]+[Ctrl]+[Delete]キー |
Mac | [shift]+[command]+[delete」キー |
上のショートカットキーで削除できます。
まとめ
「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
Hello Poteto!
I am a website owner from Taiwan (using SANGO theme)
I am really like your 「サイドバー(sidebar) 目次(toc)」 And「パンくず(Breadcrumb)」style,
like these image:
https://i.imgur.com/g6jK10o.png
https://i.imgur.com/wEXyPOj.png
Can you teach me how to do it?
Thank you 🙂
Sorry for my bad Japanese language
I used Google Japanese translation
Hope you can understand 〒.〒
Mike
——————
こんにちはポテト!
私は台湾のウェブサイトの所有者です(SANGOテーマを使用)
私は本当にあなたのサイドバー(サイドバー)スナップ(toc)スタイルのようです、
画像のように
https://i.imgur.com/g6jK10o.png
https://i.imgur.com/wEXyPOj.png
やり方を教えてもらえますか?
ありがとうございました :)
申し訳ありませんが、私は日本語が上手ではありません。
Google日本語翻訳を使用しました。〒.〒
Mike
Mr. Mike
Thank you for your comment.
【About the breadcrumb trail】
I think that it will be the same design if you add the following code.
—————
.single #breadcrumb, .tape {
border-left: 2px dotted rgba(0, 0, 0, .1);
border-right: 2px dotted rgba(0, 0, 0, .1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
color: #f8c678;/* Favorite color */
font-weight: 600;
}
.single #breadcrumb {
transform: rotate(-10deg) translate(-4em, -1.3em);
padding: .5em 1.5em .4em 1.5em!important;
background-color: rgba(246, 246, 246, .1)!important;
display: inline-block;
}
#breadcrumb li a, #breadcrumb li:after {
color: #F29A16;/* Favorite color */
}
#breadcrumb li:first-child a:before {
padding-right: 5px;
font-size: 1.4em;
content: “\f3c5”;
vertical-align: -10%;
opacity: .6;
}
#breadcrumb li:last-child:after{
display:none;
}
#breadcrumb li:after {
opacity: .6;
}
—————
【About the table of contents that follows the sidebar】
I’m currently writing an article about how to customize the sidebar-following table of contents on this site, and I’ll publish it in the future.(although it’s unclear when)
It is a little difficult to tell here about the volume of customization, so
If you don’t mind, please wait until the publication and refer to the article as soon as it is published …!
Thank you for your cooperation.
(It may be unnatural English because it uses Google Translate.)
こんにちはポテト!
Hello Poteto
Thank you very much for the teaching (*´∀`)~♥
I am looking forward to【Table of contents that follows the sidebar】
This is what I really want to know! Looking forward to your article
Thanks a lot
———
教えていただいてありがとうございました(*´∀`)~♥。
【サイドバーに続く目次】がとても楽しみです。
これが本当に知りたいことなんです!!! 記事を楽しみにしています
ありがとうございました