読者です 読者をやめる 読者になる 読者になる

えむしてっく

主にはてなブログのカスタマイズやapple製品関連の記事など。

スポンサーリンク

【CSS】コピペするだけ!「目次」をカスタマイズする方法

はてなブログ カスタマイズ CSS

f:id:mshitech:20170211222705j:plain

いつの間にか目次が標準で出るようになっていますね。

先月からだったとは気づかなかった。

せっかくなので、目次のカスタマイズ法を載せようかと思います。

staff.hatenablog.com

CSSの貼り付け場所

以下で紹介するCSSの貼り付け場所はこちら。

デザイン→カスタマイズ→デザインCSS

デザイン1

f:id:mshitech:20170211214820p:plain

非常にオーソドックスな感じ。当サイトでは只今こちらを採用中です。

CSS

 /* 目次に「目次」を追加 */
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold; /* 文字の太さ */
}

/* 目次のカスタマイズ */
.table-of-contents,
.entry-content .table-of-contents {
background: #f8f8f8 ; /* 目次の背景色 */
border-radius:5px; /* 目次の枠の角の丸さを調節 */
overflow: auto;
}

これで作ると完成図がこんな感じです。標準では「目次」って文字が入ってないけど、これで「目次」が入ります。

ブログの雰囲気に合わせて英語にしてみても良いかもいいかもしれません。

 

背景色をもっと自分のサイトのカラーと調和させたいのであれば、こちらのサイトを参考にされてはいかがでしょうか。

www.colordic.org

デザイン2

せっかくなのでデザインをもう一つ。

今度は枠を無くして、影を付けることで少し浮いた感じに見えるようにしてみました。

f:id:mshitech:20170211214832p:plain

CSS

 /* 目次に「目次」を追加 */
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold; /* 文字の太さ */
}

/* 目次のカスタマイズ */
.table-of-contents,
.entry-content .table-of-contents {
border: none;
border-radius: 5px; /* 目次の枠の角の丸さを調節 */
 box-shadow: 0 3px 15px rgba(0,0,0,0.2);
overflow: auto;
}

大したことはありませんが、ざっとこんな感じです。

こちらの方に背景色を加えたいのであれば、デザイン1の方から目次の背景色を取ってきて移植してきてみて下さい。

また影の濃さですが、「 rgba(0,0,0,0.2)」最後の0.2の部分の数値をいじってみて下さい。rgbaで言えばaの部分、alphaに当たります。

1が透過度最低で全く透過せず、0が透過度最高で完全に消えて無くなります。つまり、0.2の状態ですと透明度が20%ですよ、という状態です。

 

何か間違いや疑問などございましたら、ブコメかコメント欄にでもお願いします。

ではでは、また次の記事で・・・

 

インデックスって長いシリーズになりましたね。