目次の記号のカスタマイズ - はてなブログカスタマイズ

こんにちはnasustです。 はてなブログは[:contents]で見出しを自動的に目次にする機能があります。
殆どのテーマでは、ブラウザのデフォルトのデザインのまま表示されます。

僕が作成したテーマの「 monolithic - テーマ ストア 」では目次のデザインをカスタマイズしています。

このカスタマイズは他のブログでもコピペで同じことができるので紹介します。

アイコンの記号を変えたい場合は「 はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい！ 」で紹介されているアイコンのコードとcontent:"\fXXX"と入れ替えて下さい。

.entry-content .table-of-contents a{
    text-decoration: none;
}

.entry-content .table-of-contents li{
    list-style: none;
    position:relative;
    margin-bottom: 0.3em;
}

.entry-content .table-of-contents li ul{
    margin-top: 0.3em;
}

.entry-content .table-of-contents li:before{
    position:absolute;
    left:-1.5em;
    font-family: blogicon;
    content: "\f029";
    color:#333333;
}

.entry-content .table-of-contents li li:before{
    content: "\f006";
}

.entry-content .table-of-contents li li li:before{
    content: "\f008";
}

.entry-content .table-of-contents li li li li:before{
    content: "\f029";
}

.entry-content .table-of-contents li li li li li:before{
    content: "\f006";
}

.entry-content .table-of-contents li li li li li li:before{
    content: "\f008";
}

関連記事

やっとブログをレスポンシブに対応しました

はてなブログカスタマイズが全て分かるまとめ

はてなブログのMarkdownの書式まとめ

無料のはてなブログでスマホ版の表示でメニューバーを追加する - はてなブログカスタマイズ

アーカイブページにはてなブックマーク数を表示するようにするカスタマイズ - はてなブログカスタマイズ

はてなブログのテーマ「 foodey 」を作成しました

はてなブログのテーマ『 monolithic 』を作成しています。

はてなブログカスタマイズ. サイトマップを追加しました。サイトマップのUXを解説。

はてなブログをマテリアルデザイン風にカスタマイズしました。デザインのノウハウからCSSの編集迄詳しく解説!!