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

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

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

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

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

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

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

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

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