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

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

この記事では

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

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

BEFORE

AFTER

MENくん

黒い毛の羊さんがいるよ！かんわい！！

くま３号

可愛い画像をあざとく使い始めたな

[toc]

Contents

カスタマイズの準備
カスタマイズのコード
まとめ

カスタマイズの準備

子テーマを使用している方は、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;
}}

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