トップページのマウスホバー時の文字が不明瞭になる挙動を改善できた。

左がマウスホバー時、右はマウスが外れている

SWELLを導入したデフォルトの状態では、サムネイル上にマウスカーソルを持っていくと、マウスホバー時にフィルターがかかる効果がついている。 投稿リストの上にマウスを持っていったときに掛かる。

「明瞭 ▶ 不明瞭」 という効果だ。

これは、「選択されている」ということが分かりやすいし、全体的に解像度が落ちるので「クリックして詳細を確認したい」という気持ちになるかもしれない。しかし、今回のサムネイル表示の場合は、良くないのではないかと思った。

とくに記事タイトル下のディスクリプション?(記事の最初の分が数文字表示されている部分)が、この場合は、マウスオーバー時に見えやすくしたほうが良いのではないかと思った。字が小さいので、そうしたしたほうが良いと思った。自分が使用しているモニタも解像度が低いことも関係している。

他のSWELLのサイトを見ていても、この効果をそのままにしている方がほとんどだったので、差別化、個性を出す意味でも、逆の効果「マウスホバーしたら明瞭化させる」という方向にしたいと考えた。

2020-12-13 あたりから、このフィルターのようなものをキャンセルしたいと思っていたが、なかなか解決できなかった。

SWELL側の初期設定の問題かなと思い、フォーラムで質問したところ、開発者の了さんから回答を頂いた。最初は、まだピンと来ていなかったが、頑張って色々さわっていたろころ、main.css の存在にやっと気づいた。Javascript やらで何やら動いているのかなと思って、main.cssは全く気にしていなかった。

そこから、それらしい該当箇所を探しだし opacity:.75 となっている箇所があったので 1 に設定した。それ再適用させたところ希望通りに、「マウスホバー時のフィルターによる文字の不明瞭化」をキャンセルすることができた。

(余談だが、Dreamweaver CS6 でCSSファイルを開いたところズラーッと改行されずに羅列表示されたので、戸惑った。Visual Studio だと改行されるのかな?と疑問に思った。今度試してみたい。)

パソコンだとマウスホバーしたときに「 不明瞭 ▶ 明瞭 」という動きをつけることで 『選択されてることを示す』ことになって良さそうなのでそうしようkな? と思ったが、よく考えると、スマホで見る事もあり、スマホの場合は、マウスホバーの操作が出来ない。なのでやめた。

スマホのことも考えると、フィルターの効果をつけるとすれば「 明瞭 ▶ 不明瞭 」 という動きが無難なのかなと思った。

スマホの場合だと、初期状態を不明瞭にしておくと見にくいなと思った。

そこで、「スマホのときは、別の動く気をさせるのも良いのでは?」と思ったが、時間がかかりそうなので今の方法に落ち着いた。

とりあえず「パソコンで選択(ホバーさせたとき)したときの文字の不明瞭化」が個人的には、ちょっと気になったのでキャンセルして、今の形になった。

なんとか個人的に満足出来る形になったと思う

「こういった カスタマイズは流石に自分でしないといけないな」 と思った。

この記事が気に入ったら
フォローしてね!

ここで投稿は終わりです
  • URLをコピーしました!
  • URLをコピーしました!
目次