【SWELL】ボックスメニューをマウスホバー時に色を変更するカスタマイズ

ハシビィくん

SWELLのボックスメニューデザイン気に入ってるんすけど、マウスホバーの時にわかりやすくしたいっす！

カピーさん

了解！CSSを加えるだけでカスタマイズできるから教えていくぞ〜

デフォルトの状態だと、どうしても色の変化が乏しい印象を持ってしまうので、物足りないという方向けのカスタマイズになります。（デフォルトでは薄くグレーがかかる装飾）

SWELLのボックスメニューはサイト型トップページやサイドバーに使用する傾向が強く、人気の機能となっております。メインカラーなどとの差でアピールすることもできますので、ぜひ知っておくと便利です！

ボックスメニューの色を変更

まずボックスメニューの設定（色変更込み）する手順は以下になります。

CSSを入力

入力するコードは下記になります。

.swell-block-box-menu__item:hover{
background:#e44141;
color:yellow;
}

「カスタムCSS＆JS」のCSS用コードにCSSを入力してください。

あくまで:hover時に色が変わるコードなので、スマホ閲覧時には不向きということはご理解ください。

まとめ：ボックスメニューをマウスホバー時に色を変更するカスタマイズ

SWELLのボックスメニューはデザイン性に優れているものの、初期状態ではホバー時の視認性が弱めです。

CSSを追加することで、マウスホバー時に背景色・文字色・アイコン色まで自由に変更でき、より目立たせるカスタマイズが可能になります。
トップページやサイドバーでの使用時に、ユーザーの注目を集めやすくなるので、ぜひ導入してみてください。