...

【SANGO】目次をスッキリ見やすくするカスタマイズ方法

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

どうもおはようポテト(@ohayoupoteto22)です。

SANGOの目次もう少し見やすくできないかな…?

ということで今回は

「SANGOの目次を可愛くかつ見やすくカスタマイズしたい」

「他のサイトと目次のデザインが被りやすい…なんだかなぁ」

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

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

ブログ主

早速いってみよう!

目次の完成イメージ

オレンジver

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

SANGOカラーver

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

好きな方を選んでね!

ソロモン

簡単にカスタマイズの内容を説明すると…

各見出し前にアイコンをつけて可愛く

区切り線をつけて見やすいように

幅を狭くしてスッキリ

こんな感じです。

バックアップを忘れずに

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

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでのCSSのバックアップの取り方【WordPress】CSSをカスタマイズする際のバックアップの取り方

ブログ主

備えあれば何とやらだね

カスタマイズ手順

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

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

「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更してみてください。

レッツゴー!

ソロモン

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

CSSコードをコピペする

「追加CSS」に追加

「テーマエディター」を使って追加

FTPソフトを使って追加

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

ブログ主

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

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

WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSコードを追加する3つの方法

オレンジ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;
}

お好みの色にカスタマイズする

ここは「上の完成イメージとは違う色合いにしたい」という方向け。

コピペしたCSSの「/*〇〇色*/」とあるところのカラーコードを、それぞれお好みの色にしてください。

 

色の調整も終わればカスタマイズは終了。お疲れ様です!

お疲れ様!

ソロモン

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は

Windows :[Shift]+[Ctrl]+[Delete]キー

Mac:[shift]+[command]+[delete」キー

上のショートカットキーで削除できます。

まとめ

以上、SANGOの目次カスタマイズ方法でした。

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

コピペでできるSANGOのカスタマイズまとめ【他と差をつける】SANGOの魅力的なカスタマイズまとめ

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

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA