Bloggerが読みにくいのでnoteのCSSデザインを参考にしてみた

Bloggerのデフォルトテンプレートのデザインだと可読性が低く、読みにくい。
書いていてもなんかテンションあがらないなーと思い、今飛ぶ鳥を落とす勢いで成長しているクリエイターサイト『note』のCSSデザインを参考にしてみた。

画像引用元:https://note.mu/

BLOGを読みやすくするために重要な要素

テキストサイトやBLOGの可読性に影響を与える点としては、以下の要素ではないだろうか。

  • サイズ
  • カラー
  • 余白

このあたりの要素を細かく見ていくことで、noteの読みやすさを取り入れるのではないだろうか。

「note」のテキスト周りのデザインを取り入れてみた

#サイズ
タイトル:32px + 太文字(bold)
見出し:24px + 太文字(bold)
本文:18px
メニューテキスト:16px

#カラー
文字色:#222222
日付やプロフィールの文字:#898D8C
背景:#FFFFFF

#余白
2.0 ぐらい

#その他
カラム:1つ

横幅:620px

リンク:色変更無しの下線のみ

まだまだ細かいところはあるが、上記を変更しただけでだいぶ見やすくなったと思う。
投稿されたコンテンツに集中できるように1カラム構成になっているところもシンプルで良いと思うが、個人的にblogで投稿された数が目につくところにあったほうがモチベーションになるので一旦2カラムは維持してみる。

こんなことするぐらいならnoteに書けばいいやという話なのであるが、なんとなくnoteは完成されたコンテンツをあげなきゃならないような敷居の高さがあって、とりあえずBloggerで書いてる。

タイトルとURLをコピーしました