【swellカスタマイズ】ボックスメニューのマウスホバー色の変更
contents
SWELLのボックスメニューのマウスホバー時の色変えたい
最近SWELLのボックスメニューを採用するBLOG一気に増えて来ましたねー
これは結構みんな欲しかった機能だと思います。
見た目もぐっとおしゃれになりますしw
でも唯一不満なのはボックスメニューにマウスがホバーした時が地味すぎてよくわかんない。
とくに老眼が激しい筆者は見えないwww
まぁこれは結論書くと一個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; マウスホバー時のボックス内の文字色
以上です。簡単でしょ?