こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました！こちらからご確認できます。

を、ご案内します。

─ ─ ─ ─ ─
【追記】(2013/05/07）
店舗様より、「スクロール追従バナーを設置すると、背景に表示させていた縦帯が消える」とのお問い合わせを頂いた為、縦帯を消さずに表示させる方法(→)をアップしました。
─ ─ ─ ─ ─

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

ページをスクロールしても、固定の位置に常駐し続けるバナーの事です。
楽天市場の店舗さんだと、よく右上に設置されているのを見かけます。

弊社系列店で、利用している店舗はこちらです。

• 楽天市場ライフエッセンス
  http://www.rakuten.co.jp/ogaland-life-essence/
• 楽天市場　お手軽美人
  http://www.rakuten.co.jp/otbj/

「ページを見るのに、邪魔じゃない？」って思いがちですが…
実は、このバナーが意外とクリックされるんです。

クリック数の計測については、最後にご案内いたしますね。

バナーの設置方法

1. バナー画像を作ります。
   
   推奨サイズ…幅87px（内、マウスオーバーで出現する部分は10px20px）×縦200px
   作った画像は、R-cabinetか楽天GOLDへアップします。
2. 以下の内容で、CSSファイルを作成します。（例：exsample.css)
   （画像の横幅…87px　画像の縦幅…200px　マウスオーバーで出現する部分の幅…20px　とします。）

   /* 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 - 87 + 'px');/* 画像の横幅 */
   }
   
   /* right bannar */
   div#rc_rightArea{
   	width: 87px;/* 画像の横幅 */
   	height: 200px;/* 画像の縦幅 */
   	position: fixed;
   	top: 100px;/*バナーの上下位置指定*/
   	right: 0px;
   	text-indent:-9993px;
   	display:block;
   }
   
   div#rc_rightArea:after{
   	content: "."; 
   	display: block; 
   	height: 0; 
   	font-size:0;	
   	clear: both; 
   	visibility:hidden;
   }
   
   div#rc_rightArea {
   	display: inline-block;
   } 
   
   /* Hides from IE Mac */
   * html div#rc_rightArea {
   	height: 1%;
   }
   
   div#rc_rightArea {
   	display:block;
   }
   /* End Hack */
   
   div#rc_rightArea .rc_right {
   	outline:none;
   	display: block;
   	background: url("バナーのURL") no-repeat scroll 20px 0 transparent; /* マウスオーバーで出現する部分の幅 */
   	position: relative;
   	width:87px;/* 画像の横幅 */
   	height:200px;/* 画像の縦幅 */
   	left:0px;
   	z-index:9998px;
   }
   
   div#rc_rightArea .rc_right:hover{ background-position:0px 0px;  }
   

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

   ※2013年7月5日にIE表示対策を踏まえ、少しソースの内容を修正しました。
   ※2013年8月16日に、ソース内に含まれていた不要な全角スペースを削除しました。
   ※2013年10月4日に、IE9以下で出現する横スクロールバーを回避する為のCSS(青文字部分)を追加しました。

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

   <link href="(①先程アップしたCSSデータのURL)" rel="stylesheet" type="text/css">
   <div id="rc_rightArea">
   <a href="(②バナーのリンク先URL)" class="rc_right">スクロール追従バナーです</a>
   </div>

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

以上で設置完了です。

バナーのクリック数を計測する

設置してみたらやはり、本当にクリックされているのか調べてみたい所ですよね。
過去に投稿したオガレポにて、「Ninjaアクセス解析」を使った
バナークリック数計測方法をご案内させて頂きました！

• 楽天店舗内のバナークリック数を、Ninjaアクセス解析を使って計測する方法•

お試しくださいませ～

※この記事についてのご質問は、お気軽に中村(ogaria@ogaland.com)までお問い合わせください＼(^0^)／

関連記事

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