Menu/Prof
翻訳
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。
\ ポイント最大10倍! /

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; マウスホバー時のボックス内の文字色

以上です。簡単でしょ?

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!
contents