ブログ

見出しのレイアウトが決まりました(8日目)

こんにちは 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;

余白を入れることで見出しの圧迫感もなくなります。