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

こんにちは、チンゲンサイとコマツナの見分け難易度が高い事に気付いたオガリア中村です。

（さあどっちでしょう？）

先日好評だった『楽天店舗に左縦帯バナーを設置する方法』に続き、
今回は左右に縦帯バナーを設置してみます。

前回の記事はこちら↓

• 楽天店舗ページに左縦帯バナーを設置して、しかもリンクも貼れちゃう方法

  http://ogaria.tumblr.com/post/49847320755

バナーの設置方法

1. 前回同様、まずは画像を用意します。
   （オガリアデザインにて、多数デザインを用意しています。「縦帯バナー」で検索を！）
   用意した画像は、R-cabinetか楽天GOLDへアップします。

2. 以下のソースを、用意します。

   <style type="text/css">
   
   #tate_left { left: 0px; }
   #tate_right { right: 0px; }
   
   #tate_left a,
   #tate_right a {
   	display: block;
   	min-height: 100%;
   	width: 90px; 　　　　　　/* 画像の横幅 */
   	visibility: visible;
   	height: 7000px;
   	text-indent:-9999px;
   }
   
   #tate_left,
   #tate_right {
   	position: absolute;
   	width: 90px;  　　　　　 /* 画像の横幅 */
   	min-height:100%;
   	visibility: visible;
   	display: block;
   }
   
   
   /***********************
      左縦帯バナー設定
   ************************/
   .tateobi1 {
   	background: url(左縦バナーの画像URL) repeat-y scroll;
   	min-height: 100%;
   	height: 7000px;
   	top: 75px;
   	z-index: auto;
   	visibility: visible;
   }
   
   /***********************
      右縦帯バナー設定
   ************************/
   .tateobi2 {
   	background: url(右縦バナーの画像URL) repeat-y scroll;
   	min-height: 100%;
   	height: 7000px;
   	top: 75px;
   	z-index: auto;
   	visibility: visible;
   }
   
    @media screen and (max-width: 1220px) {
    #tate_left,  #tate_right {
   	visibility: hidden;
   	}
   }
   
   </style>
   
   
   <ul>
   <!-- 左縦帯バナー -->
   <li class="tateobi1" id="tate_left"><a href="リンク先URLを入力"></a></li>
   
   <!-- 右縦帯バナー -->
   <li class="tateobi2" id="tate_right"><a href="リンク先URLを入力"></a></li>
   </ul>
   

   ※画像のURL、リンク先のURLを適宜書き換えます。

   2013.06.05修正：不要なタグ_height: 6240px;を削除しました。

3. 上記のソースを、RMS内「ヘッダー・フッター・レフトナビのテンプレート設定」から、レフトナビの編集欄へ貼り付けます。

以上にて完了です。

ご注意点

上記でご案内した方法を利用すると、
「縦帯バナーの長さ(高さ)だけ、画面が長くなる」というリスクがあります。

よって、短い商品ページへ長い縦帯バナーを設置すると
商品ページの下部に不自然な空欄が出来てしまいます。
1ページのみへの設置であれば、縦帯バナーの高さを調整する事で回避出来ますが、
全ページへ反映させる場合は上記についてご留意ください。

その替わり、縦帯バナーへリンクをつけられるというメリットもありますよ！

縦帯バナーは企画開催中の時だけでなく、
　　・○○円以上購入で送料無料！
　　・本日のポイント○倍！
　　・ギフトラッピング承り中！
等、「常に行っているサービス」を告知しても効果的ですよ！

以上、オガリア中村で御座いました～！

関連記事

楽天店舗ページに左縦帯バナーを設置して、しかもリンクも貼れちゃう方法 【コピペで完了】Yahoo!ストアに縦帯バナーを設置するHTMLソース 楽天PC店舗ページに、スクロール追従バナーを設置する方法 楽天ショップのページにスクロール追従バナーを複数設置する方法