申込みボタンを押してもらいやすくするためにマウスカーソルを置いたとき画像を透過(半調)にする

マウスオーバー(オンマウス)で画像の透過度を変える

マウスを画像の上にのせたときに画像の透明度を変える

マウスを画像の上にのせたときに画像の透明度を変える

テーマによってはこの機能が実装されているものもありますが、そうでないテーマも数多くあります。

パソコンでページを見ている際に「クリックできるかどうか」が、この機能によってわかりやすくなります。

単にわかりやすくすると言うだけでなく、お問い合わせや申込みボタンをよりクリックしてもらうためには、「このボタンはクリックできるよ」ということを、マウスオーバー時の画像の変化でわかるようにしておきたいものです。

半調にするためにはCSSの設定が必要。

CSSのカスタマイズは「外観」→「テーマの編集」を開き、右側のメニューの下の方にある「スタイルシート」の(style.css)で行います。

ここに下記のコードを追加すればオッケーです。

[CSS]
a:hover img {
opacity: 0.6;
filter: alpha(opacity=60);
}
[CSS]

CSSの編集は、ちょっとしたミスで表示が崩れてしまいますので、「テーマの編集」ではなくJetpackを導入していれば「外観」の項目に「CSS編集」が追加されていますので、ここに上記のコードを追加すれば良いです。

Follow me!

記事の執筆者プロフィール

原久鷹WordPress著者、講師、クリエイターTwitter:@eagleprayer
「はじめてのWordPress入門」著者。WordPressスクール、プライベートレッスン、コンテンツ制作コンサルティングなどで「自分で発信するコンテンツ」づくりをサポート。All AboutではLINEの使い方を定期連載。
  • Facebook
  • twitter
  • Hatena