楽天スマートフォン　cssを使わないコーディングについて

Question

お世話になります。

以前「RMS　スマホ用商品ページ設定について」というタイトルで質問させていただいた件で、
楽天RMSの「商品ページ設定（スマートフォン）」内に画像のボタンを横に5つ並べたいと質問し、
CSSで対応できるとのご回答いただきました。

禁止タグを使わずに画像を横に並べる方法はありますでしょうか？

また、余白などは基本的に改行タグでするしか方法はないでしょうか？
それとも余白付きの画像に差し替えるとか…どのような手法が標準になるのでしょうか。

タグ強化後、RMSはスタイルシートでのレイアウトは何もできないのでしょうか？




-----過去の質問内容-----
楽天RMSの「商品ページ設定（スマートフォン）」についてです。
画像のボタンを横に5つ並べたいのですが、商品ページは縦に並んでしまいます。
画像を改行なしで横並びに、各画像は幅20％のサイズ指定、全部で横幅100％になるようにしています。
カテゴリページ設定にも同様のタグを入れているのですが、こちらは正常に横に並びます。

残りの制限文字数が少ないため、テーブルに入れるなどしてタグを増やしたくないのですが、
原因と対策が分かればと思い質問させていただきました。

どうぞよろしくお願いいたします。



-----過去のご回答いただいた内容-----
ECマスターズの田中です。

楽天のスマートフォン用商品ページで使われている外部スタイルシートにて、
下記の規則が記載されていることが原因です。

#shopCommonText img {
display: block !important;
max-width: 100% !important;
margin: 0 auto !important;
}

上記のdisplay属性が原因で、スマートフォン用商品ページにおいて、
共通説明文に含まれる画像は全て
ブロック要素となり、要素１つで１行を占めるようになります。

スタイルシートによる指定を無効にするには、
元々の規則より詳細な規則を設定する必要があります。

また、どうしてもスタイルシートが必要となるため、
楽天RMSの、禁止タグを入力できるバグを利用する必要があります。
そのため、今後、RMSの改修により、使用できなくなる可能性がありますので
ご承知おきください。

最初に、楽天GOLD内に、
下記の内容で外部スタイルシートファイル(■)をご用意ください。

===== この下の行から ================
body #shopCommonText img { display: inline-block !important; }
===== この上の行まで ================

ご用意ができましたら、
スマートフォン用の共通説明文に、下記内容を追記していただくことで
商品ページでも、画像を一行にまとめることができます。

===== この下の行から ================

===== この上の行まで ================
※(■)のURLは、実際の内容に置き換えてご利用ください。

Answer

ECマスターズの田中です。

内容をまとめて、改めてご案内いたしますので
今しばらくお待ちいただきますようお願いします。

Answer

ECマスターズの伊藤です。

> 以前「RMS　スマホ用商品ページ設定について」というタイトルで質問させていただいた件で、
> 楽天RMSの「商品ページ設定（スマートフォン）」内に画像のボタンを横に5つ並べたいと質問し、
> CSSで対応できるとのご回答いただきました。
> 
> 禁止タグを使わずに画像を横に並べる方法はありますでしょうか？

tableタグをご利用いただき、
画像を並べていただくようになります。











> また、余白などは基本的に改行タグでするしか方法はないでしょうか？
> それとも余白付きの画像に差し替えるとか…どのような手法が標準になるのでしょうか。

改行でご対応いただくか、
1px x 1px の透明な画像を用意いただき

のように、画像を表示させることで、対応も可能となります。

ですが、文字数を余分に取ることになりますので、
基本的には、改行でご対応いただくのがよろしいと思います。

> タグ強化後、RMSはスタイルシートでのレイアウトは何もできないのでしょうか？

実装されない限り、詳細はわかりかねますが、
現時点では、そのようにお考えいただくのが
よろしいかと思います。

Answer

ありがとうございます。
テーブルと透明画像、昔使っていたのを思い出してきました。
禁止タグの修正がんばります。

楽天スマートフォン cssを使わないコーディングについて

楽天スマートフォン　cssを使わないコーディングについて