【SANGO】目次のデザインをよりお洒落にするカスタマイズ方法

SANGOの目次のカスタマイズ方法

SHARE

くるみ

SANGOの目次もう少し見やすくできないかな…?
ということで今回は

  • SANGOの目次を可愛くかつ見やすくカスタマイズしたい
  • 他のサイトと目次のデザインが被りやすい…なんだかなぁ

という方に向けて「SANGOの目次をスッキリ見やすくするカスタマイズ方法」をまとめました。

本記事を参考にすれば、コピペだけで記事内の目次を一段階おしゃれにすることができます。

目次の完成イメージ

オレンジver

SANGOの目次のオレンジverの完成イメージ

カスタマイズ後の目次のイメージは上の通り。ウチのデザインそのまんまです。

SANGOカラーver

SANGOの目次の水色verの完成イメージ

SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。

どっちにしようか迷うんだけど

くるみ

カスタマイズの内容は以下の通り。

  • 各見出し前にアイコンをつけて可愛く
  • 区切り線をつけて見やすいように
  • 幅を狭くしてスッキリ

デフォルトのものだと幅が広く記事を圧迫している印象があったのでスタイリッシュにしてみました。

注意
本記事のカスタマイズは「Table of Contents Plus」の目次専用になります。別の目次プラグインを利用している場合は反映されないのでご注意ください。

SANGOの目次のカスタマイズ方法

手順はいたってシンプルかつ簡単です。

手順
step1
CSSコードをコピペする
step2
お好みの色にカスタマイズする

「上の完成イメージとは違う色合いにしたい」という場合はstep2も行う必要があります。

バックアップを忘れずに

早速カスタマイズしていきたいところですが、万が一の事態に備え事前にバックアップを取っておくことをオススメします。

「バックアップとかそもそもどうやるの？」という場合は以下の記事を参考にしてみてください。

WordPressでのCSSのバックアップの取り方【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法

step1：CSSコードをコピペする

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加

以上のどれかの方法でカスタマイズコードをコピペします。

「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する方法を徹底解説

オレンジ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の目次カスタマイズ方法でした。

「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。

【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に！【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に！

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝

3 COMMENTS

Mr. Mike

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.)

返信する
Mr. Mike

こんにちはポテト！
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
———
教えていただいてありがとうございました(*´∀`)~♥。
【サイドバーに続く目次】がとても楽しみです。
これが本当に知りたいことなんです!!! 記事を楽しみにしています
ありがとうございました

返信する

Mr. Mike へ返信する コメントをキャンセル

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。

前の記事

CSSだけでタブ機能を実装する方法
【CSSだけでOK】切り替え可能なタブメニューを実装する方法

次の記事

【SANGO】内部リンクに「続きを読む」を入れるカスタマイズ
SANGOの内部リンクのカスタマイズ方法