Rikiによる知識財産の共有

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

【ブログを見やすくする⑦】目次の項目に数字を入れよう

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

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

前回は、目次の枠の角を丸くする方法を記事にしました。以下をご覧ください。

www.riki-riki.com

 

ブログを見やすくする⑦〜目次の項目に数字を入れよう〜

目次の項目に数字を入れる方法

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

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

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

 

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

 

.table-of-contents li{

list-style-type:decimal;

}

 

そして変更を保存すると、あなたの記事の目次の項目に数字が入ります。

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

 

”list-style-type”は項目の種類を意味しています。

つまり、”decimal”は項目に数字を入れるというスタイルになります。ちなみに、decimalを日本語にすると10進数。日常使用している数字のことです。

種類は他にもあり、”decimal-leading-zero”は二桁の数字、”lower-roman”は小文字のローマ数字、”upper-roman”は大文字のローマ数字、”cjk-ideographic”は漢数字、”lower-latin”は小文字のアルファベット、”upper-latin”は大文字のアルファベット、”hiragana”は平仮名、”katakana”はカタカナ、”hiragana-iroha”はいろは、”katakana-iroha”はイロハ、”lower-greek”はギリシャ文字のように多数あります。

 

例として、decimal-leading-zeroの時はこんな感じです。

f:id:Riki-Riki:20200303095951p:plain

 

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

 

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

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

 

今後

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