芋の独り言

当ブログへのアクセスは当ブログのプライバシーポリシーに同意したものとみなします.

はてなブログの目次のデザインをちょっと変える方法

kusoimox.hatenablog.jp でやったように, はてなブログのデザイン=>デザインcssに追加で

.table-of-contents{
    position:relative;
    border:3px solid #dfe5e7;
    padding:1.5em 1.5em 1.5em 2.5em;
    margin:1.5rem 0
}
.table-of-contents:before{
    content:"目次";
    position:absolute;
    top:-1em;
    font-weight:700;
    background:#fff;
    padding:0 .5em
}
table-of-contents li{margin:0}

を書くと

test


っというように目次に”目次”と表示されるようになりました~
以上の目次は

[:content]

というようにして挿入しましたが,[:content]は自動で目次を作成して挿入するもので, たまに表示が意図したものではない時があるのと, 目次に載せたくないセクションがあった場合はそのセクションも自動的に載ってしまい, 便利ではあるがたまに使いづらくなっちゃいます.
そンな時は

<ul class="table-of-contents">
    <li><a href="#test">test</a></li>
</ul>

と書くとよいです~
その際には

# test

ではなく,

<h1 id="test">test</h1>

としましょう.
以下が以上を書いた結果です.

test

参考