【SWELL】グローバルメニューを個別で色の変更をする方法

SWELLのグローバルメニュー色変更

ヘッダーのグローバルメニューが1部分だけ色が違うサイトを見かけますが、SWELLでも出来るんじゃないかと思いやってみました。

1つだけメニューの色が違うことで目立たせられるので、他のサイトとは違う個性を出すことが出来ます!

当サイトではお問合せ部分の色を変えていますので、実際に変更した手順やコードを紹介していきます。

今回はコピペで使えるようにカラーバリエーションを5種類用意しましたので、利用してくれると嬉しいです。

この記事で分かること
  • 変更前と変更後の違い
  • 変更する実際の手順・コード
  • カラーバリエーション
目次

グローバルメニュー変更のビフォーアフター

実際に変更の前後で外観はどう変わるかFV(ファーストビュー)で比較してみます。

変更前

before1

変更後

after1

追従ヘッダーでも変更されます。

変更前

before2

変更後

after2

どうですか?

目立たせたいメニューが一目瞭然かと思います!

色を変更する手順紹介

ここからは実際に色を変更していった手順を紹介します。

コピペで変更できるようにコードも紹介します!

手順としては以下の通りです。

変更の手順
  1. 外観→メニュー→適用しているグローバルメニューを選択
  2. 変更したいメニューにCSSクラスを付ける
  3. 追加CSSからコードを記述
  4. 「公開」を押して変更完了

ヘッダーナビを右・左寄せにしている場合は大きく背景が変わります
「背景グレー」を選択しているとマウスホバー時にグレーに変わるので注意
アイコンを設定している場合はアイコンの色も文字色と同じになります

flex

変更手順

after
STEP
外観→メニュー→適用しているグローバルメニューを選択
step1
step2
STEP
変更したいメニューにCSSクラスを付ける

この例では問合せに対して変更したいので「contact-box」としています。

クラス名は半角英数字と使用できる記号は「-」と「_」のみです。そして数字から始まるのは適用されません。

step3
STEP
追加CSSからコードを記述

追加CSSは設定したCSSクラスの前に「.」をつけて{コード}で囲んで表記します。

step4

記述するコードは以下

.contact-box{
	background-color:#050D21;/*背景色*/
	color: #FFFDFB;/*文字色*/
}
.contact-box .c-smallNavTitle{
	color:#FFFDFB;/*サブテキスト色*/
}

追加CSSに他のコードが記述されていたら、消さないように注意。

step5
STEP
「公開」を押して変更完了

最後に公開を押したら変更が適用されます。

step6

各メニューで個別にCSSクラスを付けて、それぞれ追加することで色を変更することも可能です。

カラーバリエーション5種紹介

color

それぞれコード紹介していますが、変更したい部分だけコピペしてください。

.○○○{
コード
}

{}で囲まれているのをしっかり確認して下さい。

黒×白

black
.○○○-box{
	background-color:#050D21;/*背景色*/
	color: #FFFDFB;/*文字色*/
}
.○○○-box .c-smallNavTitle{
	color:#FFFDFB;/*サブテキスト色*/
}

青×白

blue
.○○○-box{
	background-color:#1A67F8;/*背景色*/
	color:white;/*文字色*/
}
.○○○-box .c-smallNavTitle{
	color:white;/*サブテキスト色*/
}

明るい赤×白

red
.○○○-box{
	background-color:#F0572F;/*背景色*/
	color:white;/*文字色*/
}
.○○○-box .c-smallNavTitle{
	color:white;/*サブテキスト色*/
}

濃い黄色×白

yellow
.○○○-box{
	background-color:#FFC500;/*背景色*/
	color:white;/*文字色*/
}
.○○○-box .c-smallNavTitle{
	color:white;/*サブテキスト色*/
}

淡い緑色×白

green
.○○○-box{
	background-color:#89C09F;/*背景色*/
	color:white;/*文字色*/
}
.○○○-box .c-smallNavTitle{
	color:white;/*サブテキスト色*/
}

グレー×白

gray
.○○○-box{
	background-color:#b3b2ad;/*背景色*/
	color:white;/*文字色*/
}
.○○○-box .c-smallNavTitle{
	color:black;/*サブテキスト色*/
}

自分で色を決めるなら「原色大辞典」

色にこだわるなら自分で色の配色を探すことが出来る「原色大辞典」が分かりやすいのでおすすめです。

まとめ

今回のまとめ

今回は、SWELLのグローバルメニューを個別に色変更する方法を紹介しました。

ちょっとしたカスタマイズですが、SWELLの標準機能にないカスタマイズなので他のサイトとはまた違ったメニューが作れると思います!

他にも「こんなカスタマイズできないかな?」などの質問等がありましたら、Twitterかコメントで聞いていただけたらと思います。対応出来そうなら記事にして分かりやすく公開していきます!

ヨメ

最後までお読みいただきありがとうございました。
みなさんの参考になれば嬉しいです。

当サイトでは自分の制作物の他にWebサイト制作で実際に行った学習や悩んだこと、WordPressのカスタマイズについてなども発信していますので、今後も読んで参考にしていただければと思います。

\ コンテンツの作りやすさ抜群の人気テーマ /

SWELLのグローバルメニュー色変更

この記事が気に入ったら
いいね または フォローしてね!

シェアしていただけると喜びます!
  • URLをコピーしました!

コメント

コメントする

目次