目次(枠線)

概要

目次の見た目を変更できます。
記事編集の「目次」を活用し、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 a {
  color: 任意の文字色;
}