【コピペ一発】はてなブログの目次を個性的にしたい方オススメ！

f:id:amber_owl:20171030025953j:plain

はてなブログの目次をおしゃれにしたいという方へ是非！

ご紹介したい目次が下記になります。
この記事で目次を付けたら下記のようになります。

はてなブログの目次をおしゃれにしたいという方へ是非！
- 文字が動く
設定方法
- 【ダッシュボード】→【設定】→タブで【詳細設定】の【head】
- 【ダッシュボード】→【デザイン】→【デザインCSS】

文字が動く

カーソルを合わせると少しだけ文字が揺れる設定になっています。

「目次」の横のアイコンはFontAwesomeを利用しています。
https://saruwakakun.com/html-css/basic/font-awesome

設定方法

設定方法は下記になります。

【ダッシュボード】→【設定】→タブで【詳細設定】の【head】

下記のコードを貼り付けて下さい。

headに入れる

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

【ダッシュボード】→【デザイン】→【デザインCSS】

下記にコードを貼り付けてください。

css

/* 目次のカスタマイズ */
.entry-content .table-of-contents {
position:relative;
border: 3px solid #EF866B; /* 枠の色はここを変更してください */
background-color: #fdf2ef; /* 背景カラーです */
border-radius: 0px 0px 5px 5px;
margin-top: 3em; /* 各々の環境で数字を調節してください */
}
.table-of-contents:after { /* 目次部分 */
position: absolute;
font-family: FontAwesome;
content: '\f03a この記事について'; /* 表示名を変えたければここを変更 */
background: #EF866B;
color: #fdf2ef;
right: 0%;
left: 0%;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 2px 0 2px 0;
margin: 0 -3px 0 -3px;/* -で指定しているところはborderと同じ数値にする */
text-align:center;
font-size: 1.2em;
letter-spacing: 2em
}
.table-of-contents li {
font-size:1.0em;
font-weight: bold;
color:#333;
}
.table-of-contents a{
color:#333;
padding:4px 0;/* 列の間隔 */
display: block;
text-decoration: none;
transition-duration: 0.3s /* カーソルが戻る時間 */
}
.table-of-contents li a:hover {
padding-left: 7px; /* カーソル重ねた時に移動する距離 */
transition-duration: 0.3s /* カーソルが移動する時間 */
}