有名ブロガーさんのブログって見やすいのはなぜなんでしょう？
文章が魅力的なのは当然なのですが文字を見やすくするなど工夫されているんですよね。
良いところは真似る。
これは大事なことですから、どんどん取り入れていきましょう。
「はてなブログ」、「レスポンシブデザイン」対応になります。
フォントの設定について
いろんなブログを読ませていただいて読みやすいなと私が感じたのは文字大きめで細字がきれいで見やすいと感じました。
アンチエイリアスの効いた細字は文章量が多くてもスッキリした印象をうけますね。
ということで設定していきましょう。
全体とブログ記事本文の2つに分けて追記していきます。
「デザイン」→「カスタマイズ」→「{}デザインCSS」から以下を追記していきます。
/* フォントサイズ変更 */ body { -webkit-font-smoothing: antialiased; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif; } .entry-content { font-size:18px; } /* フォントサイズスマホ */ @media screen and (max-width:680px){ .entry-content { font-size:16px; } }
ポイントはレスポンシブデザインを採用しているのでスマホでみるときもフォントがPCと同じサイズになってしまうのですが、
PCが18pxに対してスマホではBrooklynの初期サイズの16pxにするようにしています。
スマホで文字がでかいと画面が小さいのでスクロールが多いと逆に読みづらく感じることと、
スマホで記事を読むときって電車の中だったり公共の場であることが多いので画面にでかでかとした文章が読みづらいなと思うからです。
変化はどうか？
変更前
変更後
どうでしょう。結構印象違いますよね。
フォントサイズが小さいのもまとまってよく見えますが、読みやすさ重視だと18pxぐらいがよいかと思います。
しばらくこのサイズで運用してみたいと思います。
まとめ
記事のフォントサイズを
- PCのときは18px
- スマホのときは16px
としてみました。
- webkit-font-smoothing: antialiased;
を設定することでフォントがスムーズに細くみえるようになる。
またブログがかっこよくなりましたね。
おすすめのカスタマイズだと思いますのでぜひお試しを！
では！
