ボム君.com

好きをお金にする私の生き方

はてなブログの目次のデザインを少しカスタマイズしたよ

f:id:powerbombkun:20170617131825p:plain

はてなブログで目次を入れる際の目次記法使ってる?

記事を書く際に目次を入れたい箇所に以下を入れれば良い。↓

[:contents]

ただ、この目次は何かシンプル過ぎる。何かが足りない。もう少しオシャレでクールなデザインにしたい!!
ということでデザインのカスタマイズしちゃったよ!

目次の文字を表示

まずは目次だから目次としっかり分かるようにしないとね、ということで「目次」の文字を表示するようにした。

以下をデザイン設定-デザインcssにコピペすればOK。↓

.table-of-contents:before{
    content: "目次";
    font-size: 120%;
    font-weight: bold;
}

これをやることでだいぶ目次だという事が分かりやすくなったよ。
参考にしたのはこちらのブログ。↓
www.yukihy.com
ありがとうございます。

リストに番号表示を追加

番号が付いていないとなんか目次らしくない、数字ある方が目次らしいっしょ!
ということで目次に数字を追加。
以下をデザイン設定-デザインcssにコピペすればOK。↓

.table-of-contents li,
.table-of-contents ul{
    list-style-type: decimal;
}

目次に背景色を追加

こちらも先ほどの番号表示を追加した際のサイトを参考にやった。ありがとうございます。
こちらも、以下をデザイン設定-デザインcssにコピペすればOK。↓

.table-of-contents{
    padding: 20px 10px 20px 40px;
    border-radius: 5px;
    background: #f0f0f0;/*背景色はここから変更*/
}

変更前と変更後

変更前はこんなだったそっけない目次が↓
f:id:powerbombkun:20160223231054p:plain

変更後はこんな感じに↓
f:id:powerbombkun:20160223230755p:plain


少しおしゃれになったね目次Yeah!!!


※追記
目次の表示・非表示の切り替えボタンの追加について記事を書きました。
ご参考にしてください。
www.bombkun.com