【はてなブログ】目次をちょこっとかっこよくしてみた。
はてな記法ってのは、はてなブロガーにとってはかなりのお役立ち記述方法だな、と最近実感しております。詳しくは、こちら(はてな記法一覧 - はてなダイアリーのヘルプ)
はてな記法で、目次を簡単に表示させるには、
[:contents]
と書くだけです。すると見出し設定をしていた内容がすらっとまとめて表示されます。デフォルトは右図。
これをおしゃれブログで良く見るようなかっこいい形に変身させたいと思います。
参考にしたのはこちらのブログ。
www.yukihy.com
そして、デザインcssの部分に追加してみたコードがこちら
/*目次のカスタマイズ*/ .table-of-contents{ padding: 10px 10px 10px 50px; border-radius: 10px; border: solid 1px darkcyan; /*background: #f0f0f0;*/ } .table-of-contents:before{ content: "[目次]"; font-size: 100%; }
すると、こうなる。
なんか、横に長くてダサいかもしれないですね。その辺は後々調整しましょう。
もう一つ、よく見るやつとして、普段は目次が隠れているやつがありますよね。それも調子に乗って挑戦してみると。。。
普段はこれで、表示をクリックすると。。。
こう!!できちゃった。
やり方は、参考ブログの「最初は隠しておいて、クリックしたら表示するようにする」をご覧ください。
以上、お手軽カスタマイズでしたー
<以下は、動作確認用のサンプルです>