楽天のページで縦バナーを両側に設置して、お祭り感を演出するの巻
楽天のページでよく見かける「縦バナー」。効果の程は知らないけど、お祭りっぽい雰囲気は出てる気がする。どうせなら両側に付ければ良いのに、意外と片側にしか付けてない店舗が多い。「ダサくね？」って「楽天のサイトにかっこ良さなんて求めてねぇよ」って言われそうだけど、もう少しまともに出来る方法をまとめてみた。■縦バナー設置の流れ
縦バナーに使う画像を用意⇒R-cabinetに登録 楽天RMSの「R-storefront＞デザイン設定＞テンプレート設定＞ヘッダー・フッター・レフトナビ」で新規テンプレートを作って、そこに下記のコードを貼り付ける。そのテンプレートを「自動選択テンプレート」にしてあげれば、個別にテンプレートを設定していないページは全部適用される。（GOLD領域を除く）■まずは従来の縦バナー設置方法（これで充分な場合も多い？）
・パターン1（片側） cssでbodyの背景イメージを設定⇒右か左に寄せて、縦にリピートさせる コードサンプル（hoge.jpgは用意した縦バナー画像のURLに変更）
<style type="text/css">
body { background:url(hoge.jpg) repeat-y scroll top right;}
</style>
※左側にしたければ、rightをleftに変更。
見本01
・パターン2（擬似的両側）
想定されるウインドウサイズの余白を中央部に設定した画像を用意し、
パターン1と同じ様にbodyの背景に指定する。
コードサンプル（ブラウザなどによりずれる、ずれてる店舗多数あり…。）
<style type="text/css">
body { background:url(hoge.jpg) repeat-y scroll top center;}
</style>
見本02
■これで完璧。カスタマイズ可能バージョン
両サイドに綺麗に表示されて、位置の微調整も可能です。 コードサンプル
<style type="text/css">
.tban li {
background: url(hoge.jpg) repeat-y scroll; /*hoge.jpgを画像のパスに変更*/
height:2000px; /*高さを設定*/
width: 80px; /*画像の横幅に合わせる*/
z-index: -1; /*ページの背面に廻る様に*/
list-style:none;
position: absolute;
display: block;
}
/*画面端からの隙間を調整*/
#t_left {left:20px;}
#t_right {right: 20px;}
</style>
<ul class="tban">
<li id="t_left"></li>
<li id="t_right"></li>
</ul>
見本03
本当は高さを100％にしたいのだが、RMSに設定してIEで確認すると不具合が…。
解決策が見つからないので高さはお好みで設定して下さい。
需要があるのかどうかは判らないけど、WEB上にあまり情報がないので、未熟ながら情報提供してみます。HTML・CSSの文法おかしいとか、もっといい方法あるとか、なにかあれば教えてくれると嬉しいです。
追記
左右で違うデザインのバナーを設置したい場合は、こちらの記事もご覧ください。
楽天ショップでページの左右に別々の縦バナーを設置する方法
楽天ショップで左右別の縦バナーを設置する-その２初級編
リンクも貼れる最強バージョンはこちら
リンクも出来る！コピペでOK！楽天ショップ用「縦バナー」最強版
ちょっと違います
楽天のみんなが困っているのは両サイド別々のバナーです