楽天ショップの縦帯バナーを、「リアルタイムde切替くん」を使って自動切替する方法

こんにちは、涼しい気候よりもカンカン照りを愛する中村です。
しかし。ポメラニンと散歩しているおじいさんが、「涼しいね～、涼しいね～」と嬉しそうに犬へ話しかけているのを見て、涼しさも愛するようになりました。
流されやすさにかけては他の追随を許しません。

さて9月1日に開始する楽天スーパーセールに向けて、縦帯バナーの準備をされている店舗様も多いかと思います。
オガリアツール「リアルタイムde切替くん」を使えば、縦バナーの表示を指定日時に自動切替する事ができますので、その方法をご案内します。

「リアルタイムde切替くん」とは？

デモ

このように、縦バナーの位置は固定となります。
ご用意頂く画像の大きさは、幅80px　×　縦1000～1200pxです。

縦がどこまで表示されるかは使用モニタの高さによりますが、1000px～1200px程で作れば問題ないと思います。

リアルタイムde切替くん縦帯バナー設置の方法

早速設置手順をご案内します！

以下の内容でCSSデータを作成し、楽天GOLDサーバ内任意の場所へアップロードします。 (style.css)

/* right fixd */
* html body {
	background: url(null) fixed;
}


* html div#tateobi_leftArea {
	position:absolute !important;
	top: expression((documentElement.scrollTop || document.body.scrollTop));
	left: 0px;
}

* html div#tateobi_rightArea {
	position:absolute !important;
	top: expression((documentElement.scrollTop || document.body.scrollTop));
	right: 0px;
}

div#tateobi_rightArea {
	width: 80px;
	height: 1300px;
	position: fixed;
	top: 0px;
	right: 0px;
	display:block;
}



div#tateobi_leftArea {
	width: 80px;
	height: 1300px;
	position: fixed;
	top: 0px;
	left: 0px;
	display:block;
}




/*iPad対応→横1220px以下のモニタは縦バナー無効(IE以外)*/
 @media screen and (max-width: 1220px) {
 #tateobi_rightArea,  #tateobi_leftArea {
	visibility: hidden;
}
}

※末尾のCSSでは、ブラウザ幅が1220px以下になった際、縦帯バナーを非表示にするように指定しています。それにより、メインコンテンツに縦帯バナーが重なる事を防いでいます。不要な方は削除してください。
　

RMSの店舗ページ編集画面に入り、ヘッダーへ下記のHTMLを貼付けます。
```
<link type="text/css" href="http://www.rakuten.ne.jp/gold/****/style.css" rel="stylesheet" media="all" > 
```
※style.cssのURLを適宜書き換えます。
　
RMSの店舗ページ編集画面内、レフトナビ欄へ下記のHTMLを貼付けます。
```
<div id="tateobi_leftArea">
左帯用リアルタイムde切り替え君設置ソース>
</div>

<div id="tateobi_rightArea">
右帯用リアルタイムde切り替え君設置ソース
</div>
```
※”リアルタイムで切り替え君“と記述されている箇所に、<iframe>～から始まる設置タグを貼付けてください。

　
　
以上で作業は終了です！

IEでうまく作動しない場合

楽天GOLDでトップページを作成されている店舗様の場合、HTMLの記述にて、DOCTYPEの宣言をXHTMLで行う必要があります。以下の手順でご対応をお願いします。

楽天GOLDトップページのHTMLを開き、<html>タグの上に下記のソースを貼付けます。
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
```
※同じようなソースが既に入っている場合には、上記のソースにて上書きしてください。

　　
以上となります。
楽天スーパーセール用の縦帯バナーは、オガリアサービス『商人ナビ』内、『オガリアデザイン』にてご用意しております。是非ご利用くださいませ！

また、ご不明な点はオガリア中村(ogaria@ogaland.com)までお問合せくださいませ～
(この記事下部、コメント欄へのご質問も大歓迎です)

楽天店舗の売上向上ノウハウと販促ツールを提供する「オガリア」中の人、中村が色々綴ります。