楽天のカテゴリーページのズレについて

Question

お世話になります。楽天のカテゴリーページの表示がデバイス：PCOS：Windows10ブラウザ：Chorome（IEでは問題ないようです）URL：https://item.rakuten.co.jp/店舗ID/c/0000000366/トップの部分がズレてしまっています。IEではちゃんと表示されているのですが...。どこを直していいか困っているのですがわかりますでしょうか？

Answer

ECマスターズの伊藤です。＞トップの部分がズレてしまっています。Choromeで確認をさせていただいたところ、トップの画像が右にずれてしまっていることを確認いたしました。＞IEではちゃんと表示されているのですが...。各ブラウザごとに、初期で設定されているCSSが異なっております。今回の画像は、カテゴリのパンくず下から、top: -879px;left: -251px;ずらすことでトップの画像に重ねてる、といった方法で表示しているようですが、その距離がChoromeとIEで異なっているため、レイアウトにずれが生じています。IEのみに適用させるCSSを使用し、IEとChoromeに別々のCSSを設定することも可能ですが、今回の場合、CSSで

の背景画像にトップの画像を表示させるといった方法が、ブラウザごとに表示が異なることがなく、最適と考えましたので、こちらの方法をご案内させていただきます。＝＝＝＝＝追加するCSS＝＝＝＝＝div.top-cap2{ background:url(https://www.rakuten.ne.jp/gold/【省略】/stock0040003.jpg);}＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝上記CSS追加により、下記HTMLが不要となりますので、削除をお願いします。＝＝＝＝＝削除するHTML＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝上記修正いただきますと、ズレがなく表示されると思いますので、お試しいただきますようお願いいたします。

Answer

ありがとうございます。綺麗に画像が入りました！嬉しいです♪ただ、続けてで申し訳ないのですがhttps://www.rakuten.ne.jp/gold/【省略】/stock0040003.jpgの両端が微妙にずれているというか、画像がはみ出してしまっています。※chomeのみ対処法はありますでしょうか？よろしくお願い致します。

Answer

ECマスターズの伊藤です。画像がきれいに設置できたようで、よかったです。CSSの上書きを利用していただくと、デザインの幅も広がると思いますので、ぜひ覚えてみてください。＞ただ、続けてで申し訳ないのですが＞https://www.rakuten.ne.jp/gold/【省略】/stock0040003.jpg＞の両端が微妙にずれているというか、画像がはみ出してしまっていますこちらは、#containerに設定している背景画像がはみ出していることが原因でしたので、「背景画像を設定しない」CSSをお試し頂けますでしょうか。追加していただくCSSは、下記の通りとなります。＝＝＝＝＝＝＝＝＝＝＝＝#container{ background : none;}＝＝＝＝＝＝＝＝＝＝＝＝

Answer

おお、なるほど！出来ました！ありがとうございます。素早い対応に感謝いたします。なお、今回頂いたご指摘で気付いたのですが背景画像（https://www.rakuten.ne.jp/gold/店舗ID/image/img0007.jpg）を楽天のトップページは「#container」に、それ以外には「#pagebody」に設定しています。※両方にしないとどちらかに表示されないため...。重たい画像を2重で設定しているため、一つにした方がいい気がするのですが方法はありますでしょうか？よろしくお願い致します。

Answer

ECマスターズの伊藤です。＞楽天のトップページは「#container」に、それ以外には「#pagebody」に設定しています。認させていただいたところ、トップページで背景画像を設定しているのはbodyタグでした。#containerの箇所は効いていないようです。「トップ説明文上」に記載していただいているでCSSで背景の指定がされているようですので、こちらをトップ以外のページに埋め込んでご確認頂けますでしょうか。＞重たい画像を2重で設定しているため、一つにした方がいい気がするのですが＞方法はありますでしょうか？CSSが効いていなくて画像が表示されない場合は、画像の読み込みは行われません。ですが、不要な部分は削除していただいたほうが、ページ表示速度（ほんの少しですが…）の影響や、今後の更新が楽になるなどのメリットがございますので、ぜひこの機会に修正を行ってみてください。

Answer

ありがとうございます。色々、修正に時間がかかりそうなのと表題とずれてしまってきたので一旦、解決とさせて頂きます。わからない部分は改めて質問させて頂きます。細かく、ご指導いただきありがとうございます。かなり、助かりました。これからもよろしくお願い致します。

楽天のカテゴリーページのズレについて

カテゴリーから探す