ブログ
見出しのレイアウトが決まりました(8日目)
0:33
こんにちは Tomoです。
やっと自分で納得できる「見出し」ができたと思います。今回は作成した見出しについて書きます。
「見出し」のこだわり
「見出し」のこだわりとして以下点を気を付けました。
- 配色の統一感
- 見た目を軽さ
- 余白をつける
ではこだわりの理由と解決策について記載します。
配色の統一感
ブログ開始時から配色は、青系で統一することを意識しました。
20数年前ですが、自分のラッキーカラーが「青」と占い師に言われました。そのときからずっとラッキーカラーを「青」と信じて生きています。
青は清涼感があり、落ち着く色ですね。(今冬で寒い感じですが・・・)理由はそんな感じで青を使用しました。「青」一色は重いので見出しの色も変えてみました
h1
h2
h3
h4
見た目を軽さ
hタグ毎に色を変えてみました。色は薄いですが、みためが重く感じます。そのため、グラデーションで右にいくほど薄くすることで軽くすることを決めました。
h1:
h2:background: linear-gradient(to right, #a6baff 30%, #fff);
h3: background: linear-gradient(to right, #d1e8ff 30%, #fff);
h4: background: linear-gradient(to right, #d9e1ff 30%, #FFF);
h1のブログのタイトルはそのままです。h2、h3、h4をグラデーションにしています。右に行くほど薄くなるので軽く感じます。
余白をつける
h1:
h2:padding: 15px 10px 15px 5px;
h3: padding: 5px;
h4: padding: 5px;
余白を入れることで見出しの圧迫感もなくなります。