楽天市場のヘッダー・フッター・レフトナビのレイアウトに関して

Question

今まで、楽天市場のレイアウトが崩れてしまうため左寄せで作っていました。商品の画像の大きさを変更したため、右がデコボコになってしまいセンター揃えにして田翁したいと思いました。ところが左端が揃わずおかしな状態になりました。https://item.rakuten.co.jp/vari/bl-sl-b-202/フォーラムでも以下を試してみましたが出来ませんでした。https://forum.ec-masters.net/post_view.php?id=12563コレを揃えるために、楽天のコールセンターに電話しましたが解決せずでした。もし、対応方法がわかるようであれば教えて下さい。

Accepted Answer

ECマスターズの田中です。微調整を行うにあたり、楽天市場の商品ページの構造を念頭に置いていただきますようお願いします。楽天市場の商品ページは、見えない<table>タグが幾重にも重なった構造となっており、ヘッダーコンテンツより下（からフッターコンテンツの直上）の部分は、レフトナビゲーション＋20pxの余白＋ページ内容（PC用販売説明文、商品画像＋買い物かご、など）＋20pxの余白という構造になっており、ヘッダーコンテンツは、最後の余白を含む横幅全体を利用する形になっております。いただいた商品ページの場合、レフトナビゲーションが横幅200px、ページ内容が804pxとなっておりますので、レフトナビゲーションからページ内容までの横幅は1024px、ヘッダーコンテンツ全体の横幅は1044pxとなります。ヘッダーと内容の左右を完全に調整させたい場合、最後の余白により、単純な中央揃えですとどうしても左に10px偏ってしまいますので、左揃えにして横幅を合わせる、中央揃えにしてレフトナビゲーションの中で左に20px余白を加える、などの方法で調整の上、横幅を合わせていただきますようお願いします。

Answer

ECマスターズの星です。明日、担当の者よりご案内いたしますので今しばらくお待ちください。お待たせして申し訳ありませんがどうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。ページ全体の横幅を拡げている要素が２点ございましたので、まずはこれらを修正の上、表示をご確認願います。PC用の目玉商品にて、1行あたりの商品数 × 画像のサイズ が、800px程度になるように調整をお願いします。（商品数5→4、サイズ200px→160px、など）また、ヘッダーコンテンツおよびフッターコンテンツに記載されている<iframe>の横幅を、width="1200" から width="1000" にご変更いただきますようお願いします。

Answer

田中さんお返事ありがとうございます。まだどこかがおかしいようでサイズがピシッと合いません。微調整可能であればアドバイスをお願いします。無理であれば気にならない程度なので諦めます。スマホファーストで考えなければ行けないので。https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/

Answer

ECマスターズの海老塚です。ご返信誠にありがとうございます。休み明けに担当よりご回答させていただきますので、今しばらくお待ちいただきますよう、よろしくお願いいたします。

楽天市場のヘッダー・フッター・レフトナビのレイアウトに関して

カテゴリーから探す