申込みボタンを押してもらいやすくするためにマウスカーソルを置いたとき画像を透過(半調)にする
マウスオーバー(オンマウス)で画像の透過度を変える
テーマによってはこの機能が実装されているものもありますが、そうでないテーマも数多くあります。
パソコンでページを見ている際に「クリックできるかどうか」が、この機能によってわかりやすくなります。
単にわかりやすくすると言うだけでなく、お問い合わせや申込みボタンをよりクリックしてもらうためには、「このボタンはクリックできるよ」ということを、マウスオーバー時の画像の変化でわかるようにしておきたいものです。
半調にするためにはCSSの設定が必要。
CSSのカスタマイズは「外観」→「テーマの編集」を開き、右側のメニューの下の方にある「スタイルシート」の(style.css)で行います。
ここに下記のコードを追加すればオッケーです。
[CSS]
a:hover img {
opacity: 0.6;
filter: alpha(opacity=60);
}
[CSS]
CSSの編集は、ちょっとしたミスで表示が崩れてしまいますので、「テーマの編集」ではなくJetpackを導入していれば「外観」の項目に「CSS編集」が追加されていますので、ここに上記のコードを追加すれば良いです。
記事の執筆者プロフィール
- WordPress著者、講師、クリエイター
- 「はじめてのWordPress入門」著者。WordPressスクール、プライベートレッスン、コンテンツ制作コンサルティングなどで「自分で発信するコンテンツ」づくりをサポート。All AboutではLINEの使い方を定期連載。
この執筆者が書いた記事
コンテンツマーケティング手法2017.04.19WordPressを使ったコンテンツマーケティング。しかし本当に必要なスキルとは?
コンテンツマーケティング手法2016.08.19コンテンツマーケティングは簡単にできるものなのか
スクール紹介2016.05.23ワードプレス動画講座(YouTubeチャンネル)で学んでください
WordPressのSEO2016.03.31SEOのための段落見出し(h)タグは重要