楽天/Yahoo!で使う！"スクロール追従バナー"を右側に設置する方法

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

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

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

やったー！バージョンアップです！また、今回ツールを使用した設定方法もご紹介します！それでは早速綴ります。

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

ページをスクロールしても、固定の位置に常駐し続けるバナーの事です。楽天市場の店舗さんだと、よく右上に設置されているのを見かけます。実はこの追従バナー、ogaRia(オガリア)ツールの「サイドの達人」でも設定できるんです！

「ページを見るのに邪魔じゃない？」って思いがちですが…このバナーが意外とクリックされるんです。「全商品対象のクーポン」や「人気商品」などお客様に必ず見て欲しい導線として掲載すると効果的です。よく見かける店舗さんも活用されているので、ぜひ設定してみましょう！

【方法1】ogaRia「サイドの達人」をつかう

ogaRia(オガリア)の「サイドの達人」ツールでは、設定してみたいけど画像の準備がない…なんて方でも追従バナーを設定できるよう、豊富な画像テンプレートをご用意しています。

＜ここがポイント！＞
　・設定・更新も全部管理画面1つで完結！
　・HTMLタグの記述も不要！
　・オリジナル画像も設定可能
　

＜二ヶ月無料で利用できる！＞
最大二ヶ月の無料トライアルで、「サイドの達人」や、その他便利ツールもお試しできます。
　
詳しく見てみる

【方法2】自分でCSSを設置する

まずバナー画像を用意

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

推奨サイズ

• 全体幅：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～)

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

まとめ

ここまで、設定方法を見たはいいものの、、やはり自分でHTML書くのは大変ですよね。セール毎に切り替え作業が必要だったり、画像を用意したり作業量が増えてしまうなんてことも、、。

ねこの手も借りたい！そんな時！テンプレート画像の用意があってスケジューリングもできるogaRia(オガリア)の「サイドの達人」ツールがとっても便利なので、ぜひお試しくださいませ～！^^

最大二ヶ月の無料トライアルを試してみる