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

f:id:nasust:20170107183205j:plain

こんにちは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";
}
広告を非表示にする