~ モバイル版(スマートフォン)の操作 ~
左右にスワイプすると、前後の投稿へ移動します。
← 前の投稿 | 次の投稿 →
日々のコンピュータ情報の集積と整理

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

2014年4月23日水曜日

ストレスなく文章が読めるブログを作る!CSSでfont-familyを指定しよう!


スポンサーリンク

最近Webページを見ていると、文章が読みやすいページと読みにくいページがあることに気が付きました。

どこに違いがあるんだろう?と考えていたら、読みやすい文章のページは文字のフォントがギザギザしていない!ということに気が付きました。
ということは、スタイルシートでfont-familyを指定して、ギザギザしていない文字のフォントを指定すればよいのではないかと思い、いろいろと情報を調べていたら非常に参考になるページを見つけました。
CSSのfont-family指定はこれで決まり!(2013春) - 遠近法ノートCSSのfont-family指定はこれで決まり!(2013春) - 遠近法ノート


そのページに記載されているfont-familyをこのページに適用してみました。
このブログは Blogger なので、マイブログ→テンプレート→カスタマイズ→上級者向け→CSSを追加にて、次のようなカスタム CSS を記載しました。
body {
font-family:'Lucida Grande', Meiryo, sans-serif;
}

この指定によってページは以下のように変化しました。

font-family適用前

stylesheet_font-family_before

font-family適用後

stylesheet_font-family_after

font-familyを適用した結果、文章の文字のギザギザが無くなり、読みやすくなっていることがわかります。(一部、font-familyが適用されていない部分がありますが、今回適用したのは body だけなので、個別にスタイルシートを適応すればその部分も変更できるはずです。ただ、font-familyが適用されていない部分はあまり長文ではないので、影響は少ないとみてそのままにしています。)

やはりギザギザしていないフォントはイイですね!
ギザギザしていないメイリオのようなフォントは、Windows環境の場合Windows Vista以降に採用が進んだので、Windows Vistaの少なくない良い点のうちの一つでしょう!(*1)
*1:
メイリオ - Wikipediaメイリオ - Wikipedia


スポンサーリンク

コメントを投稿

コメント投稿機能について