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

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タグの挿入↓ヘッダーコンテンツの、ここの部分のことでしょうか？<style type="text/css"><!--/* ★目玉商品 */.lossleader_item_name { font-weight:normal; margin-top:5px; line-height:1.4; }span.lossleader_double_price_title { font-weight:normal; margin-top:5px; line-height:1.4; }span.lossleader_double_price { font-weight:normal; margin-top:5px; line-height:1.4; }/* ★共通パーツ *//* link ------------------------------------------------------*/a:link    { color:#3E3A39; text-decoration:none; outline:none; }a:visited { color:#44141a; text-decoration:none; outline:none; }a:active  { color:#3E3A39; text-decoration:none; outline:none; }a:hover   { color:#6E6A69; text-decoration:none; outline:none; }/* etc -------------------------------------------------------*/body { width:960px; color:#444444; text-align:center; margin:0px auto; }img { margin:0; padding:0; border:0; }（以下省略）上記の、body { width:960px; color:#444444; text-align:center; margin:0px auto; }の、どこをどのように削除すれば良いのでしょうか？ご教示をお願い致します。

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; }上記の状態で保存してください。

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

カテゴリーから探す