はてなブログの書き方 - 目次の装飾をしてみた - ねこさんとへびさんの新人技術ブログ

はてなブログには見出しから目次を生成する「目次記法」という機能があります。

staff.hatenablog.com

この記法で目次を生成すると、記事内に下の画像のような目次が表示されます。
f:id:tksptan:20180412184610j:plain

デザインが「何だかな」だったので変更してみました。

開発ツールなどで見出し部分のHTMLを見て、目次のCSSにtable-of-contentsクラスが当てられていることを確認します。

<ul class="table-of-contents">
    <li><a href="#第三回ねこへび勉強会-CSS入門">第三回　ねこへび勉強会 CSS入門</a></li>
    <li><a href="#id1">1.CSSの書き方</a></li>
    <li><a href="#id2">2.idとclass</a></li>
    <li><a href="#id3">3.CSSの書式</a></li>
    <li><a href="#id4">4.ブロック要素とインライン要素</a></li>
    <li><a href="#id5">5.marginとpadding</a></li>
    <li><a href="#id6">6.1～5の知識を使って見出しを作ってみよう</a></li>
</ul>

次に、管理画面のサイドメニューの「デザイン」から、table-of-contentsクラスを上書きするCSSを追加します。

[手順]
デザイン→スパナアイコン→デザインCSS

f:id:tksptan:20180412184649j:plain

ここに.table-of-contents{}を追加。
ただtable-of-contentsクラスが目次以外にも使われていたら、他に影響がでてくる可能性があります。
その対策として、目次のtable-of-contentsクラスであることを明示する親クラスを追加しました。

<div class="mytopic">
[:contents]
</div>

 .mytopic .table-of-contents  {
  background: #fcfcfc;/*背景色*/
  padding: 10px 10px 10px 30px !important;/*ボックス内の余白*/
  margin: 5px 0 !important;
  border: solid 3px gray;/*線の種類 太さ 色*/
  list-style:none;
}