Rikiによる知識財産の共有

【素敵なおじさん化計画中!】

【ブログを見やすくする⑨】目次についてこれまでのまとめ

どうもみなさん!Rikiです!

読みやすいブログを作るためにデザインを試行錯誤していて、今回は第九弾となります。

前回は、目次の大見出し、中見出しの頭にそれぞれ数字やマークを入れる方法を記事にしました。以下をご覧ください。

www.riki-riki.com

 

ブログを見やすくする⑨〜目次についてこれまでのまとめ〜

これまでのまとめ

はてなブログのデザイン変更のページへいき、”カスタマイズ”を選択し、そこにある”デザインCSS”をクリックすると以下のようなテキストがでてきます。これが私の現在の目次に関する内容です。

 

.entry-content a {   /* 目次の文字の色 */

color:#ff7f50;

}

 

.table-of-contents:before {   /* 目次のタイトル */

content: "目次";

font-size: 110%;

font-weight:bold; 

color:#696969;

}

 

.table-of-contents{   /* 目次の項目 */

padding: 20px 10px 20px 40px;

border-radius: 5px;

border:dotted 1px #777;

background: #e6e6fa;

}

 

.table-of-contents li{   /* 目次の大見出しの頭のマークもしくは数字 */

list-style-type:decimal;

}

 

.table-of-contents li ul li{   /* 目次の大見出しの頭のマークもしくは数字 */

list-style-type:disc;

}

 

このテキストを使用すると以下のような目次になります。

f:id:Riki-Riki:20200306184553p:plain

 

ちなみに、『/* この間に文字を書くとメモになります */』これはメモとして使えます。

また、”font-size”や”font-weight”を大見出しや中見出し部分のテキストに入れることもでき、大見出しや中見出しの頭のマーカーのサイズを変えたり、太文字にしたりすることができます。

こんな感じで今まで使用してきたテキストを応用することで目次のデザインを変えることができるので、恐れず色々といじってみてください。

 

CSSの入力方法がわからない人は以下の記事を参考にしてください。

https://www.riki-riki.com/entry/2020/02/26/224804

 

今後

今までやってきたことである程度、目次をいじれるようになりました。今後はこれの応用についてお伝えできればと思います。