過去のエントリー楽天のページで縦バナーを両側に設置して、お祭り感を演出するの巻
この記事に珍しくコメントが付いたので、要望にお答えしてエントリーを追加します。

左右で違う種類の縦バナーを設置する

楽天でショップを運営していると「ポイント○倍」「送料無料」「○○％OFF!」などなど、様々なアピールポイントを訴求したいという場面が結構あります。

だけどページ内の商品を説明している部分に埋め込んじゃうと、ただでさえごちゃごちゃしたページが更にカオス状態になってしまう事も。（カオス化しているページはよく見かけますが・・・）

それらの情報を一括でかつスタイリッシュに？訴求するために「縦バナー」を設置している店舗も多いのですが、RMSにその機能は無いため、意外と難易度が高いです。

このエントリーでは、WEBデザインの知識があまり無くても左右に別のデザインの「縦バナー」を設置出来るように説明します。（私自身そんなに知識は無いのでおかしな部分があるかも知れませんが・・・）

「左右別デザインの縦バナー」設置の流れ

• バナーのデータを用意（もちろん左右別に作る）
• ページにCSSを記載（またはGOLDにアップしたCSSを読み込む）

基本的には過去のエントリー楽天のページで縦バナーを両側に設置して、お祭り感を演出するの巻
と全くおなじ流れです。

CSSのサンプル

.tban {
  visibility:visible;             /*消したい時はhiddenに変更*/
  height:2000px;                  /*高さを設定*/
  _height:2000px;
  min-height:100%;
  width: 100px;                   /*画像の横幅に合わせる*/
  z-index: -1;                    /*ページの背面に廻る様に*/
  position: absolute;             /*位置調整用です*/
  display: block;
  top:0px;                 /**/
  list-style:none;
  }
#t_left{
   left:20px;                      /*左側に20pxの隙間を空けます*/
   background: url(画像URL) repeat-y scroll;/*左のバナー画像URL*/
        }
#t_right {
   right: 20px;                    /*右側に20pxの隙間を空けます*/
   background: url(画像URL) repeat-y scroll;/*右のバナー画像URL*/
   right: 20px;                    /*右側に20pxの隙間を空けます*/
        }

<ul>
<li class=&quot;tban&quot; id=&quot;t_left&quot;></li>
<li class=&quot;tban&quot; id=&quot;t_right&quot;></li>
</ul> 

一部違うのは、当然ながら右と左のバナー画像のURLを個別に指定しているところです。本職がWEBデザイナーの方であれば常識レベルなのかも知れませんが、私は過去これを実現するのに数日を要しましたｗ。

ちなみにHTMLもCSSもページに直接書いても構いませんが、（商品ページであれば「販売説明文」、カテゴリページであれば「カテゴリ説明文」）この「縦バナー」ってやつは、全ページに一括で反映したいと思うので、

R-Storefront >デザイン設定 >共通テンプレート設定 >ヘッダー・フッター・レフトナビ

あたりに書いて、使用するページでそのテンプレートを選んであげれば、後の管理が楽チンでおすすめです。

一括で表示・非表示の切り替え、画像変更を行うには

画像変更は、新たにバナーの画像を用意したら、R-Cabinetにアップロードして、CSSの画像指定のURL部分を書き換えればOKです。

ちなみにR-CabinetでもGOLDでも、画像の上書きは反映までにすごく時間が掛かるのでおすすめしません。別名でアップロードし直して、ソースの方を書き換えましょう。

表示・非表示の切り替えは、CSSの8行目あたりに
visibility:hidden;
の1行を追加するだけ。再度表示したい時は、hiddenをvisibleに書き換えれば簡単です。

あわせて過去記事、
楽天ショップで外部スタイルシートを利用する方法
も見てね。

2013/5/22コード記述に誤りがあったため修正

最新記事

リンクも出来る！コピペでOK！楽天ショップ用「縦バナー」最強版

こっちの方がいいかもよ