【swellカスタマイズ】ボックスメニューのマウスホバー色の変更

>>Amazonのお得な最新のタイムセール情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック15,000円」を進呈中！

SWELLのボックスメニューのマウスホバー時の色変えたい

最近SWELLのボックスメニューを採用するBLOG一気に増えて来ましたねー

これは結構みんな欲しかった機能だと思います。

見た目もぐっとおしゃれになりますしｗ

でも唯一不満なのはボックスメニューにマウスがホバーした時が地味すぎてよくわかんない。

とくに老眼が激しい筆者は見えないｗｗｗ

まぁこれは結論書くと一個CSS追加するだけだよ

では実際にみてみましょう。

PCなら画面右端にも本稼働のボックスメニューが動いてますがスマホでも見やすいように下に重複表示します。

気がついた方はすぐにわかると思いますが本来のボックスメニューはマウスホバー時に

透過率を下げた白を表示してるのかな？なので薄ーい灰色みたいな感じ？

なのであまり目立ちませんので老眼にはきつい。

なのでCSSで色被せます。被せた結果が上のボックスメニュー。

実際のcssは

.swell-block-box-menu__item:hover{background:#dbf8ff;color:brown;}

文字色とかホバーした時の色はお好きな色に変更してください。

このCSSをカスタマイズ>追加CSSに追記するか

外観＞テーマファイルエディターで

SWELL CHILD: スタイルシート (style.css）に追加でもどちらでもOK。

• background:#dbf8ff マウスホバー時のメニュ内の反転色
• color:brown; マウスホバー時のボックス内の文字色

以上です。簡単でしょ？