最終更新日:2018/06/16こんばんはハカセです。ここのところなかなか忙しい毎日を送っていますが、たまにはブログ更新してみます。楽天でショップをやっていると、夥しい数のバナーを作ると思いますが、バナーで大切なのはクリックしてもらう事です。クリックしてもらって、その先にあるページにアクセスしてもらって、初めてバナーは意味を持ちます。クリックしたくなる様な、その先に何があるのか見たくなる様な、そんなバナーが作れたら一番ですが、こればっかりは中々奥が深くて難しいです。バナーにマウスを合わせた時「ここにはリンク貼ってあるよ!」って主張が出来たら、もっとバナーはクリックしてもらえるのでは?そんな訳で本日はバナーにマウスが乗ったらフワッと半透明になるスクリプトをご紹介します。例によってjQueryを使用していますので、こちらもご参考に。NxWorld正直言ってある程度出来る人はこのサイト見てもらった方がわかりやすくて早いです・・・。簡易バージョン「CSSだけ」(参考記事の2番です)マウスを乗せると半透明になります。IEでも一応半透明にはなりますが、IE9までだと「フワッ」とならないのが弱点ですが、JavaScript(jQuery)を使用していないので、RMSの商品ページやカテゴリページにも使用出来ます。alpha(opacity=60);}これで充分な気もしますが、余計なこだわりを発揮するのがクリエイターの良い(悪い)ところ。次はIEでもフワッとなるバージョンです。jQueryバージョン(参考記事の8番です)jQueryを使用しているのでライブラリファイルをGOLDにアップして、使用するページで読み込む必要があります。1.0);});});</script>jQueryを使用しているので、当然の事ながらGOLDのページでしか使用出来ません・・・。CSSバージョンとの併用が現実的なところでしょうか。まとめ的な何かjQueryバージョンはIE7でもフワッと出来るので素晴らしいのですが、結局楽天のページで使うのであればCSSで実装するしか無いのかな。参考サイトには他にも役に立つマウスオーバーイベントが乗ってますので、是非ご覧になってみて下さい。NxWorldさんには改めて感謝です。コメントをキャンセルメールアドレスが公開されることはありません。ハカセの研究室ページ先頭に戻る。