楽天RMS・Yahoo!で使える!マウスオーバーすると飛び出すフローティングバナー

楽天RMS・Yahoo!で使える!マウスオーバーすると飛び出すフローティングバナー
スポンサーリンク

ボーイッシュに憧れる四条せつなです。

楽天市場やYahoo!などのECサイトの運営しているなら必須なのが、「フローティングバナー」です。これだけで、回遊率の向上やイベントへの誘導が出来るので、ぜひ使っていきたいですよね。だけど、設置方法が分からない。出来れば、”飛び出す”バナーで目を引きたい!と思う運営者も多いハズ。

四条ねこ
だから、マウスオーバーすると”にょいーんと飛び出す”フローティング(追従)バナーを紹介しますね!コピペでそのまま使えるようにしてるよっ!

ただコピペするだけでなく、少し解説を交えて“あなた自身”でカスタム出来るように心がけて解説していきます!

まずは飛び出すバナー画像を用意

まずは飛び出すバナー画像を用意

まず初めに、今回の飛び出すバナーを設置するための「バナー画像」を用意してください。

四条ねこ
画像のサイズは…
横:600px
縦:120px
で作ってね!

ここで注意なんですけど、横幅600pxのうち、80pxだけ”予め飛び出ている”部分を作ります。ですので、この80px部分は最初から見えている想定で制作してください。逆に言うと、残りの部分はマウスオーバーするまで隠れている想定で制作してくださいね。

飛び出すフローティングバナーのHTML・CSSのデモ

バナー画像が出来たら、上のコードをコピペしてくださいね。楽天の方ならGOLDやRMSで、Yahoo!の方なら専用のマネージャーにて、普通のブログやWebサイトの方ならそのままご使用くださいね。

四条ねこ
このままコピペして使っちゃうと、私の画像が使われちゃう!だから、ちょっとだけ解説するから、それを聞いてから使ってね!

HTMLのURLは飛ばしたいアドレスに

HTMLの…
<a href=”https://nuconeco.net/”>
は、飛ばしたいアドレスに変更してください。

CSSのURLはバナー画像のアドレスに

CSSの…
#fix01 {
background: url(“https://nuconeco.net/wp-content/uploads/2017/12/float_nuco.jpg”)
}
は、バナー画像のアドレスに変更してください。

フローティングバナーで差をつけよう!

楽天やYahoo!のようなECサイトだけでなく、普通のWebサイトでも「フローティングバナー」はまだまだ有効な力を発揮します。

四条ねこ
やっぱり、目につくもんね!

このURLに誘導したい!セール会場に誘導したい!というような場合に非常に有効なので是非活用してくださいね。

せつなのまとめ

フローティングバナーは非常に有効。しかも、飛び出すバナーはもっと有効。でも、設置方法が分からない…そんな声があったので、今回記事にしました。コピペする素材には、解説のコメントアウトも入れているので、使いやすくなっていると思います。ぜひ活用してみてくださいね。

四条ねこ

つまりは…

  • フローティングバナーは有効!
  • 飛び出すバナーはもっと有効!

って、ことだねっ!

ということで、“楽天RMS・Yahoo!で使える!マウスオーバーすると飛び出すフローティングバナー”でした!でわでわっ!

スポンサーリンク
楽天RMS・Yahoo!で使える!マウスオーバーすると飛び出すフローティングバナー

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です