【Cocoon】目次をカスタマイズ

Cocoon Child: スタイルシート（style.css）に追加

/* 目次のカスタマイズ SANGO風 FontAwesome 5 Free */
/* 目次全体デザイン */
.toc{
background-color:rgba(249,249,249,0.5); /* 目次全体の背景色を変える場合はここを変更 */
border: 1px solid rgba(0,0,0,0.8);
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
padding: 25px 25px 20px 25px;
margin-left: auto;
margin-right: auto;
margin-bottom: 3em;
}
/* 目次の文字指定 */
.toc-title {
text-align:center;
margin: 0 20px 20px -10px;
padding-left: -20px;
font-size: 22px;
font-weight: 700;
color: rgba(0,0,0,0.8); /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
top: 0;
left: -45px;
width: 50px;
height: 50px;
font-family: "Font Awesome 5 Free";
content : "\f03a"; /* アイコンを変える場合はここを変更 */
font-size:20px;
margin-right:5px;
color:#FFF; /* アイコンの色を変える場合はここを変更 */
background-color:rgba(0,0,0,0.8); /* アイコンの背景色を変える場合はここを変更 */
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.5em 0 0 1.0em;
list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
font-family: "Font Awesome 5 Free";
content: "\f138"; /* アイコンを変える場合はここを変更 */
position: absolute;
left : 0.0em;
color: rgba(0,0,0,0.8); /* 色を変える場合はここを変更 */
font-weight: bold;
}
.toc-content ol li:last-of-type {
border-bottom: none;
}
.toc-content .toc-list li {
font-weight:bold; /* h2を太文字にするとき：font-weight:700; */
}
.toc-content .toc-list li li {
font-weight:normal; /* h3以降の文字サイズを普通に */
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
border-bottom: 1px solid #c0c0c0; /*h2のアンダーラインの太さとカラー font-weight: bold;*/
}
.toc ul li a, .toc ol li a {
display: block;
border-bottom: 1px dashed #c0c0c0; /*h3～h6のアンダーラインの太さとカラー*/
margin: 0 5px 5px 0px; /*アンダーライン調整*/
padding: 0 0 5px 0; /*アンダーライン調整*/
}

表示例

h2見出し

h2の内容

h3見出し

h3の内容

h4見出し

h4の内容

h5見出しは見出しに表示されない設定

h5は目次に表示されない

h6見出しは見出しに表示されない設定

h6は目次に表示されない

h3見出し

h3の内容

h4見出し

h4の内容

h5見出しは目次に表示されない設定

h5は目次に表示されない

h6見出しは目次に表示されない設定

h6は目次に表示されない

h4見出し

h4の内容

h5見出しは目次に表示されない設定

h5は目次に表示されない

h6見出しは目次に表示されない設定

h6は目次に表示されない

h2見出し

h2の内容

h3見出し

h3の内容

h4見出し

h4の内容

【Cocoon】コピペだけでWordPressの目次を可愛くカスタマイズ！

本記事では無料WordPressテーマ「Cocoon」の目次をオシャレにカスタマイズする方法を紹介しています。有料テーマ「SANGO」っぽく可愛いデザインにしたい方は必見です！

y-k-studio.com