AIUEO Lab2

1年のうち250日は夕飯を作る主夫が、iPhoneや料理、気になったものを紹介するブログです。

はてなブログカスタマイズ 記事に「目次」を追加しました

mokuji

私のブログはレシピを集めたり、私が「便利だなー」と思ったサービスや情報をまとめる記事が多いです。

そんな記事を書くときには、見出しでレシピ名を書いたり、サービス名を書いたりします。そして、情報が増えすぎて見づらくなった時は見出しにジャンプできる目次を記事の中に作るんだけど……これって意外と面倒くさい!

mac_ss_2015-01-20_15_17_45

昨日の記事の目次はこんな感じ

見出しにジャンプできるようにするには、見出しにもタグを追加して、目次もリストで並ぶように作って……いつも面倒で、時間がない時は目次を作らないこともしょっちゅうありました。

読者の立場で考えると、情報が多い記事は目次があった方が絶対見やすいのにー!とわかっていながらやらないズボラな私。

でも、そんなズボラな私に救世主が!

自動的に目次をつけてくれる機能追加

http://goule.hatenablog.com/entry/2014/12/11/224853

http://goule.hatenablog.com/entry/2014/12/11/224853

こちらで紹介されているjQueryプラグインを導入すれば、はてなブログの記事に目次が挿入されます。

自分で目次の位置を調整したい時も大丈夫。

デフォルトでは記事の頭に挿入するようになっていますが、記事内に『<div class="love_toc"></div>』というタグを設置することで、任意の場所に挿入可能です。

挿入したくない場合はloveをhateに変えてどこかに挿入すればOK。

大変分かりやすくて、便利な機能!ありがたく使わせていただきます。

あとがき

すでにたくさん記事を書いている場合は、すべての表示位置をチェックするのが大変ですが、その手間をかけても使いたい機能。

これを導入するにあたって、過去記事を見返していますが、なんと自分の見出しつけのルールが定まっていないことかw

これからは見出しにもっと気をつかおうと思います。

photo credit: FutUndBeidl via photopin cc