読みやすいようにブログのデザインを見直しました
こんにちはnasustです。
普段から自分のブログのデザインを見ていると、なんか堅苦しいなあーという雰囲気を感じていました。
ある日、色々なウェブサイトを見ていると、モノトーンな色調ならクリエイティブで明るい印象になるんじゃねとアイデアが浮かんできました。
さっそく、CSSを弄って色調を白をベースに変更。これいける。そのまま、あらゆる箇所をモノトーンに変えました。前より明るい印象です。
本文を読みやすくした
ブログを色のデザインと一緒に文章の読みやすさをカスタマイズしました。
読みやすいウェブサイトを参考にしました。
参考にした読みやすかったウェブサイト
興味深いのが、文字サイズが17pxから20pxで行間が170%から200%とCSSでスタイルが設定されている点です。またフォントの色も#000では無く、#444など、多少明るくしています。
一般的に読みやすい文章のスタイルは、フォントサイズが16px、行間が150%です。これらのウェブサイトでは、一回り大きくスタイルが設定されています。
フォントの色は#000ではコンストラクトが高すぎることや、重苦しいという理由で明るくしていると思います。
これらのウェブサイトを参考にして文章のスタイルを設定しました。
文章のスタイルの内容
以下の様に設定しました。
- font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
- font-size: 120%;
- line-height: 200%;
- color: #3f3f3f;
- font-feature-settings: "palt";
文字と行間を大きくしました。'font-feature-settings: "palt"'は特にオススメです。自動的にカーニングしてくれるので引き締まった文章になります。
記事一覧の概要の部分をグラデーションでフィードアウトするようにしました
スクリーンショットのようにグラデーションでフィードアウトするようにしました。徐々に消えていく様にすることで、なんとなく続きが読みやすいデザインになった気がします。
やって良かった
雰囲気も良くなったし、文章も読みやすくなった。個人的にはよく出来たカスタマイズです。後は面白い文章を書くだけ。これが一番の難関ですｗ
関連記事
