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

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%だけ透明になる)に変更する」
というものです。

透明度を40%にしたい時は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以下では確か機能しなかったはずです。ただし透明度の変化はそのまま有効です。

 

以上です。

 

購入ページへ


てっぺん