こんにちは。
今回はワードプレステーマ「SWELL」を使用して、ホームページのヘッダーメニューを見栄えよくデザインにアレンジする方法をご紹介いたします。
お問い合わせメニューの重要性
ホームページを制作するにあたって、一番期待したい効果がお客様からのお問い合わせではないでしょうか。
お問い合わせヘッダーメニューはそのお客様からのお問い合わせに直結する重要な役割を果たしています。
しかし、他のヘッダーメニューと同じデザインでは埋もれてしまって目が行きにくいですよね。
こんなとき、少し手を加えるだけで他のメニューより直感的にすぐに目がいくデザインに生まれ変わらせることができます。
さっそく、こちらの方法についてご紹介いたします。
お問い合わせメニューを強調させる方法
（注意事項：こちらの方法はお問い合わせメニューの並びが一番右側にある場合を想定して書いています）
①まずは、管理画面から「カスタマイズ」をクリックします
②左側の項目にある「追加CSS」をクリックします
③以下のコードをコピペします
（注意事項：こちらの方法はお問い合わせメニューの並びが一番右側にある場合を想定して書いています）
【貼り付けるコード】
/* お問い合わせヘッダーメニューのスタイル */
.c-gnav li:last-of-type a {
background-color: var(--color_main);
color: #fff;
}
.c-gnav li:last-of-type a::after {
background-color: #fff;
}
/* お問い合わせヘッダーメニューのスタイル */
/* スマホメニューにも対応させる場合 */
.c-spnav li:last-of-type a {
background-color: var(--color_main);
color: #fff;
}
④上の「公開」をクリックします
⑤完成！
これで、自然とお問い合わせメニューに目がいくデザインに生まれ変わりました！
少し手を加えるだけでこのように印象ががらっとかわりますので、ぜひお試しください。
それではまた。
サクッとかっこいいホームページを制作したいなら
デザイン丸投げOK!
SWELL専用/低価格でスピーディーに制作します
