商品ページの表示のテンプレートについての質問

Question

こちらの画像の様な表示の仕方にするにはどこを調整すればいいのでしょうか？

１、商品画像の箇所でメイン画像下に３列で他の画像を表示させる。

２、その下の説明の箇所が色付けの波線で分かれて、説明が中央揃えで下に続いてる。



現在の設定の場合、商品画像が縦にずっと続いてる形となっており、したの商品説明部分に被る。
そして商品説明が右側に追いやれられている状況となっております。
宜しくお願いします。###HR######IMG06ded6ad5f0cd798c58aa17db88eccf4e.pngIMG0### ###IMG117094f8c53cd943006bd09110c0d9b3e.pngIMG1###

Answer

ECマスターズの伊藤です。

>こちらの画像の様な表示の仕方にするにはどこを調整すればいいのでしょうか？
>
>１、商品画像の箇所でメイン画像下に３列で他の画像を表示させる。

RMSの全商品共通テンプレートでは、
添付いただいた画像のように、
メイン画像の下にサブ画像を
「3列で表示する」レイアウトは、
標準ではご用意がありません。

そのため、該当の表示は
CSSにて対応頂く必要があります。

CSSは下記に記述いたしますが、
他の箇所への影響や楽天の仕様変更による
レイアウト崩れについては、保証致しかねますので
ご了承頂ける場合にのみご利用ください。

＝＝＝＝以下のCSSを商品説明文などに入れてください


div[irc="Image"] {
    width: 500px;
}
div[irc="Image"] .spacer--3J57F.flex-column--2dzMI {
    max-width: 500px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
div[irc="Image"] .spacer--3J57F.flex-column--2dzMI .spacer--3J57F:first-child,
div[irc="Image"] .spacer--3J57F.flex-column--2dzMI .spacer--3J57F:first-child .image-wrapper--2mtvl img.image--BGsMl {
    width: 100%;
}

div[irc="Image"] .spacer--3J57F.flex-column--2dzMI .spacer--3J57F:not(:first-child) {
    width: 32%;
    margin: 0 2% 2% 0;
}
div[irc="Image"] .spacer--3J57F.flex-column--2dzMI .spacer--3J57F:nth-of-type(3n+1) {
    margin-right: 0;
}



>２、その下の説明の箇所が色付けの波線で分かれて、説明が中央揃えで下に続いてる。

こちらの表示につきましては、
おそらく「テンプレートE」をご利用のうえ、
「PC用商品説明文」にてHTMLを
記述されているかと存じます。

テンプレートの種類や設定方法につきましては、
下記マニュアルをご参照くださいませ。

◾️[商品ページ設定 商品個別編集] 商品ページのURL・ページレイアウト
https://navi-manual.faq.rakuten.net/item/000046675

中央揃えにするにはcenterタグをご利用ください。


ここに中央揃えにしたい画像など

Answer

ご案内ありがとうございます。

CSSにて修正が必要だったんですね。
ありがとうございます。

＞おそらく「テンプレートE」をご利用のうえ、
「PC用商品説明文」にてHTMLを
記述されているかと存じます。

こちらなのですが、これは商品一個一個で適用していくしかないのでしょうか？
何か一括でテンプレートＥを全商品に適用する方法はありますか？

Answer

ECマスターズの伊藤です。

>こちらなのですが、これは商品一個一個で適用していくしかないのでしょうか？
>何か一括でテンプレートＥを全商品に適用する方法はありますか？

CSV一括編集機能をご利用いただくことで、
テンプレートの一括適用が可能です。

「商品情報レイアウト」項目に、
以下のいずれかの数値を入力することで、
各テンプレートを指定できます。

1：テンプレートA
2：テンプレートB
3：テンプレートC
4：テンプレートD
5：テンプレートE
6：テンプレートF
8：テンプレートG

テンプレートEをご希望の場合は、
「5」とご入力ください。

詳細は、以下のマニュアルの
「normal-item.csvのデータ形式」内、
「商品レベル ＞ 1-34」の項目を
ご参照ください。

◾️[商品ページ設定 商品一括編集] 商品登録用CSVファイル（ファイル名：normal-item.csv）のデータ形式
https://navi-manual.faq.rakuten.net/item/000046287