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

ツイート

スマホはコチラ

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

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

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

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

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

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

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

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

設定

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

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

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

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

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

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

先ほどの

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);
}

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

以上です。

【2014.7.15】