縦帯バナー

Question

いつもお世話になっております。
マラソンの縦帯バナーをヘッダーに設置しようとしたら、
全体が崩れてしまいました。
https://layout.rms.rakuten.co.jp/rms/mall/rsf/layout/vc

以下の内容を貼りました。

 html{
 background-image:url("【R-Cabinetからコピーした画像URL】");
background-repeat:repeat-y;
 background-position:left;
 }
 body{
 background-image:url("【R-Cabinetからコピーした画像URL】");
background-repeat:repeat-y;
 background-position:right;
 background-color:transparent;
 }

どこを直せばよいでしょうか？
よろしくお願い申し上げます。###HR######IMG09c3bfc41429464ef8810947646089e7b.pngIMG0###

Answer

ECマスターズの伊藤です。

> マラソンの縦帯バナーをヘッダーに設置しようとしたら、
> 全体が崩れてしまいました。


html{
background-image:url("【R-Cabinetからコピーした画像URL】");
background-repeat:repeat-y;
background-position:left;
}
body{
background-image:url("【R-Cabinetからコピーした画像URL】");
background-repeat:repeat-y;
background-position:right;
background-color:transparent;
}



お手数ですが、上記コードにて
修正いただけますでしょうか。

また、プレビューの状態ですと、
頂いている画像のように、端に寄ったように
表示されていて
実際に反映されると、正常に反映できる
場合がございます。

正常に表示されなかった場合に
すぐに戻せるよう、修正前の内容を
メモ帳などにコピーしておいていただき、
反映をお試しいただきますよう
お願いいたします。

Answer

早々にありがとうございます。
正常に反映できました。

Answer

すみません。
解決したとお思いましたが、
正常に反映しているのは、トップページで、
商品ページは、重なってしまします。
よろしくお願い申し上げます。

Answer

こちらがキャプチャです。###HR######IMG0390e2d1a2db29cf0752fd3a2b76e793f.pngIMG0######BR###

Answer

ECマスターズの田中です。

こちらの方法では、
ページの左右端に、縦帯バナーを背景として設定するため、
画面幅が狭いと、どうしてもページの内容と重なってしまいますので、
「画像を左右端に設置しても重ならない時だけ、縦帯バナーを表示にする」
という処理が必要となります。

伊藤よりご案内差し上げたstyleタグの中身を、下記のように、
@media screen (後略) と }  で囲んでいただきますよう
お願いします。

= この下の行から ====================

@media screen and (min-width:1400px) {
html{
background-image:url("【R-Cabinetからコピーした画像URL】");
background-repeat:repeat-y;
background-position:left;
}
body{
background-image:url("【R-Cabinetからコピーした画像URL】");
background-repeat:repeat-y;
background-position:right;
background-color:transparent;
}
}

= この上の行まで ====================

今回追加した行に含まれる「1400」が、
縦帯バナーの表示/非表示を切り替える境界線の数字です。
鈴木さんにて、実際にウィンドウの横幅を変えながら、
どのように表示されるかご確認の上、
必要に応じて、数字を変更して調整していただきますようお願いします。

Answer

お返事いただきありがとうございます。
１４００で重ならずに、表示されました。

また、初歩的な質問ですが、
パソコンの画面の設定が１００％で縦帯が見えるパソコン、
会社の他のパソコンは、画面の設定の表示が１００％では見えず、
７５％で縦帯が見える場合があります。

パソコンによって、または、グーグルクロームかIEかによって、
見え方が違うのでしょうか？

Answer

ECマスターズの星です。

明日、担当よりご連絡差し上げますので、
今しばらくお時間いただけると幸いです。
どうぞよろしくお願いいたします。

Answer

ご連絡ありがとうございます。
承知いたしました。

Answer

ECマスターズの伊藤です。

ご回答おまたせいたしました。

> パソコンの画面の設定が１００％で縦帯が見えるパソコン、
> 会社の他のパソコンは、画面の設定の表示が１００％では見えず、
> ７５％で縦帯が見える場合があります。

先日、田中よりお伝えしておりました
下記のコードですが

= この下の行から ====================

@media screen and (min-width:1400px) {
html{
background-image:url("【R-Cabinetからコピーした画像URL】");
background-repeat:repeat-y;
background-position:left;
}
body{
background-image:url("【R-Cabinetからコピーした画像URL】");
background-repeat:repeat-y;
background-position:right;
background-color:transparent;
}
}

= この上の行まで ====================

画面幅が1400px以上になったときに
縦帯を表示、という設定になっていますので

75%にて表示されているPCは
100%表示では画面幅が1400未満のため、
縮小表示し、1400pxを超えた時点で
縦帯バナーが表示されています。


例えば商品コード
tenjihin9980
のページの場合

商品の情報が掲載されている枠：1177px
縦帯バナーの横幅：100px
のため

1177px + (100px * 2本) = 1377px

以上の横幅がないと、商品情報を
縦帯が重なってしまうため、
田中より、上記のコードのご案内を
しておりました。

重なってでも縦帯を表示されたいようであれば
ご案内しているコードの
1400の数字を、表示されたいタイミングに
変更をお願いいたします。

Answer

いつもお世話になっております。
ご丁寧に教えていただき、ありがとうございます。
理解できました。

Answer

以下について、質問です。
１１７７PXというサイズであるということは、
どこでわかるのでしょうか？

例えば商品コード
tenjihin9980
のページの場合

商品の情報が掲載されている枠：1177px
縦帯バナーの横幅：100px
のため

1177px + (100px * 2本) = 1377px

Answer

ECマスターズの伊藤です。

> １１７７PXというサイズであるということは、
> どこでわかるのでしょうか？

Chromeのデベロッパーツールを使用して
サイズを確認しております。

確認したい箇所で右クリック ＞ 検証
右側に表示されているコードの
確認したい箇所に、カーソルを合わせると
サイズが表示されます。

例：楽天トップページのレフトナビの横幅を調べる
https://ec-masters.gyazo.com/857f2cc6231dfa6f3fd1ebe41ec6c722