※記事の内容を精査し、こちらに載せ直しました。→【最新版・超かんたん！】楽天/Yahoo!のページに「スクロール追従バナー」を左右複数並べる方法

こんにちは！弱冷房車を起案した人にお歳暮を贈りたいオガリア中村です。
日本の女性が、あなたにどれだけ感謝をしているか…伝えたい、この想い…伝わらない、もどかしさ…

本日は、楽天ショップの回遊性をアップする『スクロール追従バナー』を複数個設置する方法をご案内致します。

※スクロール追従バナーとは？/推奨画像サイズは？については過去エントリーをご参考ください。↓

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

スクロール追従バナーを複数枚貼る方法

1. 以下の内容で、CSSファイルを作成します。（例：fixaria.css)
   ・画像の全体横幅…①
   ・画像の全体縦幅…②
   ・マウスオーバー前に常に表示されてる部分…③
   としておりますので、該当箇所を数値へ書き換えください。

   /* right fixd */
   * html body {background: url(null) fixed;}
   
   * html div#rc_rightArea{
   	position:absolute !important;
   	top: expression((documentElement.scrollTop || document.body.scrollTop) + 100 + 'px');
   	left: expression((documentElement.scrollLeft || document.body.scrollLeft) + document.body.clientWidth - ① + 'px');/*画像の横幅数値*/
   }
   
   div#rc_rightArea{
   	position: fixed;
   	top: 100px;
   	right: 0px;
   	text-indent:-9993px;
   	display:block;
   }
   
   div#rc_rightArea2{
   	position: fixed;
   	top: 300px;
   	right: 0px;
   	text-indent:-9993px;
   	display:block;
   }
   
   div#rc_rightArea3{
   	position: fixed;
   	top: 500px;
   	right: 0px;
   	text-indent:-9993px;
   	display:block;
   }
   
   div#rc_rightArea .rc_right ,
   div#rc_rightArea2 .rc_right2 ,
   div#rc_rightArea3 .rc_right3 {
   	outline:none;
   	display: block;
   	position: relative;
   	width:③px;
   	height:②px;
   	left:0px;
   	z-index:9998px;
   }
   
   div#rc_rightArea .rc_right{
   	background: url("1枚目バナーのURL") no-repeat scroll 0 0 transparent;  
   }
   
   div#rc_rightArea2 .rc_right2{
   	background: url("2枚目バナーのURL") no-repeat scroll 0 0 transparent;  
   }
   
   div#rc_rightArea3 .rc_right3{
   	background: url("3枚目バナーのURL") no-repeat scroll 0 0 transparent;
   }
   
   div#rc_rightArea .rc_right:hover ,
   div#rc_rightArea2 .rc_right2:hover ,
   div#rc_rightArea3 .rc_right3:hover {
   	background-position:0px 0px; width:①px;
   }
   

   ※バナーのURL箇所は、1.でアップした画像のURLに書き換えます。€‚

2. 先程作成したCSSファイル(fixaria.css)を、楽天GOLDのサーバ内にアップします。
3. 以下のHTMLソースを、RMS内「ヘッダー・フッター・レフトナビのテンプレート設定」から、ヘッダーの編集欄へ貼り付けます。

   <link href="①先程アップしたfixaria.cssのURL" rel="stylesheet" type="text/css">
   <div id="rc_rightArea">
   	<a href="②1段目のリンク先URL" class="rc_right" >③(alt文言)</a>
   </div>
   <div id="rc_rightArea2">
   	<a href="②2段目のリンク先URL" class="rc_right2" >③(2段目のalt文言)</a>
   </div>
   <div id="rc_rightArea3">
   	<a href="②3段目のリンク先URL" class="rc_right3" >③(3段目のalt文言)</a>
   </div>
   

   ※上記ソース内、①～③の箇所を適宜書き換えてください。

以上で設置完了です。
お試し頂いて上手く行かない場合は、どうぞオガリア中村(ogaria@ogaland.com)までお気軽にお問合せくださいませ。
　
　

日本列島が汗だくになった8月10日と11日の土日。
わたくし、千葉の幕張メッセで行われていた野外イベントに行っておりまして。。

「ネッチュウショウ」

というヤツの気配を、初めて感じたんです。
今まで、『名前はよく聞くけど1度も同じクラスになった事が無い不良の同級生』くらいの面識だったんですが・・・
もう、斜め後ろの席に居るくらいの距離感＆威圧感でしたね。

皆様も、どうぞどうぞお気を付けください。ネッチュウショウ。
オガリア中村でした！

関連記事

楽天PC店舗ページに、スクロール追従バナーを設置する方法 【ネットショップで使えるCSSコピペ】左側にスクロール追従バナーを複数設置する方法 楽天ショップの縦帯バナーを、「リアルタイムde切替くん」を使って自動切替する方法 楽天店舗ページに左縦帯バナーも右縦帯バナーも貼る方法