MONOLOG

もっと自由に、もっとシンプルに

【超簡単】はてなブログの目次をコピペするだけでお洒落カスタマイズする方法!

f:id:chehonz5:20180222182513j:plain

誰でも出来る!
はてなブログの目次をコピペするだけでお洒落カスタマイズする方法をご紹介します。

ちなみに、記事に目次を入れるには「:contents」を[]で囲って頂ければ簡単に記事中に目次を出すことが可能です。

今回、カスタマイズした目次は下記のようになります。

はてなブログの目次をカスタマイズする方法!

下記のブログを参考にCSSデザインを変更してみました。
kimix.hatenablog.com

非常にお洒落な目次デザインを公開されていましたので参考にさせて頂きました。

下記CSSそのままコピー

/*目次*/
ul.table-of-contents {
font-size: 12px !important; /*文字サイズ*/
border: 1px solid #ece7cf !important;
color: #999 !important;
display: inline-block;
}
ul.table-of-contents a:after {
display: none !important;
}
ul.table-of-contents li a,
ul.table-of-contents li a:visited {
color: #999 !important; /* リンク文字の色 */
text-decoration: none; /* リンクの下線あり・なし */
}
ul.table-of-contents li a:hover {
color: #000000 !important; /* リンクにマウスを重ねた時の色 */
}
ul.table-of-contents li {
margin: 5px 0 10px 6px !important;
line-height: 1.5;
padding: 0;
list-style-type: none !important;
}
ul.table-of-contents li:before {
font-family: blogicon;
content: "\f008";
position: absolute;
left: 1.2em;
color: #baa75a;
}
ul.table-of-contents ul li,
ul.table-of-contents li ul {
/* H1のみ表示させる */
display: none !important;
}

CSS貼り付け先は?

デザイン>カスタマイズ>デザインCSS
 
ココに貼り付けるだけのかんたん作業です!
ぜひお試しあれ!