それわかるぅ〜

日々「それわかるぅ〜」と思ったこと、忘れたくないことを徒然なるままに。Inputした情報を定着させるためのOutputの場として使用しています。誤字脱字等はたぶん仕様です。

はてなブログの目次をカッコよく(?)付ける方法

目次

はじめに

Markdownではてなブログで目次を付ける方法なのですが、 はてなブログが進化したっぽいので、前にも記事にしていた点をまとめ直します。
ちなみに過去の記事はこちら

emeraldwar.hatenablog.com

はてなブログに目次を付ける方法!

前回はHTMLの基本に忠実に、アンカーリンクを貼って目次を作る方法をメモしていたのですが、 なんとはてなブログでは、Markdown編集時に、

[:contents]

と、書くだけで勝手に目次を作ってくれるようになったみたいです。 これなら誰でも簡単に目次を作れるのですが、それだけではあまりに簡単なので、もう一手間かけてせめて枠をつけたい。 というわけではてなブログの目次に枠を付ける方法をメモしておきます。 といってもコピペしてちょっといじるだけですぐ終わりますが。

枠をつける(カスタマイズする)方法!

/*目次のデザイン*/
.table-of-contents {
    /*color:#ffffff;マーカーの色*/
    background: #212121;/*背景色*/
    padding: 45px;
    border: 1px #ccc solid; /*枠*/
    /*box-shadow: 0 2px 3px 0 #ddd; 影*/
}

はてなブログの設定の「デザイン」>「カスタマイズ」>「デザインCSS」の部分に貼り付けて、各自色等を調整する。

以上!!

簡単です。ちなみに、冒頭で紹介した目次はHTMLのuIクラスのtable-of-contentsに対応しているので、これをCSSでカスタマイズすれば良い感じです。

自分はフラットデザインライクにしたかったので敢えて枠をつけずに背景色だけにしています。

出来上がりはこんな感じです。

emeraldwar.hatenablog.com