【楽天】CSS Tips┃バナーへマウスオンした場合の効果を与える方法

この記事は過去に書かれた「ogaRia繁盛レシピ」を再掲載しています。予めご了承くださいませ。

こんにちは！
天気がよくなってやっと洗濯物を洗い終えたogaRiaサポートSです。

ショップページを綺麗に分かりやすく見せたい！
ということで今回はちょっとしたCSSテクニックをご紹介したいと思います。

リンク画像にマウスが触れたら画像を光らせる

リンクが貼られているバナーなどにマウスが触れると色が変わったり、
変化をさせているサイトやショップを見たことあると思います。
今回はこの変化を簡単に全てのページに反映させるCSSをご紹介します。

通常リンク付きバナー

特にマウスが触れても変化しません。

CSS適応リンク付きバナー

下記のCSSを楽天の共通部分、ヘッダーや共通説明文などに
コピペするだけで全ページに反映されます。
GOLDを使ったページなどはそのページにも反映してください。

<style type="text/css">
<!--
a:active img{
filter: Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
@media screen and (min-width:  960px) {
    a:hover img{
filter: Alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
    }
}
-->
</style>

まとめ

いかかでしたか？
ちょっとのCSSを反映するだけでリンクなのかが
とても分かりやすくなったかと思います。
こちらはヤフーには残念ながら非対応です。
また、PC以外は適応させないようなCSSになっておりますので
予めご了承くださいませ。

以上、ogaRiaチームでした！