超簡単！はてなブログの目次を可愛いくカスタマイズ

　　　　　　　　　　　

こんにちは♪あーたそです。
ブログ内の目次をカスタマイズしてみました！！と、いってもすでに素晴らしいサンプルを紹介していただいている方のブログを参考に行っただけです。とっても簡単にできるので、ぜひ皆さんも可愛く変更しちゃいましょう！今回は目次作る必要性ないのですが、見せるために入れてみました(笑)

参考にさせてもらったブログ

参考にさせてもらったのはこちら↓↓↓え、もうわかりやすくて超簡単。で可愛い。好きなタイプの目次を選んでコピペさせてもらうだけです！これを無料で公開してくれるはてなブロガーさん達を本当に尊敬します。ありがとうございます！！！！訪れた際にはスターとかコメントとかで、ありがとうの気持ちを伝えていきましょう！

kimix.hatenablog.com

 変更した点

基本的に変更する点はなかったのですが、自分のブログに合う色に変更させてもらったのと、なぜか私は【✔】がものすっごくずれてしまうため、そこを調整しました。変更させてもらったのは下記の赤字部分です。色は下記のカラーコードから選びました！

www.colordic.org

/*--------------------------------------
もくじ
--------------------------------------*/
ul.table-of-contents {
font-size: 14px !important; /*文字サイズ*/
border: 1px solid #ffaf58 !important;
padding: 1em 1.5em 1em 2.25em !important;
color: #ffaf58 !important;
display: inline-block;
}
ul.table-of-contents:before {
content: ":::: I N D E X ::::";
display: block;
text-align: center;
margin: 1em 1em 1.7em;
padding: 0 0 1.5em;
font-weight: bold;
font-size: 100% !important;
border-bottom: 1px dashed lightgrey;
}
ul.table-of-contents a:after {
display: none !important;
}
ul.table-of-contents li a,
ul.table-of-contents li a:visited {
color: #ffaf58 !important; /* リンク文字の色 */
text-decoration: none; /* リンクの下線あり・なし */
}
ul.table-of-contents li a:hover {
color: lightgrey !important; /* リンクにマウスを重ねた時の色 */
}
ul.table-of-contents li {
margin: 5px 5px 10px 10px !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:17.2em;
color: #ffaf58;
}
ul.table-of-contents ul li,
ul.table-of-contents li ul {
/* H1のみ表示させる */
display: none !important;
}

1度設定さえしてしまえば、次からはずっと使えるのでありがたいです。