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>
としましょう.
以下が以上を書いた結果です.