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

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

体ぶっ壊して死にかけたので人生RESET中。

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

Some visuals are licensed via Canva Pro (includes commercial rights).
Usage complies with Canva’s license terms at the time of use.
License policy: canva.com/policies/content-license-agreement

X
     この記事はプロモーションを含みます
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をコピーしました!

この記事を書いた人

makotoのアバター makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在 ほぼ自由人。

contents