楽天お買い物マラソン縦帯バナーの表示の不具合について

Question

いつも大変お世話になります。
有限会社タウンの辻です。

御社の提供のお買い物マラソンの縦帯バナーをヘッダー部分に
以下のタグを入れているのですが、右端のみ切れていしまいます。
なにかタグが重複して不具合がおこっているのでしょか。
ご確認よろしくお願いいたします

※以下が現在ヘッダー部分に入れていますタグ全般です。










html{
background-image:url("https://image.rakuten.co.jp/sourire-lien/cabinet/05743858/imgrc0073359648.gif");







background-repeat:repeat-y;
background-position:left;
}
body{
background-image:url("https://image.rakuten.co.jp/sourire-lien/cabinet/05743858/imgrc0073359648.gif");
background-repeat:repeat-y;
background-position:right;
background-color:transparent;
	}

Accepted Answer

ECマスターズの田中です。

縦帯バナーを表示させる仕組みでは、
ページの大本となっている各タグに
背景画像を設定することで縦帯バナーを実現しているのですが、

https://www.rakuten.ne.jp/gold/sourire-lien/template/css/style.css
に記載された
body , html {
    height: 100%;
}
という規則により、タグの高さが制限されたことが原因で
タグに設置された縦帯バナーが切れておりました。

単純にstyle.cssから記述を削除すると
他のページの見た目に影響が出る可能性がございますので、

いただいたソースのとの間に

html body { height: inherit; }

と記載して、高さの指定を上書きしてしまうことをオススメします。

その際、縦帯バナーの表示位置に左右でズレが発生するため、
background-position:left;
background-position:right;
各プロパティの値に
background-position:left top;
background-position:right top;
上記のように「 top」を追記して、ズレを防いでいただきますようお願いします。

上記内容を実際に反映させた後、
思わぬところが影響を受けてページ崩れにつながっていないかどうか、
念の為ご確認いただきますようお願いします。

Answer

この度は、早急なご返信誠にありがとうございます

ご指導いただきましたいただいたのを参考にしまして以下のように記載後
ヘッダーへ入力後更新したのですが表示は改善されませんでした。











	

	
html{
background-image:url("https://image.rakuten.co.jp/sourire-lien/cabinet/05743858/imgrc0073359648.gif");
background-repeat:repeat-y;
background-position:left top;
}
body{
background-image:url("https://image.rakuten.co.jp/sourire-lien/cabinet/05743858/imgrc0073359648.gif");
background-repeat:repeat-y;
background-position:right top;
background-color:transparent;
	}
	

これで改善ができませんでしたので
https://www.rakuten.ne.jp/gold/sourire-lien/template/css/style.cssからダウンロードしてしてから
html body { height: inherit; }をタグを追加記載後、再度楽天ゴールドへ
アップロードするのでしょうか。

恐れ入りますが再度ご回答よろしくお願いいたします

Answer

ECマスターズの田中です。

ご記載いただいた場所は、 に囲まれて
コメントアウトされている部分になりますので、
スタイルシートとして適用されておりません。

有効な場所、
たとえば、すぐ下の  と html{ の間、
などにご記載いただきますようお願いします。

Answer

この度は早急なご回答誠にありがとうございました。
無事解決致しました。
今後共よろしくお願いいたします。

有限会社タウンの辻