id="目次を作る方法">目次を作る方法
はてなブログってデフォルトでできることが多いので，ちょこちょこと編集して見たくなるのですが，中でも目次はすごく便利な機能だなと思っています。もちろん手書きでもかんたんにできちゃうんですけど，ちょっとした一工夫で自動的に作ってくれるようになるんです。
手書きでやるなら？
手書きなら見たままモードの編集画面で以下を打ち込めばOK
[:contents]
記事中の見出しから目次を自動的に作成する「目次記法」を追加しました - はてなブログ開発ブログstaff.hatenablog.com
あとは，htmlで，
<h2>
やら
<h3>
やらを書いていったものがどんどん目次になっていきます。
最近書いた記事だと，こんなふうになっています。
超簡単ですよね！
毎回書くのもだるいｗ
それですら面倒になってしまう。
ソレが人間というものです。
あー！書き忘れてる！！
ってこともしばしば。
（私は，続きを読むもよく付け忘れてます笑）
というわけで，記事を書くだけで目次ができてしまうようにならないものかと思い，調べてみましたらやっぱりあるわけですね。
ちょっとしたhtmlとcssの知識（なくてもいいかもしれないけれど笑）があれば，下記サイトを見ながら簡単にできます。
http://hapilaki.hateblo.jp/embed/mokuji-jidou-seiseihapilaki.hateblo.jp
やってみた
手順は簡単です。2stepでできちゃいます！
headにCSSを追加
私は最近の流行に乗って（はやってるのかな？），Markdownで記事を書いていますが，見たままモードで書いているか，Markdownやhtmlで書いているのかによって，追加するcssが異なりますのでご注意ください。
はてなブログのheadは，ダッシュボード内の設定→詳細設定からスクロールしたheadに要素を追加からできます。
Javascriptを追加
ダッシュボードからデザインをクリックし，スパナマークのカスタマイズをクリック。
記事内の記事したにJavascriptを記載すればOK.
以上！すごく簡単にできました。
はぴらきさんに感謝です！断捨離記事も面白いです！
まとめ
1.はてなブログの目次生成は[:contents]だけで簡単
2. headのCSSと記事内のJavascript挿入で，自動生成が可能になる！
便利なので皆さんもやってみてください。
コメント