Xeory Extention のトップヴィジュアルの背景色を変更する方法

Xeory Extention のトップヴィジュアルの背景色を変更する方法をお伝えします。
カラー設定の確認
カラー設定で、設定している箇所によって変更場所が変わります。
ワードプレスの左メニューの初期設定を選択すると、
下記のカラー設定画面が出てきます。
「デフォルト」「水色」「青」「紺」「赤」
のどれを選択しているかを確認してください。
デフォルトを設定している場合
デフォルトを選択している場合は、
下記のコードの色を変更することで
トップヴィジュアルの背景色を変更することができます。
1 2 3 4 5 6 7 |
body.home #main_visual { background: #41BAA4; background-image: -webkit-linear-gradient(bottom right, #41baa4, #42a994); background-image: linear-gradient(to top left, #41baa4, #42a994); color: #fff; text-align: center; } |
デフォルト以外(水色・青・紺・赤)を設定している場合
デフォルト以外の色(水色・青・紺・赤)を設定している場合は、
それぞれ下記のコードの色を変更することで
トップヴィジュアルの背景色を変更することができます。
水色を設定している場合
1 2 3 4 5 6 7 8 9 10 11 12 |
/* ---------------------------------------- * カラースキーム 01 ---------------------------------------- */ /* ---------------------------------------- * frontpage ---------------------------------------- */ body.home.color01 #main_visual { background: #1DBBDA; background-image: -webkit-linear-gradient(bottom right, #1dbbda, #06abc8); background-image: linear-gradient(to top left, #1dbbda, #06abc8); color: #fff; } |
青を設定している場合
1 2 3 4 5 6 7 8 9 10 11 12 |
/* ---------------------------------------- * カラースキーム 02 ---------------------------------------- */ /* ---------------------------------------- * frontpage ---------------------------------------- */ body.home.color01 #main_visual { background: #1DBBDA; background-image: -webkit-linear-gradient(bottom right, #1dbbda, #06abc8); background-image: linear-gradient(to top left, #1dbbda, #06abc8); color: #fff; } |
紺を設定している場合
1 2 3 4 5 6 7 8 9 10 11 12 |
/* ---------------------------------------- * カラースキーム 03 ---------------------------------------- */ /* ---------------------------------------- * frontpage ---------------------------------------- */ body.home.color01 #main_visual { background: #1DBBDA; background-image: -webkit-linear-gradient(bottom right, #1dbbda, #06abc8); background-image: linear-gradient(to top left, #1dbbda, #06abc8); color: #fff; } |
赤を設定している場合
1 2 3 4 5 6 7 8 9 10 11 12 |
/* ---------------------------------------- * カラースキーム 04 ---------------------------------------- */ /* ---------------------------------------- * frontpage ---------------------------------------- */ body.home.color01 #main_visual { background: #1DBBDA; background-image: -webkit-linear-gradient(bottom right, #1dbbda, #06abc8); background-image: linear-gradient(to top left, #1dbbda, #06abc8); color: #fff; } |
背景色をグラデーションで設定する方法
Xeory Extention のトップヴィジュアルの背景色は
グラデーションがかかっています。
グラデーションの色は、下記のコードによって設定されています。
1 2 |
background-image: -webkit-linear-gradient(bottom right, #41baa4, #42a994); background-image: linear-gradient(to top left, #41baa4, #42a994); |
背景色を単色で設定する方法
グラデーションが不要な方は、上記のコードを削除して、
下記のように記載することで単色の背景となります。
1 2 3 4 5 |
body.home #main_visual { background: #41BAA4; color: #fff; text-align: center; } |
リロードすると下記のように色が変わっているはずです。
以上です。
関連記事 - Related Posts -
-
2017/11/09
-
Xeory Extention トップページ「サービス」のカスタマイズ方法
-
2017/11/29
-
Xeory Extentionのサービス記事のボタン背景色を変更する方法
-
2017/11/09
-
Xeory Extention 「見出し」のカスタマイズ方法
-
2017/11/29
-
Xeory Extentionのクローズアップ記事のボタン背景色を変更する方法
最新記事 - New Posts -
-
2017/11/29
-
Xeory Extentionのクローズアップ記事のボタン背景色を変更する方法
-
2017/11/29
-
Xeory Extentionのサービス記事のボタン背景色を変更する方法
-
2017/11/09
-
Xeory Extention 「見出し」のカスタマイズ方法
-
2017/11/09
-
Xeory Extention 「お問い合わせ」のカスタマイズ方法