今回は「自分のブログ記事をもっと見やすくしたい！」という人のための記事です。
記事の文章を見やすくするための文字の装飾パターンについて、CSSの例を付けて紹介します。
Contents
文字のサイズを変える
強調したい部分を大きくしたりしましょう。
サイズはお好みで調整してください。
あまり大きすぎたり小さすぎたりすると逆に見にくくなります。
また、いろいろなサイズが混ざりすぎるとごちゃごちゃするのでシンプルにするのがオススメ！
普通のサイズ
小さいサイズ
大きいサイズ
1 2 3 4 5 6 | .fs-lg { font-size: 120%; } .fs-sm { font-size: 80%; } |
色を変える
ネガティブな表現は赤。
ポジティブな表現は青などで使い分けましょう！
赤い文字
青い文字
緑の文字
オレンジの文字
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <style> .color-red { color: #ff0000; } .color-blue { color: #167fa6; } .color-green { color: #008000; } .color-orange { color: #ff6600; } </style> <span class="color-red">赤い文字</span> <span class="color-blue">青い文字</span> <span class="color-green">緑の文字</span> <span class="color-orange">オレンジの文字</span> |
文字を太くする
太い文字も協調ですね。
太い文字
1 2 3 | .fw-bold { font-weight: bold; } |
オススメの使い方と注意
使いやすいパターン
「色4色 × 大きい文字 + 太字」
いろいろサイズ変えたり、太くしたり普通だったりしないでいいかな。。(‘ω’)
色を変えるときにセットで大きく太くするのがわかりやすいと思います。
装飾はやりすぎないように気を付けましょう！
