Bloggerの標準のデザインだと文字が読みにくかったのでCSSをいじってみた

今までは、Bloggerの標準のデザインを少しカスタムして使っていました。
ただ、どうデザインを変更しても画面の文字が読みづらいように感じたので、思い切ってCSSをいじって読みやすくしてみました。




設定方法はBloggerのマイブログ画面からテンプレートを選択し、ブログで使用中という部分のカスタマイズボタンを押します。

テンプレートのカスタマイズ

すると、Bloggerテンプレートデザイナーの画面が出てくるので、上級者向けの中からCSSを追加を選択します。
後は、適応したいCSSをカスタムCSSを追加の部分に記載します。

CSS を追加

今回追加したのは、以下のCSSです。line-heightで行間の幅を設定しています。

table {
 line-height:24px;
}
br {
 line-height:24px;
}
div {
 line-height:24px;
}
body {
 line-height:34px;
}

その結果のビフォーアフターを以下に示します。

ビフォー：

↓

アフター：

なんということでしょう！
あんなに読みづらかった本文が、匠の技で読みやすい本文に早変わり…。

少しのピクセルの差ですが、読みやすさは変わるものですね。
今後もブログが読みやすいよう、スタイルを改善していこうと思います。

余談ですが、結構BloggerのCSSをいじるといろんなことができるみたいですね。
今後は、もっとCSSをいじって面白さを追求する方向にも行ってみたいと思います。