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

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

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

デモ

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

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

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

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

  1. 以下の内容で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以下になった際、縦帯バナーを非表示にするように指定しています。それにより、メインコンテンツに縦帯バナーが重なる事を防いでいます。不要な方は削除してください。
     

  2. RMSの店舗ページ編集画面に入り、ヘッダーへ下記のHTMLを貼付けます。
    <link type="text/css" href="http://www.rakuten.ne.jp/gold/****/style.css" rel="stylesheet" media="all" > 
    

    ※style.cssのURLを適宜書き換えます。
     

  3. RMSの店舗ページ編集画面内、レフトナビ欄へ下記のHTMLを貼付けます。
    <div id="tateobi_leftArea">
    左帯用リアルタイムde切り替え君設置ソース>
    </div>
    
    <div id="tateobi_rightArea">
    右帯用リアルタイムde切り替え君設置ソース
    </div>
    

    ※”リアルタイムで切り替え君“と記述されている箇所に、<iframe>~から始まる設置タグを貼付けてください。

 
 
以上で作業は終了です!

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

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

  1. 楽天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)までお問合せくださいませ~
(この記事下部、コメント欄へのご質問も大歓迎です)

 
 

  1. コメントはまだありません。

  1. トラックバックはまだありません。