JIN

JINカスタマイズ|目次に画像をプラス

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

目次にさり気なく画像を追加するカスタマイズをしてみました。

好きな画像をぶち込むことができます。それと箇条書き部分も丸い背景つけてみました。

BEFORE
カスタマイズ前


AFTER

カスタマイズ2後

MENくん
MENくん
黒い毛の羊さんがいるよ!かんわい!!
くま3号
くま3号
可愛い画像をあざとく使い始めたな

[toc]

カスタマイズの準備

子テーマを使用している方は、style.cssを開いてください。 追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

カスタマイズのコード

下記のコードを子テーマもしくは追加CSSに追記してください。

ここのコードをコピペ

コード
/*--------------------------------------
  目次 画像プラスver
--------------------------------------*/
div#toc_container:before {
  border: 2px solid;
  border-color:#424242!important;
  opacity: .3;
  background: #ececec;
}
#toc_container .toc_title:before {
  font-family: "Font Awesome\ 5 Free";
  font-weight: 600;
  margin-right: 10px;
  content: "\f02d";
  color: #fff !important;
}
#toc_container .toc_list:after {
  content: url(画像.png);
  position: absolute;
  bottom: 5px;
  right: 20px;
  opacity: .4;
}
#toc_container .toc_list > li {
  padding-left: 30px;
}
#toc_container .toc_list > li a:hover {
  text-decoration: none !important;
}
#toc_container .toc_list > li:after {
  color: white;
  background: #424242;
  border-radius: 50%;
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 0.8em;
  left: 0px!important;
  margin-top: 1px;
  letter-spacing: .5px;
}
#toc_container .toc_list > li ul {
  margin-bottom: 0px;
}
#toc_container .toc_list > li > ul > li {
  padding-left: 13px;
}
@media (min-width: 768px){
div#toc_container .toc_title {
  margin-bottom: 20px;
  margin-top: 0;
  font-size: 22px;
  background: #424242;
  padding: 0;
  line-height: 60px;
  color:white!important;
}
#toc_container .toc_list {
  padding-bottom: 20px;
}}
@media (max-width: 767px){
div#toc_container .toc_title {
  margin-bottom: 20px;
  margin-top: 0;
  font-size: 22px;
  background: #424242;
  padding: 0;
  line-height: 60px;
  color:white!important;
}
#toc_container .toc_list {
  padding-bottom: 20px;
}}

コードを説明していくよ。

メンくん
カラーを変更するとサイトになじむよ

枠線の色はここを変更

ここの枠線だよ
  border-color:#424242!important;
メンくん
#424242の部分をメインカラーにするとしっくり来るよ!枠線は薄くなるように設定しているよ。

全体の背景色はここを変更

全体の背景色
  background: #ececec;
メンくん
#ecececの部分を薄めにするとしっくり来るよ!

丸い背景はここを変更

丸背景部分
  background: #424242;
メンくん
#424242の部分をメインカラーにするとしっくり来るよ!

タイトルの背景はここを変更

background: #424242;
background: #424242;
メンくん
#424242の部分をメインカラーにするとしっくり来るよ!変更部分が2つあるのはスマホとPCようだよ!

まとめ

目次に画像を入れてみると、ニヤニヤできるのでおすすめですw

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

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