楽天ショップのページにスクロール追従バナーを複数設置する方法

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

楽天ショップページにスクロール追従バナーを複数個設置する方法

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

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

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

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

  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度も同じクラスになった事が無い不良の同級生』くらいの面識だったんですが・・・
もう、斜め後ろの席に居るくらいの距離感&威圧感でしたね。

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

    • みい
    • 2014 12/28 2:50pm

    初めまして、いつも参考にさせて頂いております。
    ありがとうございます。
    ゴールド初心者でうまく、設置できません。
    トップページをrmsで制作しているからでしょうか?
    お忙しい所すみませんが、お返事頂けましたら幸いです。
    宜しくお願い致します。

      • ogaria
      • 2015 2/17 12:47pm

      > みい様

      ご質問ありがとうございます!
      回答遅くなり大変申し訳ありません、、、

       
      RMSでトップページを制作されていても
      問題なく適用できるはずですが、
      該当のページURLもしくはお貼付け頂いた内容を
      教えて頂けないでしょうか。

      宜しくお願い致します。

    • suto0
    • 2015 2/8 9:54pm

    いつも活用させて頂いています。
    ご質問があります。

    「スクロール追従バナーを複数枚貼る方法」で、下記のaltの前にある③を外すと、マウスオーバー前の画像表示範囲が狭くなってしまいます。他の文字やブランクでは戻りませんが③を入れいると正常に表示されます。

    ③(alt文言)

    cssの下記記述ではコントロール出来ません。
    原因は何でしょうか?

    position: relative;
    width:①-③px;
    height:②px;

      • ogaria
      • 2015 2/17 12:49pm

      > suto0様

      ご質問ありがとうございます。

      > width:①-③px;

      こちら記述が分かりづらく申し訳ありません、、、
      ①の数値から、③の数値を引いた数値を
      該当箇所に入れて頂きます。

      つまり、
      ①=100
      ③=80
      なら、該当箇所の記入は
      width: 20px;
      になります。

       
      私の書いた内容が分かり辛いので、
      先ほど記事内容修正しました。

  1. トラックバックはまだありません。