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

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

くるみ

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カスタマイズ総まとめ】サイトをもっと魅力的に!

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

コメントを残す