えりたく夫婦について
雑記

JINブログのヘッダーをカスタマイズ!グラデーションにする方法|難しいことは嫌だ!

JINのヘッダーをグラデーションにしてみたいカスタマイズして差別化してみたい!と言う声があったので、サクッと紹介します!

すがたく
すがたく
ヘッダーをグラデーションにしているブログは少ないので、印象に残りやすいかも!

僕ら夫婦ブログは、二人のカラーが混ざる!をテーマにグラデーションにしてます

*コピペで済ませたい!って方は、目次の管理画面でサクッと変更をクリックして下さい!

グラデーションカラーを参考サイトで決める

すがたく
すがたく
カラーやデザインの参考を見つけるときに頻繁にみるサービスを紹介します!

ピンタレスト(pinterest)

おしゃれな画像がたくさん集まっているので、検索バーに調べたい言葉を入れることで、参考になる画像、デザイン、カラーが見つかります。

トップ画像は、こちら👇

ピンタレストのサイトトップページ

いろんなデザインの参考になるので、ぜひ検索してみてください!

>> グラデーションが参考になる「ピンタレスト」

ピンタレストの使い方

検索バーに

  • グラデーション デザイン
  • バナー デザイン
  • サイト デザイン

と入力することで、ブログで参考になるデザインがいっぱい見つかります!

ヘッダーとグラデーションの構造を理解

すがたく
すがたく
htmlとcssの話になるので、難しいので難しく考えないでください

ヘッダーの色や大きさのデータが#header-boxに書かれています。

ヘッダーのカラーをグラデーションにする場合、この#header-boxにカラーを上書きすることで変更することができます。

すがたく
すがたく
JINは、カスタマイズ画面からヘッダーのカラーを変更できるので、コードを書く必要はありませんが、グラデーションカラーにする場合は、cssでコードを追加する必要があるので、ヘッダーのカラーがどのようになっているのか説明します!

実際のコード

#header-box {
background-color#(カラーコードを書く);

[カスタマイズ]>[追加css]で上記のようにコードを書くことでヘッダーの色を変更することができます。

グラデーションの構造も確認してみましょう!

すがたく
すがたく
このブログの実際のコードを見てみましょう!

ilatteのヘッダーのグラデーション

#header-box {
backgroundlinear-gradient(90deg,#9795f0,#fbc8d4);

すがたく
すがたく
2色のカラーを決めて、カラーを入れていきました!

次は、グラデーションする向きを決めていきます!

コードを見ると2色のカラーコードの前に[ 90deg ]と言う文字がありますね

linear-gradient(90deg,#,#);

👆この数字がグラデーションの角度を決めています!

90度でグラデーションをしてくれ!」って命令を書いています。

[ 0deg ]の場合は、下上に紫からピンクに徐々にグラデーションしてくれ!と命令になります。

[ 90deg ]の場合は、左から紫、右に徐々にピンクです。

おすすめは、[ 90deg ]か[ 180deg ]です!

ヘッダーは横に長いので、横でグラデーションすることで、滑らかに色が変わります。

[ 0deg ]か[ 360deg ]にすると上下でグラデーションの為、急に色が変わってしまいます。

すがたく
すがたく
それでは、構造が理解できたと思いますので、実際にグラデーションをつけていきましょう!

管理画面でサクッと変更

[外観]から[カスタマイズ]、[追加css]を選択してコードを追加して[公開]を押して完了です!

*追加cssでは、半角で全て記入してください!全角で記入するとバグの原因になります。

2つの#を変更して下さい

#header-box {
backgroundlinear-gradient(360deg,#9795f0,#fbc8d4);

すがたく
すがたく
以上となります。

できなかったや分からなかった場合は、ツイッターより質問を受け付けています!

 

こちらの記事もおすすめ