読者です 読者をやめる 読者になる 読者になる

はてなブログで目次を表示するようにしました

はてなブログの設定変更履歴メモ第一弾。

ブログの記事内に目次を入れる方法です。ということで、この下にも目次を入れてみます。

目次の入れ方(公式より)

staff.hatenablog.com

記事中に以下を書けば良いとのこと。

[:contents]

記事中のヘッダータグである <h2>, <h3> などを拾ってきて目次にしてくれます。

目次のデザインは独自CSSでカスタマイズ

[:contents] だと、普通の <ul>, <li> で表示されるだけで、装飾はありません。 そこで、みなさん独自にCSSの追加などをなされているようです。

独自CSSの追記場所は、はてなブログの管理画面から以下のようにしてたどります。うーん、深ケー。

[ダッシュボード] > 左サイドバーの[デザイン] > 左サイドバーのレンチアイコン > 左サイドバーの[デザインCSS]

実際に使ったCSS

bunoshi.hateblo.jp

こちらのサイトさんで紹介されております。 CSSもそのまま乗っかっているので、丸っと使わせていただきました。 ありがたや~。

CSSは追々カスタマイズすると思うんですが、上記サイト様のデザインが気に入っているのでしばらくこのままになりそうです。

他にも、 jQuery の SmoothScroll を使う方法を紹介しているサイトもあったりと、みなさん色々工夫されているようです。 まあ、個人的にはそこまで要らないかなー、と思ってここまでやったところで終了としております。