画像の上にマウスを乗せることで、何も反応しない画像とマウスを画像に乗せたときに白く光る画像では読者の反応率というものは全く違います。
これが単なる画像ではなく、販売ページへ移動させる場合、クリック率に直結する、つまり何かを販売する時に、そこで売上の善し悪しが決まってしまうということに繋がります。
そのためにこの設定をしていない方は、是非とも導入することをおすすめします。
マウスの上にカーソルを持っていくことで光らせる方法をロールオーバーといいます。
設定方法は難しそうに思いますが、実はものすごく簡単です。
ブログ上の画像、すべてを光らせる方法
この場合は CSSに以下を追加します。
a:hover img{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: “alpha( opacity=70 )”;
}
0.8や80というのは、透明度さすものなので、0.7、70や0.9、90と言うように、好きな透明度に設定するのがいいのかもしれませんね。
CSS を追加する場所なんですが、賢威を例にすると以下の箇所になります。
design.CSSの最下部にコピペしておけば OK です。
■特定の画像のみ光らせる方法
すべての画像ではなく特定の画像だけ光らせたいときは・・・
a:hover img ⇒ a:hover img.hoverImg と変えましょう。
a:hover img.hoverImg{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}
そして同じく、design.CSSに貼り付けます。
そして、光らせたい画像には以下のHTMLを追加させます。
class=”hoverImg”
これだけで簡単に特定の画像を光らせることができます。
デザイン的に画像を光らせることが嫌な人は構いませんが、積極的にページを誘導させたい人は、是非投入することにしましょう。
5年以上ブログで稼ぎ続けている経験を元に、「月収1万円を稼ぐことに特化したブログノウハウ」を作ってみました。お気軽にダウンロードしてみてください。
月収10万円以上稼ぎたい人への「メール講座」もやってます。
