無料はてなブログでもできる♪　目次をカワいくする方法

f:id:navira:20190906102824j:plain

無料はてなブログの「目次」って、味気ないですよね。。。

私が選んだテーマだけなのか？わかりませんが、目次に枠も「もくじ」ってタイトルも付いてない。。。

色んなやり方を試してみて、CSSをいじってみても、フッタをいじってみても反映されず。。。諦めかけていたところにっ

とってもカワイイBOXのコードを紹介している方、「つなろっく」さんのサイトに出会いました（*＾＾*

目次をカワいくする方法
色を変更して、お気に入りの雰囲気にできる

そして、何度となく試してダメだったのが（ダメな原因は、ド素人なんで全くわからん。。。）、やっとっ！　そう、やっとこ反映されました～っ！！！

紹介通りではうまくいかず。。。ちょっといじる場所は変えましたが。。。

では、紹介していきま～す（*＾＾*/

但し、スマホ版では反映されず。。。（汗

目次をカワいくする方法

「ダッシュボード」→「デザイン」→「カスタマイズ（スパナのマーク）」→「フッタ」

下記コードを「フッタ」コピペして、完了～っ

↓

<style>

/* マステMEMO風もくじBOX */
.entry-content .table-of-contents{
background-color: #f5f5f5;/* 背景色 */
border: 1px solid #ccc; /* 線の太さ・種類・色 */
box-shadow:1px 1px 6px 0px #ccc;
-moz-box-shadow:1px 1px 6px 0px #ccc;
-webkit-box-shadow:1px 1px 6px 0px #ccc;
-o-box-shadow:1px 1px 6px 0px #ccc;
margin: 20px 5px; /* 外側の余白上下・左右 */
padding: 20px 25px 15px 45px;
position: relative;
z-index: 0;
}
.entry-content .table-of-contents:after{
background-color: #7fffd4; /* マステ背景色 */
background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
background-position: 0 0, 8px 8px; /* 水玉の距離 */
background-size: 15px 15px; /* 水玉の大きさ */
border-left: 2px dotted rgba(0,0,0,0.1);
border-right: 2px dotted rgba(0,0,0,0.1);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
content: 'もくじ';
display: block;
margin: 0 0 10px 0;
padding: 5px 20px;
color: #3cb371; /* マステ部分文字色 */
font-weight: bold;
text-align: center;
position: absolute;
top: -10px;
left: 20px;
transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}