画像リンクにマウスオーバーするとす~と色が変わるやり方

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

画像リンクにマウスオーバーするとす~と色が変わるやり方

サンプル画像

このタイトル、イマイチパッとしませんね。
コピーセンスゼロのお手本みたい。。。。

 

そんなことはどうでもいいですが、
画像リンクをリンクだとはっきり訪問者にわからせるための手段の一つに
画像の色を変えるというのがあります。

 

リンクのついた画像にマウスを乗せると通常は指マークに変わると思います。
しかしそれだけだとリンクだよということがはっきり伝わらず
そのままスルーされてしまう場合もあります。

 

これが画像にマウスを乗せたときに指マークだけでなく、
画像の色が変化したならどうでしょう。
指マークだけの時よりは確実に目立つでしょうね。

 

クリックしてくれる確率も高まる、、、かもしれません。
いや、確実に高まりますよ。(^^ゞ

 

そんな色の変わるやり方をご紹介しますので、
ぜひあなたのサイトにも取り入れてみてください。

 

画像の色の変換方法についてはいくつかあるんですけど、
今回ご紹介するのは使っているサイトも多いと思われる
『透明度を変える』だけの簡単な方法です。

 

こんな感じです。下の↓画像にマウスを乗せてみてください。
す~と色が薄くなりますでしょ?

 

サンプル画像

 

設定

「テンプレート」→「スタイルシート編集」を開き、
下の↓設定部分を探します。(上の方にあります)

 

a img {
      border: none;
      text-decoration: none;
}

 

この下に以下のスタイルを追加します。

 

a img:hover {
         opacity: 0.7;
         filter: alpha(opacity=70);
}

 

これの意味は
「リンクの付いた画像にマウスオンした際には透明度を 10(完全不透明)から 0.7(30%だけ透明になる)に変更する」というものです。

 

透明度を 0.6にしたい時は 0.7を 0.6に、70を 60に変更します。

 

ただしこのままだとマウスを乗せたときに一気に色が変わってしまうので、
ほわ~と色をゆっくり変える設定を足してやりましょう。

 

先ほどの

a img {
      border: none;
      text-decoration: none;
}

 

に以下を加筆します。

 

-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;

 

これの意味は 0.2秒かけて色を変化させるというモノです。
もっとゆっくりにしたい時は 3ヵ所の 0.2を全部 0.5などに変えてやります。

 

最終的にはこんな↓感じになります。

 

コード

a img {
	border: none;
	text-decoration: none;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
a img:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

これでリンクの付いた画像すべてに適用されます。

 

-webkit-transition 以下の 3行は(ほわ~と変わる動作)、インターネットエクスプローラー 9以下では確か機能しなかったはずです。ただし透明度の変化はそのまま有効です。

 

以上です。

購入ページへ


TOPへ戻る