WordPressのテーマLIONMEDIAのヘッダーとフッターにグラデーションを施してみました。
実際にヘッダーとフッターをグラデーションにしてみましたが、感想としては「目立つ」です。
LIONMEDIAのヘッダー下にメニューバーがあるので、サイトに訪問してくれた人がヘッダーに目がいくと、自然にメニューバーに目も行きやすくなるので、メニューバーを使った記事の誘導がしやすくなるかなぁ？と思ってとりあえずはグラデーションヘッダーを飽きるまで使うことに。
しかし私のサイトのメニュバーはお問い合わせとかしかない(笑)
ヘッダー用グラデーションCSS
.l-header {
background: -webkit-linear-gradient(130deg, rgb(72, 118, 225), rgb(238, 130, 238));
background: linear-gradient(130deg, rgb(72, 118, 255), rgb(238, 130, 238));
}
ヘッダーにグラデーションをつけるCSSは上記のCSSにしてあります。
別記事LIONMEDIAヘッダー画像を大きくしてグラデーションで透過する方法でヘッダー画像にグラデーションを重ねたときのCSSを応用して使ってます。(プロではないのでご勘弁を)
ライオンメディアの追加CSSにコピペでオッケー。
background:の値で好きなカラーとグラデーションさせる方向を変更できるので、カッコ内の値はサイトにあった配色に変更できます。
グラデーション配色をregで変更
degはグラデーションの向かう方向を変える値を変えられます。上記画像の130degなら130度という感じ。
rebで色の指定をします。
reb(方向,開始色,終了色)
reb色を調べるのはMozillaという無料ツールがあったのでグラデーションにして遊んでみる人は使ってみてください。
カラーの数値を変えて遊んでいましたが、自分のサイトのヘッダーが色んなヘッダーカラーにして試せるので、なかなか面白かったです。
ヘッダーにグラデーションをかけると、こんな感じのイメージになります。
青と紫を使ってグラデーションさせてみたのですが、単色だけのメニューバーの時よりは目がいくようになったかなぁ？という印象。
フッターは落ち着きた感じのグラデーションカラーにしてみる
そしてグラデーションだからといって、2色や３色とも全く違う色で配色しなくても、同色系の濃い色と明るい色を使えば、派手感？が抑えられた印象のグラデーションに。
フッターは同色系を使ってグラデーションさせてみたのですが、同色の濃い薄い２色でもグラデーションの感じは落ち着いた感じで使えるので落ち着いたグラデーションを使いたい時はいいかなぁ。と思った次第でありんす。
フッター用グラデーションCSS
.l-footer {
background: -webkit-linear-gradient(130deg, rgb(29, 27, 26), rgb(156, 1156, 156));
background: linear-gradient(130deg, rgb(29, 27, 26), rgb(155, 156, 156));
}
フッターをグラデーションにするには上記CSSをLIONMEDIAの追加CSSにいれます。(追加CSS大好き人間っす)
ヘッダーもフッターのCSSも上の画像と同じ配色なので、backgrundのrgbの値を好きなカラーにして、よければ使ってください。
私のヘッダー＆フッター理想イメージ脳
ヘッダーで読んでくださいアピール「私のサイトに恋して作戦」
フッターでは最後まで読んでフッターまで来てくれた方に落ち着いたグラデーションで最後まで「おもてなし」
まとめ
- サイトのヘッダーは頭(上)
- サイトのフッターは足(下)
LIONMEDIAは初めから、おしゃれなデザインなので、更におしゃれにするならグラデーションを使って他のLIONMEDIAのテーマを使ってる人達との違いを出したほう個性が出ていいかもしれません。
逆の発想だと、今はスマホユーザーが多いので、スマホ表示でサイトを見たときにヘッダーのグラデーションで少しインパクトを与えて(離脱しないでぇ⇐願望)、記事が読み終わって最後にフッター付近でヘッダーとは違う装いのサイト表現をグラデーションカラーで変えてみると読んでくれる人に対しても良い変化が与えられるかもしれませんね。
配色をいかに上手にするかがセンスの見せ所かもです。
遊びがてらグラデーションカラーにして配色してみてはいかがでしょうか。
