ヘッダーのグローバルメニューが1部分だけ色が違うサイトを見かけますが、SWELLでも出来るんじゃないかと思いやってみました。
1つだけメニューの色が違うことで目立たせられるので、他のサイトとは違う個性を出すことが出来ます!
当サイトではお問合せ部分の色を変えていますので、実際に変更した手順やコードを紹介していきます。
今回はコピペで使えるようにカラーバリエーションを5種類用意しましたので、利用してくれると嬉しいです。
- 変更前と変更後の違い
- 変更する実際の手順・コード
- カラーバリエーション
グローバルメニュー変更のビフォーアフター
実際に変更の前後で外観はどう変わるかFV(ファーストビュー)で比較してみます。
変更前
![before1](https://az-designlife.site/wp-content/uploads/2023/01/f698e0596cc4e41256da963ced4d7417-1024x453.jpg)
変更後
![after1](https://az-designlife.site/wp-content/uploads/2023/01/c1f933ea60ee4ef1eea53a8fa23afdc1-1024x483.jpg)
追従ヘッダーでも変更されます。
変更前
![before2](https://az-designlife.site/wp-content/uploads/2023/01/7b5bd858a0b68d38183b955ed1a48a5f-1024x453.jpg)
変更後
![after2](https://az-designlife.site/wp-content/uploads/2023/01/5702eea63b98b737f79349facd20c6fa-1024x453.jpg)
どうですか?
目立たせたいメニューが一目瞭然かと思います!
色を変更する手順紹介
ここからは実際に色を変更していった手順を紹介します。
コピペで変更できるようにコードも紹介します!
手順としては以下の通りです。
- 外観→メニュー→適用しているグローバルメニューを選択
- 変更したいメニューにCSSクラスを付ける
- 追加CSSからコードを記述
- 「公開」を押して変更完了
![flex](https://az-designlife.site/wp-content/uploads/2023/01/5ffa23ce2627e4ee976afc11a0b6519e-1024x510.jpg)
変更手順
![after](https://az-designlife.site/wp-content/uploads/2023/01/c1f933ea60ee4ef1eea53a8fa23afdc1-1-1024x483.jpg)
![step1](https://az-designlife.site/wp-content/uploads/2023/01/4f7043130fd3f3fc5883f4a5acb05eba-1.jpg)
![step2](https://az-designlife.site/wp-content/uploads/2023/01/138875e99120a2982cff327607462c4f.jpg)
この例では問合せに対して変更したいので「contact-box」としています。
![step3](https://az-designlife.site/wp-content/uploads/2023/01/9e2b9ec3f0c18c82ff1cb3d0a164d14e.jpg)
追加CSSは設定したCSSクラスの前に「.」をつけて{コード}で囲んで表記します。
![step4](https://az-designlife.site/wp-content/uploads/2023/01/c5fb6a0ef37dd2f5e3ffa10cc4fb4292.jpg)
記述するコードは以下
.contact-box{
background-color:#050D21;/*背景色*/
color: #FFFDFB;/*文字色*/
}
.contact-box .c-smallNavTitle{
color:#FFFDFB;/*サブテキスト色*/
}
追加CSSに他のコードが記述されていたら、消さないように注意。
![step5](https://az-designlife.site/wp-content/uploads/2023/01/cc1071c35c023643ce052ad44fe188dd.jpg)
最後に公開を押したら変更が適用されます。
![step6](https://az-designlife.site/wp-content/uploads/2023/01/6b2dfe066533275f45f9b00f49e0bc5d.jpg)
カラーバリエーション5種紹介
![color](https://az-designlife.site/wp-content/uploads/2023/01/34c527eeed9f98c9f0be337941e5c1e5-1024x510.jpg)
それぞれコード紹介していますが、変更したい部分だけコピペしてください。
.○○○{
コード
}
と{}で囲まれているのをしっかり確認して下さい。
黒×白
![black](https://az-designlife.site/wp-content/uploads/2023/01/black.jpg)
.○○○-box{
background-color:#050D21;/*背景色*/
color: #FFFDFB;/*文字色*/
}
.○○○-box .c-smallNavTitle{
color:#FFFDFB;/*サブテキスト色*/
}
青×白
![blue](https://az-designlife.site/wp-content/uploads/2023/01/blue.jpg)
.○○○-box{
background-color:#1A67F8;/*背景色*/
color:white;/*文字色*/
}
.○○○-box .c-smallNavTitle{
color:white;/*サブテキスト色*/
}
明るい赤×白
![red](https://az-designlife.site/wp-content/uploads/2023/01/red.jpg)
.○○○-box{
background-color:#F0572F;/*背景色*/
color:white;/*文字色*/
}
.○○○-box .c-smallNavTitle{
color:white;/*サブテキスト色*/
}
濃い黄色×白
![yellow](https://az-designlife.site/wp-content/uploads/2023/01/yellow.jpg)
.○○○-box{
background-color:#FFC500;/*背景色*/
color:white;/*文字色*/
}
.○○○-box .c-smallNavTitle{
color:white;/*サブテキスト色*/
}
淡い緑色×白
![green](https://az-designlife.site/wp-content/uploads/2023/01/green.jpg)
.○○○-box{
background-color:#89C09F;/*背景色*/
color:white;/*文字色*/
}
.○○○-box .c-smallNavTitle{
color:white;/*サブテキスト色*/
}
グレー×白
![gray](https://az-designlife.site/wp-content/uploads/2023/01/gray.jpg)
.○○○-box{
background-color:#b3b2ad;/*背景色*/
color:white;/*文字色*/
}
.○○○-box .c-smallNavTitle{
color:black;/*サブテキスト色*/
}
自分で色を決めるなら「原色大辞典」
色にこだわるなら自分で色の配色を探すことが出来る「原色大辞典」が分かりやすいのでおすすめです。
まとめ
![今回のまとめ](https://az-designlife.site/wp-content/uploads/2022/12/0cf2aba568c158160c92e737ae84d903-1024x626.jpg)
今回は、SWELLのグローバルメニューを個別に色変更する方法を紹介しました。
ちょっとしたカスタマイズですが、SWELLの標準機能にないカスタマイズなので他のサイトとはまた違ったメニューが作れると思います!
他にも「こんなカスタマイズできないかな?」などの質問等がありましたら、Twitterかコメントで聞いていただけたらと思います。対応出来そうなら記事にして分かりやすく公開していきます!
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
最後までお読みいただきありがとうございました。
みなさんの参考になれば嬉しいです。
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
当サイトでは自分の制作物の他にWebサイト制作で実際に行った学習や悩んだこと、WordPressのカスタマイズについてなども発信していますので、今後も読んで参考にしていただければと思います。
コメント