Rikiによる知識財産の共有

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

【ブログを見やすくする⑧】目次の大見出し、中見出しの頭にそれぞれ数字やマークを入れよう

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

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

前回は、目次の項目に数字を入れる方法を記事にしました。以下をご覧ください。

www.riki-riki.com

 

前回の方法だと見出しの大きさに関わらずに項目の頭に同様に数字が入っていたと思います。

f:id:Riki-Riki:20200303103715p:plain

今回は見出しの大きさごとに項目の頭に数字やマークを入れる方法をお伝えします。

 

ブログを見やすくする⑧〜目次の大見出し、中見出しの頭にそれぞれ数字やマークを入れよう〜

目次の大見出し、中見出しの頭にそれぞれ数字やマークを入れる方法

途中までは前回の”目次に枠線をつける方法”と同じです。重複になりますが説明します。

まずはてなブログのデザイン変更のページへいき、”カスタマイズ”を選択します。そこに”デザインCSS”というものがあるので、それをクリックします。

クリックしたら下に白いウィンドウが出てくるので、そこをさらにクリックします。

 

ここに改行して以下のようなテキストを入力します。

 

.table-of-contents li{

list-style-type:decimal;

}

 

.table-of-contents li ul li{

list-style-type:disc;

}

 

そして変更を保存すると、あなたの記事の目次の項目に数字やマークが入ります。大見出しは数字になっていて、中見出しは●になっていると思います。

 

実は前回も出てきた”.table-of-contents li”は大見出しを意味していて、”.table-of-contents li ul li”は中見出しを指しています。

こうやって分ければ、大見出しや中見出しについてそれぞれ分けて詳細に設定することができます。ちなみに小見出しは”.table-of-contents li ul li ul li”で設定できます。

中見出しのテキストにある”disc”は●を意味しますが、他に”circle”は○、”square”は■があります。

数字や文字にしたい場合は前回記事をご覧ください。

https://www.riki-riki.com/entry/2020/03/02/220959

 

これらの部分をいじって好みのデザインに変えてみてください。

 

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

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

 

今後

これで目次の見出しごとに項目の頭に数字やマークを入れられるようになりました。目次を見やすくデザインをいじる方法はまだまだあります。引き続きお伝えしていきます。