【SWELL】ヘッダーメニューの上下に余白を付け、ホバーエフェクトを見やすくする方法

SWELLのヘッダーメニューのカスタマイズは外観からカスタマイザーで分かりやすく変更をかけることが出来ます。

その中でも、ヘッダーメニューのマウスホバーエフェクトの「ラインの出現」が気に入っています！

ですが、１点だけ気になる点があるんです…！

それはヘッダーのホバーエフェクトがメインビジュアルにかかってエフェクトが見えにくいことです！！

ヨメ

ヘッダーの下に余白があれば見えるんじゃない…？

それだ！！

今回は追加CSSを記述してヘッダーの上下に余白をつけてみたので、その方法とコードを紹介します。

おしゃれで使いやすいサイトを作るなら「SWELL」がおすすめ！

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

SWELL公式サイトを見てみる

ホバーエフェクトのビフォーアフター

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

変更前

変更後

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

変更前

変更後

ヘッダーの余白を付ける手順とコード

ここからは実際に余白を付ける手順を紹介します。

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

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

変更手順

STEP

外観→追加CSSからコードを記述

追加CSSはSWELLのヘッダーメニューである「c-gnav」に「.」をつけて{コード}で囲んで表記します。

記述するコードはこちらです。

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

/*ナビ下余白*/
.c-gnav {
	padding-top:2px;/*上の余白*/
	padding-bottom:2px;/*下の余白*/
}

STEP

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

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

コード解説

今回のコードについてもう少し詳しく解説していきます。

/*ナビ下余白*/
.c-gnav {
	padding-top:2px;/*上の余白*/
	padding-bottom:2px;/*下の余白*/
}

「c-gnav」はヘッダーの中のグローバルメニューを囲んでいるクラス名になっています。

そして、ホバーエフェクトはメニューに対して適用されています。

その為、囲んでいるc-gnavとメニューの間にpaddingで間を開けることによって、ホバーエフェクト部分とメインビジュアル部分の余白が生まれるようになっています。

また、自分の場合はメニューの背景色を一部変更しているので、下だけ余白を開けると追従ヘッダーになった時に上の余白がないので、バランスを取る為に上下で余白を設定しています。

余白下のみ

余白上下あり

メニューの一部を色変更する方法はこちら

あわせて読みたい

【SWELL】グローバルメニューを個別で色の変更をする方法 ヘッダーのグローバルメニューが1部分だけ色が違うサイトを見かけますが、SWELLでも出来るんじゃないかと思いやってみました。 1つだけメニューの色が違うことで目立た…

まとめ

今回はSWELLのヘッダーメニューの上下に余白を付ける方法を紹介しました！

ホバーエフェクトがカッコいいのに、メインビジュアルにかかって分かりにくい！！ってめちゃくちゃもったいないので、ぜひ活用していただけたらと思います！

その他にもSWELLについてまとめているので併せて読んでくれると嬉しいです。

ヨメ

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

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