質問: 楽天市場のヘッダー・フッター・レフトナビのレイアウトに関して 今まで、楽天市場のレイアウトが崩れてしまうため左寄せで作っていました。商品の画像の大きさを変更したため、右がデコボコになってしまいセンター揃えにして田翁したいと思いました。ところが左端が揃わずおかしな状態になりました。https://item.rakuten.co.jp/vari/bl-sl-b-202/フォーラムでも以下を試してみましたが出来ませんでした。https://forum.ec-masters.net/post_view.php?id=12563コレを揃えるために、楽天のコールセンターに電話しましたが解決せずでした。もし、対応方法がわかるようであれば教えて下さい。
回答: ecマスターズの田中です。微調整を行うにあたり、楽天市場の商品ページの構造を念頭に置いていただきますようお願いします。楽天市場の商品ページは、見えないタグが幾重にも重なった構造となっており、ヘッダーコンテンツより下(からフッターコンテンツの直上)の部分は、レフトナビゲーション+20pxの余白+ページ内容(pc用販売説明文、商品画像+買い物かご、など)+20pxの余白という構造になっており、ヘッダーコンテンツは、最後の余白を含む横幅全体を利用する形になっております。いただいた商品ページの場合、レフトナビゲーションが横幅200px、ページ内容が804pxとなっておりますので、レフトナビゲーションからページ内容までの横幅は1024px、ヘッダーコンテンツ全体の横幅は1044pxとなります。ヘッダーと内容の左右を完全に調整させたい場合、最後の余白により、単純な中央揃えですとどうしても左に10px偏ってしまいますので、左揃えにして横幅を合わせる、中央揃えにしてレフトナビゲーションの中で左に20px余白を加える、などの方法で調整の上、横幅を合わせていただきますようお願いします。