サラリーマンぽんぽん

普通のサラリーマンが日常を綴り、かつて読者がたくさんいた受験日記ブログを上回る反響を目指しますw

ブログの目次を自動生成してくれるJavascriptを試してみた!

目次を作る方法

はてなブログってデフォルトでできることが多いので,ちょこちょこと編集して見たくなるのですが,中でも目次はすごく便利な機能だなと思っています。もちろん手書きでもかんたんにできちゃうんですけど,ちょっとした一工夫で自動的に作ってくれるようになるんです。

手書きでやるなら?

手書きなら見たままモードの編集画面で以下を打ち込めばOK

[:contents]

staff.hatenablog.com

あとは,htmlで,

<h2>

やら

<h3>

やらを書いていったものがどんどん目次になっていきます。

最近書いた記事だと,こんなふうになっています。

f:id:pom2e:20170119205811p:plain

超簡単ですよね!

毎回書くのもだるいw

それですら面倒になってしまう。

ソレが人間というものです。

あー!書き忘れてる!!

ってこともしばしば。 (私は,続きを読むもよく付け忘れてます笑)

というわけで,記事を書くだけで目次ができてしまうようにならないものかと思い,調べてみましたらやっぱりあるわけですね。

ちょっとしたhtmlとcssの知識(なくてもいいかもしれないけれど笑)があれば,下記サイトを見ながら簡単にできます。

http://hapilaki.hateblo.jp/embed/mokuji-jidou-seiseihapilaki.hateblo.jp

やってみた

手順は簡単です。2stepでできちゃいます!

headにCSSを追加

私は最近の流行に乗って(はやってるのかな?),Markdownで記事を書いていますが,見たままモードで書いているか,Markdownやhtmlで書いているのかによって,追加するcssが異なりますのでご注意ください。

はてなブログのheadは,ダッシュボード内の設定→詳細設定からスクロールしたheadに要素を追加からできます。

f:id:pom2e:20170118224652p:plain

Javascriptを追加

ダッシュボードからデザインをクリックし,スパナマークのカスタマイズをクリック。 記事内の記事したにJavascriptを記載すればOK.

f:id:pom2e:20170118224744p:plain

以上!すごく簡単にできました。 はぴらきさんに感謝です!断捨離記事も面白いです!

hapilaki.hateblo.jp

まとめ

1.はてなブログの目次生成は[:contents]だけで簡単
2. headのCSSと記事内のJavascript挿入で,自動生成が可能になる!

便利なので皆さんもやってみてください。