【はてなブログ】目次をちょこっとかっこよくしてみた。


はてな記法ってのは、はてなブロガーにとってはかなりのお役立ち記述方法だな、と最近実感しております。詳しくは、こちら(はてな記法一覧 - はてなダイアリーのヘルプ

f:id:demacassette:20160509235043p:plain:w300:rightはてな記法で、目次を簡単に表示させるには、

[: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%;
}

すると、こうなる。
f:id:demacassette:20160509235347p:plain
なんか、横に長くてダサいかもしれないですね。その辺は後々調整しましょう。

もう一つ、よく見るやつとして、普段は目次が隠れているやつがありますよね。それも調子に乗って挑戦してみると。。。
f:id:demacassette:20160509235830p:plain
普段はこれで、表示をクリックすると。。。

f:id:demacassette:20160509235848p:plain
こう!!できちゃった。

やり方は、参考ブログの「最初は隠しておいて、クリックしたら表示するようにする」をご覧ください。

以上、お手軽カスタマイズでしたー



<以下は、動作確認用のサンプルです>

見出し1

見出し1-1

見出し1-2

見出し2

見出し2-1

見出し2-2

見出し2-2-1

見出し2-3

見出し2-3-1
見出し2-3-2
見出し2-3-3