iiie

物づくりと生活、"経験"を記事へ

CSS:記事を読みやすいよう、目次をカスタマイズしたよ【はてなブログ向け】

f:id:gorislog:20190407194632p:plain

 

目次をカスタマイズしました。

  

階層になっていますが、アイコンマークは同じ。

別途指定できると思いますが、僕はこれで満足なので追記予定はありません。

 

CSS

.entry-content .table-of-contents {

margin: 1em 0;

padding: 0 0 16px 0;

border: 1px solid #172033;

background-color: #fff;

font-size: 0.95em;

font-weight: normal;

}
.entry-content .table-of-contents a {

text-decoration:;

color:;

}
.table-of-contents:before {

content: "目 次";

display: inline-block;

width: 100%;

padding: 7px;

margin-bottom: 10px;

box-sizing: border-box;

text-align: center;

font-size: 1.0em;

font-weight: bold;

color: #fff;

background-color: #172033;

}
.table-of-contents ul {

margin: 0;

padding: 0 !important;

border: none;

}
.table-of-contents li {

margin: 0 0 0 1em;

padding: 0.6em 0 0 0 !important;

list-style-type: none;

color:;

border: none;

}
ul.table-of-contents li:before {

font-family: blogicon;

content: "\f029";

padding-right: 10px;

color: #00ff66;

 

content:"\f029";の部分を変更すればアイコンを変更できます。

paddingやらmarginは調整してください。

 

アイコンフォントを変更するならコチラを参照にするといいですよ

www.foxism.jp