楽天の商品ページの配置について

Question

楽天の商品ページがPC画面の左に寄ってしまいますが、常に画面の中央に位置されるような設定方法はないのでしょうか？
私が知らないだけかも知れませんが、もしその方法があればお教えいただきたいと思います。

Answer

ECマスターズの田中です。

楽天の商品ページは、初期状態で内容が中央揃えになる仕組みになっておりますが、
中央揃えするための枠となるタグの幅がスタイルシートで固定値に設定されていることが原因で、
左寄せの表示となっております。

既にヘッダーに記載されている

body { width:960px; color:#444444; text-align:center; margin:0px auto; }

上記スタイルシートの「width: 960px;」属性を削除することで、
商品ページが中央揃え表示となりますが、
同じヘッダーを使っている他のページに影響が出る可能性があります。

たとえば、他のページのレイアウトとの兼ね合いで、
タグの横幅を最低でも960px確保したい場合は、
「min-width: 960px;」にご変更ください。

Answer

ご回答ありがとうございました。

スタイルシートの「width: 960px;」属性を削除する…とのことですが、


デザイン設定
↓
ヘッダー・フッター・レフトナビのテンプレート設定
↓
テンプレートの編集・削除
↓
HTMLタグの挿入
↓
ヘッダーコンテンツ

の、ここの部分のことでしょうか？

Answer

ECマスターズの田中です。

body { width:960px; color:#444444; text-align:center; margin:0px auto; }

の「width: 960px;」を削除して、

body { color:#444444; text-align:center; margin:0px auto; }

上記の状態で保存してください。

万が一、保存した結果、レイアウトの崩れるページがありましたら、
削除ではなく「min-width: 960px;」に変更して、

body { min-width:960px; color:#444444; text-align:center; margin:0px auto; }

上記の状態で保存してください。