Cocoonの目次に画像を入れるカスタマイズ

/* 目次全体デザイン */
.toc{ background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */ border:none; display:block; border-top:5px solid; border-top-color:#ffb1d8; box-shadow: 0 2px 2px rgba(0,0,0,0.2); padding: 20px 25px;
background: url(※STEP4) right bottom no-repeat;
background-size: 50px;/* 画像の大きさ(好きに指定してください) */
}
/* 目次の文字指定 */
.toc-title { text-align:left; margin: 0 20px 20px -10px; padding-left: -20px; font-size: 23px; font-weight: 700; color: #ffb1d8; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before { top: 0; left: -45px; width: 50px; height: 50px; font-family: FontAwesome; content : "\f0ca"; /* アイコンを変える場合はここを変更 */ font-size:20px; margin-right:5px; color:#FFF; /* アイコンの色を変える場合はここを変更 */ background-color:#ffb1d8;/* アイコンの背景色を変える場合はここを変更 */ border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol { padding: 0 0.5em; position: relative;
}
.toc-content ol li { line-height: 1.5; padding: 0.7em 0 0.5em 1.4em; border-bottom: dashed 1px silver; list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before { font-family: FontAwesome; content: "\f138"; /* アイコンを変える場合はここを変更 */ position: absolute; left : 0.5em; color: #ffb1d8;/* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type { border-bottom: none;
}
.toc-content .toc-list li { font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li { font-weight:normal; /* h3以降の文字サイズを普通に */
}