Rikiによる知識財産の共有

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

【ブログを見やすくする⑥】目次の枠の角を取ろう

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

読みやすいブログを作るために試行錯誤していますが、目次だけで第六段となりました。

前回は、目次に枠線をつける方法を記事にしました。以下をご覧ください。

www.riki-riki.com

 

ブログを見やすくする⑥〜目次の枠の角を取ろう〜

目次の枠の角を取る方法

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

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

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

 

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

 

.table-of-contents{

padding: 20px 10px 20px 40px;

border-radius: 5px;

border:dotted 1px #777;

background: #e6e6fa;

}

 

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

 

あれ?このテキストどこかで見たような。。。

実は今回のテキストは前回の記事と同じなんです。

この中の”border-radius: 5px;”という部分が今回のテーマに沿っているところです。

 

”border-radius”は枠の角の丸みを意味しています。正確には、radiusは半径という意味です。

この横にある”5px”がを変えることで、枠の角の丸みを変えることができます。数字を大きくすれば半径が大きくなるので丸みが強くなり、反対に数字を小さくすれば丸みがなくなります。

例として、10pxの時はこんな感じです。

f:id:Riki-Riki:20200302220901p:plain

 

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

 

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

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

 

今後

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