WordPress

CSSでマウスオーバーしたときに画像が白く半透明に光る方法

霧島ユウタのメルマガ

WordPressでWebサイトを構築して、サイト内に挿入した画像に対して販売ページや読者に見てほしい記事をリンクしていたとしても、その画像をクリックしてもらわないことには何も始まらないですよね?

マウスオーバーしたときに画像に何らかの変化がなければ、読者によってはクリックできない要素だと勘違いしているケースも多いです。

マウスオーバーしたときに画像が白く半透明に光らせる方法をロールオーバーと呼びますけど、ユーザー目線でカスタマイズされたサイトには必ずと言ってよいほど設定されています。

ただ、「設定が難しそう…」っと思われるかもしれませんが、実はものすごく簡単です。

WordPressで画像が白く半透明に光る方法

やり方は、CSSに以下のコードを貼り付けます。

ズラッと並んでいるCSSのコードを見ながら設定するのは大変そうだと思われるかもしれませんが、なにもstyle.cssにコードを挿入する必要はなく、

WordPress → 外観 → カスタマイズ → 追加CSS 

を選択して、上記のコードをコピペすればオッケイです。

/* */ で囲まれた文字は、コメントアウトと呼び、どこにどんな内容のコードが書かれているかひと目でわかるように使用するものです。

/* */はレイアウトにおいて効果を持ちませんので、お好きな文字を選び、ひと目でわかるように設定しておきましょう。

ロールオーバーの細かい解説はコチラ

opacity:0.7; の部分は画像の透明度を表しています。0〜1の間で設定可能です。

0に近づくほど透明になり、1に近づくほど不透明になりますので、お好みで調整してください。

transition: 0.6s;という項目は、画像が白く光るまでの速度を調整するためのコードです。

上記のコードは、「0.6秒かけて白く光らせる」という意味です。

もっとゆっくり光らせたい場合は1秒に設定するなど、こちらも必要であればお好みの秒数に設定してみてください。

 

以上でセッティングは完了です。

ロールオーバーを設定すれば、画像に何らかの要素が盛り込まれていることをユーザーへ確実に伝えることができますので、積極的に特定のページに誘導させたい場合はすぐに導入しましょう。

霧島ユウタのメルマガ