先日、26歳の誕生日を迎えた、見た目年齢30歳オガリア中村です。

誕生日はGW中だったもので実家に帰りましたら、
テーブルの上に並ぶ卵、生クリーム、いちご。

私「ケーキ作ってくれるの！？」
母「そうなの！この間作ってみたケーキが凄い美味しくてね～！
　　 スポンジがふわっふわで、大成功だったの～！
　　 あっ、でも今日はね、違うケーキを初めて作ってみるんだー。」

娘の誕生日にもチャレンジ精神を忘れない母に、
自信がある訳じゃないケーキを作ってもらいました。美味しくて良かったです。

さて今回は、楽天店舗ページに「左縦帯バナー」を設置します。

そもそも、左縦帯バナーってどんな効果があるの？

• お店の「垂れ幕」効果があります。

  百貨店や本屋等で見かける、キャンペーンの「垂れ幕」ありますよね。
  バレンタインやクリスマスには、垂れ幕によりお店の中がシーズン一色に。
  あれを、EC店舗でもできるのが左縦帯バナーです。

もう設置してるけど、なんか違うの？

RMSで案内されている既出の方法もありますが、今回の方法であれば

• バナーにリンクがつけられます。

  既出の方法だとにリンクをつけられない事が多いのですが、今回の方法ならOK。
  リンクを付ければお客様の取りこぼしが少なくなります。

• スクロール追従バナーを設置しても消えません。

  これはあまりピンと来ない方が多いと思うのですが…

  前回投稿したオガレポ「楽天PC店舗ページに、スクロール追従バナーを設置する方法(→)」を
  実行すると、場合によっては左縦帯バナーが消えてしまう様です。
  (店舗様より有り難くもお問い合わせを頂き発覚しました）
  今回案内する方法であれば、左縦帯バナー、スクロール追従バナーも共に表示が可能でした。

バナーの設置方法

1. 画像を用意します。

   オガリアデザインにて、多数デザインを用意しています。「縦帯バナー」で検索を！
   用意した画像は、R-cabinetか楽天GOLDへアップしてください。

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

   <style type="text/css">
   #tate_left { left: 0px;  }
   
   #tate_left a {
   	display: block;
   	min-height: 100%;
   	width: 110px;         /*画像の横幅*/
   	visibility: visible;
   	height: 7000px;
   	text-indent:-9999px;
   }
   
   .tateobi1 {    
   	background: url(　【アップしたバナー画像URL】　) repeat-y scroll;
   	min-height: 100%;
   	height: 7000px;
   	top: 75px;
   	z-index:auto;
   	visibility: visible;
   }
   
   #tate_left {
   	position: absolute;
   	width: 110px;         /*画像の横幅*/
   	min-height:100%;
   	visibility: visible;
   	display: block;
   }
   
    @media screen and (max-width: 1220px) {
    #tate_left {
   	visibility: hidden;
   }
   </style>
   
   <ul>
   <li class="tateobi1" id="tate_left"><a href="リンク先URLを入力"></a></li>
   </ul>
   
   

   ※画像のURL、リンク先URLを適宜書き換えてください。

   ※注記
   ・不要なタグ_height: 6240px;を削除しました。(2013年7月11日)
   ・スマートフォン、タブレット端末にて表示時に縦帯バナーが後ろに周り込む様、z-indexの値を-9999にしました。(2013年7月11日)
   ・リンクが設置出来なくなった為、z-indexの値をautoに戻しました。(2013年8月2日)

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

以上で設置完了です。

如何でしょうか？
左縦帯バナーがあるだけで、お店のイベント感がグッと高まります。
是非、ご活用くださいね。

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

関連記事

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