楽天PC用商品説明文

Question

お世話になっております。
下記URLの商品ページのPC用商品説明文についてお伺いします。
https://item.rakuten.co.jp/●●●/314/

特徴やサイズが記載してある四角枠組みと、その下の画像(ゆうメール対応商品ご注意とお知らせ)
の部分が右寄りになっているので、バランス良く中央に表示されるようにしたいです。
また、そのままネクストエンジンから商品ページを複製し、ヤフーショッピングとメイクショップにも反映させる予定です。
3店舗共通で都合良く表示させるには、どのように修正すればよろしいでしょうか？

Answer

ECマスターズの田中です。


> 特徴やサイズが記載してある四角枠組みと、その下の画像(ゆうメール対応商品ご注意とお知らせ)
> の部分が右寄りになっているので、バランス良く中央に表示されるようにしたいです。

まずは、商品ページの構造をご理解いただく必要がございます。

基本的に楽天市場のページは、大本のタグが
中央揃えで表示されている状態となっております。

上から見ていくと、
ヘッダーは大本のタグの横幅全体を使って中央揃えで表示されており、
その下より、レフトナビと、商品関連の情報（PC用販売説明文など）の２つに別れます。
さらに、右側の情報の中で、
商品画像とそれ以外（キャッチコピー、商品名、商品番号、販売価格など）に分かれております。

つまり、PC用商品説明文の左側には、
レフトナビと商品画像の分、余白ができている状態となっております。

これを中央揃えに見せるには、対策をご検討いただく必要がございます。
たとえば、

・レフトナビ・商品画像を、PC用商品説明文の左側に表示されるまで長くする
・必要に応じて「レフトナビゲーション」の内容を空にする
・商品関連の情報を表示するためのテンプレートを変更する
　https://navi-manual.faq.rakuten.net/item/000009619

といった方法で、PC用商品説明文（＋左側のコンテンツ）が
中央揃えで表示されるように見せる、という形になります。


> また、そのままネクストエンジンから商品ページを複製し、ヤフーショッピングとメイクショップにも反映させる予定です。
> 3店舗共通で都合良く表示させるには、どのように修正すればよろしいでしょうか？

各モールは、ページ全体の構造が大きく異なっており、
予め表示の崩れる部分を予測することが難しいため、
どうしても、実際に反映させながら、表示が崩れた箇所を
確認および修正、を繰り返していただく（過程で法則を見つけていただく）
必要がございます。