楽天　右縦バナー設置について

Question

いつも大変お世話になっております。

楽天の縦バナー設置について質問です。
現在、左縦バナーは設置しているのですが、右にも設置したいと考えています。
こちらのフォーラムでも似たような質問があったので真似しようと思ったのですが
上手くできずにいます。

以下のスタイルシートをどのように変更すれば右縦バナーを設置できるのでしょうか。
また、もし縦バナー内で紹介している商品が自動で他商品へ変わる（スクロールなど）するようにできるのであればそちらも合わせてお教えいただきたく思います。








@media screen and (min-width:1300px) and (max-width:10000px){
.tban {
height:10400px;/*800の倍数で設定（縦バナーのサイズ）*/
_height:9000px; /*高さを設定*/
width: 100px; /*画像の横幅に合わせる*/
z-index: -1; /*ページの背面に廻る様に*/
list-style:none;
position: absolute;
display: block;
visibility:visible; /*消したい時はhiddenに変更*/
min-height:100%;
top:100px; /**/
}
/*画面端からの隙間を調整*/
/*左縦バナー画像*/
#t_left {
margin:10px;
left:0px;
background: url(http://image.rakuten.co.jp/takasago-mejya/cabinet/03394596/imgrc0072517243.gif) repeat-y scroll; /*hoge.jpgを画像のパスに変更*/
z-index:0;
}

div#leftbunner a {
display: block;
width: 100%;
max-width: 110px; 
height: 9000px;/*画像サイズ*/
z-index:0;
}

}
@media screen and (min-width:0px) and (max-width:1300px){
.tban {
list-style:none;
position: absolute;
visibility:hidden; /*消したい時はhiddenに変更*/

}
}


html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0;  
} 
.tab_ban { 
    width: 80px;/* 最初に表示されるバナーの幅 */ 
    height: 200px;/* バナーの高さ */ 
    position: fixed !important;/* バナーを固定します */ 
    position: absolute; 
    right: 0;/* 右から0pxの位置に指定 */  
} 
.tab_ban a {/* リンクするエリアをバナー全体に広げる設定 */ 
    display: block; 
    width: 100%; 
    height: 100%;  
} 
.tab_ban:hover {/* カーソルが乗った時の動きを指定 */  
    width: 400px;/* バナーが伸びた時の幅 */ 
 
    /* 以下アニメーションの設定 */ 

    -webkit-transition: width ease-in-out 0.5s; 
    -moz-transition: width ease-in-out 0.5s; 
    -ms-transition: width ease-in-out 0.5s; 
    -o-transition: width ease-in-out 0.5s; 
    transition: width ease-in-out 0.5s;  
} 
.tab_ban a:hover { 
    width: 200px\9;  
} 
#tab01 { 
    background: url(http://image.rakuten.co.jp/takasago-mejya/cabinet/02384865/imgrc0068728349.jpg) 0 0 no-repeat; 
    bottom: 50px;  
} 
#tab02 { 
    background: url(http://image.rakuten.co.jp/takasago-mejya/cabinet/02384865/imgrc0070825771.jpg) 0 0 no-repeat; 
    bottom: 250px;  
} 
#tab03 { 
    background: url(http://image.rakuten.co.jp/takasago-mejya/cabinet/02384865/imgrc0070825553.jpg) 0 0 no-repeat; 
    bottom: 450px;  
} 
#tab04 { 
    background: url(http://image.rakuten.co.jp/takasago-mejya/cabinet/02384865/imgrc0070825553.jpg) 0 0 no-repeat; 
    bottom: 650px;  
}

Answer

ECマスターズの田中です。

いただいたHTMLソースの場合、
スタイルシートにある .tban への規則が、縦バナー左右共通の設定、
スタイルシートにある #t_left および div#leftbunner a への規則が、左に縦バナーを設置するための設定、
HTMLソースにある  から  までの内容が、左側の縦バナー用のHTMLタグなので、

上記、#t_left および div#leftbunner a への規則、および左側の縦バナー用のHTMLタグを
複製し、右側用の設定に書き換えることで
右縦バナーを設置することができます。
（ソースに含まれるleftをrightに書き換えるだけで設置できます）

Answer

ありがとうございます。
早速やってみたところ、右バナーに設置はできたのですが、縦バナー１個のみ表示で左縦バナーのように
つながってきません。（repeat-y scrollとついています。）
また、カーソルを合わせると飛び出すバナーを設置しているのですが、その飛び出しバナーに右縦バナーがくっついてしまい、
カーソルを合わせると縦バナーも飛び出してきます。
これはどのように修正すればいいのでしょうか。

まだ始めたばかりなので、初歩的なことですみませんがよろしくお願い致します。

Answer

ECマスターズの田中です。

＞縦バナー１個のみ表示で左縦バナーのように
＞つながってきません。（repeat-y scrollとついています。）

こちらについては、実際にその表示になるページにて
原因を確認する必要があります。

全ページをその表示にすることが難しい場合は、
新しくヘッダー・フッター・レフトナビをご用意いただき、
闇市設定したダミーの商品ページに適用していただくなどしていただければ
結構ですので、
実際にそのような表示がされるページをご用意いただけますでしょうか。

＞カーソルを合わせると飛び出すバナーを設置しているのですが、その飛び出しバナーに右縦バナーがくっついてしまい、
＞カーソルを合わせると縦バナーも飛び出してきます。
＞これはどのように修正すればいいのでしょうか。

くりぼ〜さんが実際どの位置に右端バナーを設置されたかはわかりませんが、
右端ですと確かに飛び出しバナーの飛び出す前の位置と重なってしまいます。
その場合、まずはどのような表示をご希望なのか、事前に決める必要があります。
（縦帯バナーを飛び出しバナーに重ならないよう左へ移動させる、など）

楽天 右縦バナー設置について

楽天　右縦バナー設置について