SWELLのヘッダーメニューのカスタマイズは外観からカスタマイザーで分かりやすく変更をかけることが出来ます。
その中でも、ヘッダーメニューのマウスホバーエフェクトの「ラインの出現」が気に入っています!
ですが、1点だけ気になる点があるんです…!
それはヘッダーのホバーエフェクトがメインビジュアルにかかってエフェクトが見えにくいことです!!
![](https://az-designlife.site/wp-content/uploads/2022/12/08f9aeb8bb454593cf7fbc8cd2990b93-1-150x150.png)
ヘッダーの下に余白があれば見えるんじゃない…?
![](https://az-designlife.site/wp-content/uploads/2022/12/5972512a8d365c59e7787baf6585b29b-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5972512a8d365c59e7787baf6585b29b-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5972512a8d365c59e7787baf6585b29b-150x150.png)
それだ!!
今回は追加CSSを記述してヘッダーの上下に余白をつけてみたので、その方法とコードを紹介します。
- ヘッダーに余白を付ける方法
- コード解説
おしゃれで使いやすいサイトを作るなら「SWELL」がおすすめ!
ホバーエフェクトのビフォーアフター
実際に変更の前後で外観はどう変わるかFV(ファーストビュー)で比較してみます。
変更前
![](https://az-designlife.site/wp-content/uploads/2023/01/7644e0601630091b0e7f658d658bc79b-1024x261.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/7644e0601630091b0e7f658d658bc79b-1024x261.jpg)
変更後
![](https://az-designlife.site/wp-content/uploads/2023/01/f367cf241e9845760004577d7fa9df7e-1024x261.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/f367cf241e9845760004577d7fa9df7e-1024x261.jpg)
追従ヘッダーでも変更されます。
変更前
![](https://az-designlife.site/wp-content/uploads/2023/01/358539593d305e0d797ad37e428c7aa5-1024x261.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/358539593d305e0d797ad37e428c7aa5-1024x261.jpg)
変更後
![](https://az-designlife.site/wp-content/uploads/2023/01/0116e1b3265a4b97c7017eec7b17bf58-1024x261.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/0116e1b3265a4b97c7017eec7b17bf58-1024x261.jpg)
ヘッダーの余白を付ける手順とコード
ここからは実際に余白を付ける手順を紹介します。
コピペで変更できるようにコードも紹介します!
手順としては以下の通りです。
- 追加CSSからコードを記述
- 「公開」を押して変更完了
変更手順
追加CSSはSWELLのヘッダーメニューである「c-gnav」に「.」をつけて{コード}で囲んで表記します。
![](https://az-designlife.site/wp-content/uploads/2023/01/c5fb6a0ef37dd2f5e3ffa10cc4fb4292.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/c5fb6a0ef37dd2f5e3ffa10cc4fb4292.jpg)
記述するコードはこちらです。
/*ナビ下余白*/
.c-gnav {
padding-top:2px;/*上の余白*/
padding-bottom:2px;/*下の余白*/
}
最後に公開を押したら変更が適用されます。
コード解説
今回のコードについてもう少し詳しく解説していきます。
/*ナビ下余白*/
.c-gnav {
padding-top:2px;/*上の余白*/
padding-bottom:2px;/*下の余白*/
}
「c-gnav」はヘッダーの中のグローバルメニューを囲んでいるクラス名になっています。
![](https://az-designlife.site/wp-content/uploads/2023/01/24104b9e450af693aba715d82272c560-1024x383.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/24104b9e450af693aba715d82272c560-1024x383.jpg)
そして、ホバーエフェクトはメニューに対して適用されています。
その為、囲んでいるc-gnavとメニューの間にpaddingで間を開けることによって、ホバーエフェクト部分とメインビジュアル部分の余白が生まれるようになっています。
![](https://az-designlife.site/wp-content/uploads/2023/01/7644e0601630091b0e7f658d658bc79b-1024x261.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/7644e0601630091b0e7f658d658bc79b-1024x261.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/abe48a848e96dc4d1eb763ecbf55fad3-1024x383.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/abe48a848e96dc4d1eb763ecbf55fad3-1024x383.jpg)
また、自分の場合はメニューの背景色を一部変更しているので、下だけ余白を開けると追従ヘッダーになった時に上の余白がないので、バランスを取る為に上下で余白を設定しています。
余白下のみ
![](https://az-designlife.site/wp-content/uploads/2023/01/7c6917399c3b497ed9e62fd7efacd205.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/7c6917399c3b497ed9e62fd7efacd205.jpg)
余白上下あり
![](https://az-designlife.site/wp-content/uploads/2023/01/f9d3223aef16bdb854221b5ec18ac5d3.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/f9d3223aef16bdb854221b5ec18ac5d3.jpg)
メニューの一部を色変更する方法はこちら
![](https://az-designlife.site/wp-content/uploads/2023/01/1c7bd98d1d8a7eab4a2f3e4387d58d44-300x158.jpg)
![](https://az-designlife.site/wp-content/uploads/2023/01/1c7bd98d1d8a7eab4a2f3e4387d58d44-300x158.jpg)
まとめ
![今回のまとめ](https://az-designlife.site/wp-content/uploads/2022/12/0cf2aba568c158160c92e737ae84d903-1024x626.jpg)
![今回のまとめ](https://az-designlife.site/wp-content/uploads/2022/12/0cf2aba568c158160c92e737ae84d903-1024x626.jpg)
今回はSWELLのヘッダーメニューの上下に余白を付ける方法を紹介しました!
ホバーエフェクトがカッコいいのに、メインビジュアルにかかって分かりにくい!!ってめちゃくちゃもったいないので、ぜひ活用していただけたらと思います!
他にも「こんなカスタマイズできないかな?」などの質問等がありましたら、Twitterかコメントで聞いていただけたらと思います。対応出来そうなら記事にして分かりやすく公開していきます!
その他にもSWELLについてまとめているので併せて読んでくれると嬉しいです。
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
![](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のカスタマイズについてなども発信していますので、今後も読んで参考にしていただければと思います。
コメント