楽天　ＰＣトップ　縦バナーについて

Question

お世話になっております。

楽天のＰＣトップページについてです。

いつも左側に縦バナーを設置していますが、背景の指示を入れたらトップページに
表示されなくなりました。
（各商品ページには表示されています。）
背景の指示を入れた場所が悪いと思い、レフトバナーの指示の下に入力しましたが
レフトバナーも背景も表示されなくなってしまいました。

ネットで調べましたら、重ねて表示する際に、上に表示する順序の指示が出来るそうですが
よくわからず、こちらに質問させていただきました。


＝＝ネットで調べた指示＝＝＝＝＝
img.content1{position:absolute; top:100px; left:100px; z-index: 2; }
img.content2{position:absolute; top:200px; left:200px; z-index: 1; }
＝＝ここまで＝＝＝＝＝

上記の指示を入れる際、img.content1がどの画像を指すのか指示が必要と
思いましたが、どのように入力すればいいのでしょうか。



＝＝現在の入力はこのようになっています。＝＝＝＝＝＝＝



body { background: url(https://image.rakuten.co.jp/takasago-mejya/cabinet/03394596/imgrc0075761729.jpg); }


@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(https://image.rakuten.co.jp/takasago-mejya/cabinet/03394596/imgrc0075761822.jpg) 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/imgrc0073120065.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;  
} 


 /* お気に入り商品登録画像変更 */
body #rakutenLimitedId_aroundCart div.bkm{
 width: 306px !important;
 }
 body div.bookmarkArea div.bkm a.addBkm span.bkmStar {
 width: 306px !important;
 height: 48px !important;
 background: url(http://image.rakuten.co.jp/takasago-mejya/cabinet/02384865/imgrc0073710915.jpg) no-repeat 0 0 !

important;
 }
 body div.bookmarkArea div.bkm a.addBkm {
 width: 306px !important;
 height: 48px !important;
 }

/* お気に入りショップ登録画像変更 */
body #rakutenLimitedId_aroundCart div.shopBkm{
 width: 306px !important;
 padding-left: 0px !important;
 }
 body div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
 width: 306px !important;
 height: 48px !important;
 background: url(http://image.rakuten.co.jp/takasago-mejya/cabinet/02384865/imgrc0073710916.jpg) no-repeat 0 0 !

important;
 }
 body div.shopBookmarkArea div.shopBkm a.addShopBkm {
 width: 306px !important;
 height: 48px !important;
 }
 body #rakutenLimitedId_aroundCart #serviceTableSml td.favorite { width: 460px !important; }
 body #rakutenLimitedId_aroundCart #serviceTableSml td.favorite > div { display: inline-block; }





 
  
   
  
   


  


＝＝ここまで＝＝＝＝

Answer

ECマスターズの田中です。

私にて、楽天のPCトップページを拝見させていただいたところ、
ページの背景として
https://image.rakuten.co.jp/takasago-mejya/cabinet/03394596/imgrc0075761729.jpg
が、レフトバナーとして
https://image.rakuten.co.jp/takasago-mejya/cabinet/03394596/imgrc0075761822.jpg
が、
それぞれ正しく表示されているように見えますが、
現状で問題などございますでしょうか。

レフトバナーがページ内容と被らないよう、
@media screen and (min-width:1300px) and (max-width:10000px){
上記の行にて、
ブラウザの横幅が1300ピクセル未満になると
レフトバナーが自動で隠れる設定になっておりますが、
ブラウザの幅が狭い状態でご確認いただいておりますでしょうか。

Answer

ありがとうございます。

大きい画面のPCだと正常に表示されていました。
すみません…

これは、画面の大きさに関わらず表示させるには
@media screen and (min-width:1300px) and (max-width:10000px){


の1300をページと被らない程度に小さくすれば
画面が小さいPCでも正常に表示されるという解釈でいいでしょうか？？

Answer

ECマスターズの田中です。

＞1300をページと被らない程度に小さくすれば
＞画面が小さいPCでも正常に表示されるという解釈でいいでしょうか？？

はい、その解釈で結構です。
ちなみに、特に上限値を設定する必要はございませんので、
@media screen and (min-width:1300px) {
このように上限値の設定を削除していただいても問題はございません。

楽天 ＰＣトップ 縦バナーについて

楽天　ＰＣトップ　縦バナーについて