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

こんにちは。コンビニ店員さんの袋詰め終了までにお金を用意する事へ命をかけているogaRia中村です。

先日、ogaRiaサービスをご利用中の店舗様より「スクロール追従バナーを左側に複数設置したい」というお問合せを頂戴しました。その時の回答に使用したHTML/CSSを、折角なのでご紹介させて頂きます！

＜デモ＞

ちなみに、
　
　■ スクロール追従バナー設置方法(1個のみver.)
　■ スクロール追従バナー複数設置方法(右側ver.)
　
については上記リンクよりどうぞ。

手順

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

   /* left fixd */
   * html body {
   	background: url(null) fixed;
   	}
   
   * html div#rc_leftArea{
   	position:absolute !important;
   	top: expression((documentElement.scrollTop || document.body.scrollTop) + 200 + 'px');
   	rihgt: expression((documentElement.scrollRight || document.body.scrollRight) + document.body.clientWidth - ① + 'px');
   }
   
   /* left bannar */
   div#rc_leftArea{
   	position: fixed;
   	top: 200px;
   	left: 0px;
   	text-indent:-9993px;
   	display:block;
   }
   
   div#rc_leftArea .rc_left , .rc_left2 , .rc_left3{
   	outline:none;
   	display: block;
   	position: relative;
   	width:④px;/*画像の横幅数値*/
   	height:②px;/*画像の縦幅数値*/
   	right:0px;
   	margin:10px 0;
   	z-index:9998px;
   }
   
   div#rc_leftArea .rc_left{
   	background: url("1段目画像のURL") no-repeat scroll -③px 0 transparent;  
   }
   
   div#rc_leftArea .rc_left2{
   	background: url("2段目画像のURL") no-repeat scroll -③px 0 transparent;  
   }
   
   div#rc_leftArea .rc_left3{
   	background: url("3段目画像のURL") no-repeat scroll -③px 0 transparent;
   }
   
   div#rc_leftArea .rc_left:hover,
   div#rc_leftArea .rc_left2:hover,
   div#rc_leftArea .rc_left3:hover {
   	background-position:0px 0px;  width:①px; transition: all .3s; -webkit-transition: all .3s;
   	}
   

   「○段目の画像URL」欄へは、表示させたい画像のURLをご入力ください。

2. 先程作成したCSSファイル(fixaria.css)を、楽天GOLDのサーバ内にアップします。(RMS店舗編集欄へは使用できないCSSが含まれておりますので、楽天GOLDサーバをご利用ください。)
3. 以下のHTMLソースを、RMS内「ヘッダー・フッター・レフトナビのテンプレート設定」から、ヘッダーの編集欄へ貼り付けます。

   <link href="先程アップしたfixaria.cssのURL" rel="stylesheet" type="text/css">
   <div id="rc_leftArea">
   <a href="1段目のリンク先URL" class="rc_left" >③(alt文言)</a>
   <a href="2段目のリンク先URL" class="rc_left2" >③(2段目のalt文言)</a>
   <a href="3段目のリンク先URL" class="rc_left3" >③(3段目のalt文言)</a>
   </div>
   

   　
   ※上記ソース内、着色箇所を適宜書き換えてください。

　
　
以上となります。
「画像を差し替えるのに、CSSファイルを都度いじるの面倒だな～」という方は、以下の部分だけRMS内で記述する事もできますのでオススメです。

<style type="text/css">
<!--
div#rc_leftArea .rc_left{
	background: url("画像URL") no-repeat scroll -③px 0 transparent;  
}

div#rc_leftArea .rc_left2{
	background: url("画像URL") no-repeat scroll -③px 0 transparent;  
}

div#rc_leftArea .rc_left3{
	background: url("画像URL") no-repeat scroll -③px 0 transparent;
}
-->
</style>

　
うまくいかない、という方はogaRia中村(ogaria@ogaland.com)までどうぞ！

関連記事

楽天ショップのページにスクロール追従バナーを複数設置する方法 楽天PC店舗ページに、スクロール追従バナーを設置する方法 「お買物かごボタン」を画像に差替える方法 (楽天ショップ版) 楽天ショップの縦帯バナーを、「リアルタイムde切替くん」を使って自動切替する方法