【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:normal; /* 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; /*アンダーライン調整*/
}
表示例
Cocoon設定 -[目次]の設定
・表示条件:2つ以上見出しがあるとき
・目次表示の深さ:H4見出しまで(H2〜H4)

h2見出し①h2見出し①h2見出し①

h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容

h3見出し①h3見出し①h3見出し①

h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容

h4見出し①h4見出し①h4見出し①

h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容

h5見出し①h5見出し①h5見出し①

h5は目次に表示されない

h6見出し①h6見出し①h6見出し①

h6は目次に表示されない

h3見出し②h3見出し②h3見出し②

h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容

h4見出し②h4見出し②h4見出し②

h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容

h5見出し②h5見出し②h5見出し②

h5は目次に表示されない

h6見出し②h6見出し②h6見出し②

h6は目次に表示されない

h4見出し③h4見出し③h4見出し③

h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容

h5見出し③h5見出し③h5見出し③

h5は目次に表示されない

h6見出し③h6見出し③h6見出し③

h6は目次に表示されない

h2見出し④h2見出し④h2見出し④

h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容h2の内容

h3見出し④h3見出し④h3見出し④

h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容h3の内容

h4見出し④h4見出し④h4見出し④

h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容h4の内容

 

タイトルとURLをコピーしました