【楽天】すぐに使える！オンマウスで動きをつけるフローティングバナーの設定方法

楽天
Yahoo!

【楽天】すぐに使える！オンマウスで動きをつけるフローティングバナーの設定方法

2019/01/31

お気に入りに追加する

最近、大満足みかん（ゼリー）にハマっているオガリア中田です。
みかんをケチっていないところがとても素敵。（※個人的な意見です）

さて今回は、画像をダウンロードしてHTMLを貼り付けるだけ！
動くように見えるフローティングバナーをご提供します～！

＜こんな方におすすめ＞
　・回遊率を上げたい
　・もっと商品をアピールしたい！
　・手の込んだ画像を作成している余裕がない
　
一つでも当てはまったら早速操作を行っていきましょう！

フローティングバナーって？

フローティングバナー
ページをスクロールしても、ずっと指定の固定箇所に表示されるバナーのことです。ページのどこを見ても表示されるため、お客様へ紹介したい商品や季節や時期に合わせたキャンペーンなどの内容を設定すると効果的です。

今回は、フローティングバナーにマウスを当てた時に動きがつく設定方法をご案内していきます！

まずは画像を用意

【無料ダウンロード】シンプルなデザイン2パターン

汎用的に使いやすい2つのデザインをご用意しました。ダウンロードしてお使いください。
ダウンロードした画像は、RMS「R-cabinet」にアップしましょう。後ほど画像のURLが必要になるので、手元にメモっておきます。

＜ピンク＞

＜モノトーン＞

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
フローティングバナー

ピンクデザインをダウンロードする

モノトーンデザインをダウンロードする

【ogaRia】gif画像でさらにアピール!

gif画像を活用することで、画像に動きがついて更に目にとまりやすくなります！
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

HTML/CSSをコピー・書き換え

※赤字クリックで編集できます。

<style>
<!--
.oga-side-fixed-bnr {
  overflow: hidden;
  position: fixed;
  top: 120px; /* 画面上からの高さ */
  width: 80px; /* 画像幅 */
}
.oga-side-fixed-bnr:hover img{
  position: relative;
  left: -80px; /* 画像幅 */
}
.oga-side-fixed-bnr.right { right: 0; }
.oga-side-fixed-bnr.left { left: 0; }
-->
</style>
<a class="oga-side-fixed-bnr right" href="リンクURL">
  <img src="画像URL">
</a>

＜補足＞