概要
目次の見た目を変更できます。
記事編集の「目次」を活用し、cssのみで調整が可能です。
デモ
css
See the Pen 目次(罫線あり) by hbm-design (@hbm-design) on CodePen.
カスタマイズ
枠線の色を変更
.table-of-contents {
background: 任意の背景色;
color: 任意の文字色;
}
「目次」のカスタマイズ
「目次」の文字を変更する
.table-of-contents:before {
content: '任意の文字を入力';
}
「目次」の文字色、背景色を変更する
.table-of-contents:before {
color: #fff;
background: #000;
}
目次の罫線の色を変更
.table-of-contents li {
font-weight: 600;
border-top: 1px solid #ddd;
}
.table-of-contents > li:last-child {
border-bottom: 1px solid #ddd;
}
リンク色を変更
.table-of-contents a {
color: 任意の文字色;
}