日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年2月3日月曜日

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をいじって面白さを追求する方向にも行ってみたいと思います。





関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...