Rikiによる知識財産の共有

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

【ブログを見やすくする⑤】目次に枠線をつけよう

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

現在読みやすいブログにするにはどうすればいいのか考えたり、調べています。今回は第五段となります。

前回は、目次に”目次”というタイトルを入れる方法を記事にしました。以下をご覧ください。

www.riki-riki.com

 

ブログを見やすくする⑤〜目次に枠線をつけよう〜

目次に枠線をつける方法

途中までは前回の”目次にタイトルを入れる”と同じです。重複になりますが説明します。

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

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

 

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

 

.table-of-contents{

padding: 20px 10px 20px 40px;

border-radius: 5px;

border:dotted 1px #777;

background: #e6e6fa;

}

 

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

f:id:Riki-Riki:20200301141040p:plain

 

”.table-of-contents”などを以前に見たのを覚えていますか?

そう目次の背景の色を変えた時に出てきました。

この中に”border:dotted 1px #777”と1行加えることで枠線の色を変更することができます。

 

”dotted”は枠線の種類を意味していて、これはドット線になります。ここを変えることで、”solid”は実線、”dashed”は破線、”double”は二重線になります。

”1px”は枠線の太さです。この数字を変えることで枠線を太くしたり、細くしたりできます。

”#777”は枠線の色です。もうおなじみですね。好きなカラーコードに置き換えることで、好きな色の枠線に変えることができます。

 

カラーコードは以下のサイトをご参照ください。

原色大辞典:https://www.colordic.org

 

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

 

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

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

 

今後

これで目次に枠線を入れられるようになりました。目次を見やすくデザインをいじる方法があるので引き続きお伝えしようと思います。