• 楽天
  • Yahoo!

【超簡単】楽天/Yahoo!で使える!”スクロール追従バナー”を右側に設置する方法

楽天PC店舗ページに、スクロール追従バナーを設置する方法

こんにちは!酢昆布を噛み千切ろうとしたら前歯が根本から折れたため、それを機に前歯二本をセラミックの差し歯にしたオガリア中村です。12万かかりました。

これまで数々ご案内してきた「スクロール追従バナーを設置する方法」を、昨今のブラウザバージョンに合わせてかなり簡素化してみました!その結果、、、

楽天ショップならRMSにコピペで完了!(楽天GOLD不要)
Yahoo!ストアにも使用可!(※マウスオンした時に画像が少し出現する挙動は、Yahoo!ではできません。)

やったー!バージョンアップです!それでは早速綴ります。

そもそもスクロール追従バナーって?Ÿ

スクロール追従バナー

ページをスクロールしても、固定の位置に常駐し続けるバナーの事です。楽天市場の店舗さんだと、よく右上に設置されているのを見かけます。「ページを見るのに邪魔じゃない?」って思いがちですが…実はこのバナーが意外とクリックされるんです。

「全商品対象のクーポン」や「新規のお客様限定お試しセット」など、訪れたお客様に必ず見て欲しい導線を掲載すると効果的です!

まずバナー画像を用意

image

こんな感じの、右側に張り付く画像を用意します!影とかつけるとそれっぽくなります。

推奨サイズ

  • 全体幅:87px
  • 全体高さ:200px
  • マウスを乗せると出現する部分:幅20px (つまり、マウスを乗せる前から見えてる部分は67px)(※楽天のみ。Yahoo!はこの挙動ができません。)

用意した画像は、楽天であれば「R-cabinet」、Yahoo!ストアの場合は「画像管理」にアップしましょう。後ほど画像のサイズ/URLが必要になるので、手元にメモっておきます。

次のHTML/CSSをコピー

まずはコピー!何も聞かずにコピー!話はそれからなのです。

楽天用

<style type="text/css">
<!--
a#rc_rightArea {
 width: 87px; /*画像の全体幅*/
 position: fixed;
 top: 100px;
 right: -20px; /*マウスを乗せた時に出てくる幅*/
 display: inline-block;
 transition: all .2s ease;
 z-index: 9999;
}
a#rc_rightArea:hover{
 right: 0;
}
-->
</style>


<a id="rc_rightArea" href="リンク先URL">
<img src="画像のURL" />
</a>

Yahoo!用

<a href="リンク先URL" style="width:87px; position:fixed; top:100px; right:0; display:inline-block; z-index:9999;" >
<img src="画像のURL" >
</a>

内容を書換え

赤文字になっている箇所は、それぞれ画像のサイズ/URL/リンク先に合わせて書換えてください。

貼り付け

完成したHTMLを貼り付けます!
RMSであればヘッダーなど共通部分に、Yahoo!であればヘッダーのフリースペース欄などHTMLが使える場所に貼り付けましょう。

なんと、以上で設置完了なんです。

対応ブラウザ

以下で動作確認できました!

  • Chrome(49~)
  • FireFox(43~)
  • Internet Explorer(11~)

他では確認とっておりません故、あしからず。。。

ぜひお試しくださいませ!

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメント

2 件のコメント

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。