【コピペ一発】はてなブログの目次を個性的にしたい方オススメ!
はてなブログの目次をおしゃれにしたいという方へ是非!
ご紹介したい目次が下記になります。
この記事で目次を付けたら下記のようになります。
文字が動く
カーソルを合わせると少しだけ文字が揺れる設定になっています。
「目次」の横のアイコンは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 /* カーソルが移動する時間 */
}
CSSの色コードを調べるには下記のページを参考にしてみてください。
配色に関しては、下記のサイトがオススメです。
https://saruwakakun.com/html-css/material/colors
今回はこちらのブログ様の記事を参考にさせていただきました。
mshitech.hatenablog.com
不明点があればコメントまでどうぞ