スマートフォン用商品説明文へhtml作成

Question

いつもお世話になります

スケッチページを利用し表作成ができ、PC用販売説明文へはおさまるのですが
スマホへ簡単な倍率下げるなど、設定教えて頂きたいです。

■html文字を組む事により、写真や画像より検索対策ロジックに関係あるんですよね？

ご回答はいそぎません。よろしくおねがいします

↓


油性固形研磨剤　粒度表300番2000番6000番赤棒 トリポリ（珪石)　粒径40(μm)
白棒 ライム(酸化アルミナ) 粒径8(μm)青棒（酸化クロム）粒径3(μm)作業手順
一般的な仕様順番は下記の通りとなります1)赤棒　粗削り・バリ取りなど下磨き用2)白棒　
中仕上げ3)青棒　最終・鏡面仕上げ★ポイント1
バフグラインダー回転速度と摩擦熱により研磨剤が溶け鏡面仕上げ加工となります。
鉄・ステンレスなど磨きあげる場合、研磨剤は少量をバフに付け磨きあげるのがコツです。※グラインダー回転数1500～2500rmp
★ポイント2
白棒・青棒などカッター等で細かく削り、粉末状にし研磨不織布など手作業で刃物等の磨きにも効果が現れます

Answer

ECマスターズの田中です。

> スマホへ簡単な倍率下げるなど、設定教えて頂きたいです。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

スマートフォン用商品説明文に、
同じ表を簡単に設置する方法をご希望ということですね。

たとえば、スマートフォン用の商品ページ共通説明文に
 #itemDescription table { max-width: 100%; }  
という一行を加えていただくことで、

スマートフォン用商品説明文内にtableタグをそのまま入れても
横幅がはみ出なくなりますので、
一度お試しいただきますようお願いします。

> ■html文字を組む事により、写真や画像より検索対策ロジックに関係あるんですよね？

確かに、
PC用販売説明文とスマートフォン用商品説明文は
楽天内検索の対象となっておりますので、
記載いただいた文字が、楽天内の検索でヒットするようになります。

Answer

田中さん

スマートフォン デザイン設定→商品ページ設定→商品ページ　共通パーツ設定→商品ページ共通説明文

へ、 #itemDescription table { max-width: 100%; } 　のみを入れるということでしょうか？

上記の、

Answer

ECマスターズの中野です。

いただいたこちらのご質問ですが、
明日、田中より回答させていただいます。

お時間いただいておりますが
お待ちいただきます様よろしくお願いいたします。

Answer

ECマスターズの田中です。

私のiPhone8にて確認したところ、問題なく表示されているのですが、
PC上のスマートフォン表示で確認すると、確かにはみ出したままになっているようです。

ご案内差し上げたソースから「max-」を削除して、
 #itemDescription table { width: 100%; } 
に修正していただくといかがでしょうか。

Answer

田中さん

案内のとおり、

「max-」を削除して、
 #itemDescription table { width: 100%; } 
に修正しますと、うまく解決できました。ありがとうございます

ちなみに、このソースは画像や他にも全て対応できるのでしょうか？
他で作成したhtmlも反映され便利です

Answer

ECマスターズの田中です。

> このソースは画像や他にも全て対応できるのでしょうか？
詳しい状況を確認する必要がございますが、
横幅いっぱいに表示して問題ないものであれば対応できます。

たとえば、
 #itemDescription table, #itemDescription img { width: 100%; } 
のように、「, #itemDescription img」を追記していただくことで、
商品説明文内の全てのタグ、つまり画像を横幅いっぱいにすることができますが、
中央に小さく表示するつもりだった画像も含め、
全ての画像が問答無用で横幅いっぱいに表示されます。

横幅いっぱいに表示されることによる表示崩れに気をつけながら、
他のタグへの適用をご検討いただければと思います。

Answer

田中さま

 #itemDescription table, #itemDescription img { width: 100%; } 
のように、「, #itemDescription img」を追記していただくことで、
商品説明文内の全てのタグ、つまり画像を横幅いっぱいにすることができますが、
中央に小さく表示するつもりだった画像も含め、
全ての画像が問答無用で横幅いっぱいに表示されます。

↑

いろいろ発見できました。ありがとうございます
このスレッドは、お気に入りにして、また勉強します(^^）

Answer

田中さん

お世話になります
追加で、質問なのです。

上記の、 #itemDescription table { width: 100%; } 
を商品ページ共通説明文に挿入し 、pcもスマホもキレイに表示おさまり解決しているのですが・・

楽天アプリは、はみ出て横幅しまします。
コレは仕方ない事なのでしょうか？
何か方法があれば、教えてください
よろしくお願いします

Answer

ECマスターズの田中です。

> 楽天アプリは、はみ出て横幅しまします。
> コレは仕方ない事なのでしょうか？

はい、楽天アプリの場合、通常の商品ページと構造が異なり、
また、構造を調べることができないため、
楽天アプリ上での対策はどうしても困難になってしまいます。

万が一、他の店舗でうまく実装されている商品がございましたら、
私にて構造をお調べいたしますので、
URLをお知らせいただきますようお願いします。

Answer

田中さん

そうなんですね。
商品ページをリニューアル（編集）した場合、クローム拡張でPC&SPは把握できるのですが
楽天アプリで見て確認した時、何故？こんな変なレイアウトになるんだろうと、不思議におもってました。
また、うまくやっている他店みつけたら、ご相談します。

Answer

田中さま

いつもお世話になります。

こちらの商品ページの表などは、PC/SP/アプリでキレイに表示されてます。
このようにするには、html共通は無理なのでしょうか？
お時間ある時、教えてください。
よろしくお願いいたします

https://item.rakuten.co.jp/tokeiten/g-shock-gaw/?s-id=top_normal_histreco_bh

駆動方法	ソーラー（タフソーラー光発電）
防水性能	20気圧防水
・・などの表です。

Answer

ECマスターズの田中です。

いただいた商品ページの表は、
PC用とスマートフォン用で同じソースではないのですが、

スマートフォン用の表は、
親要素の横幅との割合によって、
表・セルの横幅が指定されておりました。

なんつれさんの表がスマートフォン用ページではみだしたのは、
横幅が固定値で設定されていることが原因ですので、
なんつれさんも、割合での横幅指定をお試しいただくのはいかがでしょうか。

例としていただいた
https://item.rakuten.co.jp/mekin-hiroba/10000013/
上記ページの表を例にすると、

Answer

田中さん

色々とありがとうございます。
楽天rmsの場合、pc・スマホ・スマホアプリでhtml組む場合、いろんな仕切りがある事が今回よくわかりました。
特に、など表を組む時、デバイスによって見方がかわるんですね
上記の、教えでスマホのみ見やすく整えました。ありがとうございます。

ちなみに・・

Answer

ECマスターズの田中です。

> th width"144"を"653"で割り算すれば、おおよそのパーセント表示がでるのですかね

概ね、そのような形になります。
25%や、144/653=約22%にこだわらずとも、
左側の題名が途中で改行されないか、逆に余白が広すぎないか、
実際に調整しながらご確認いただければ結構です。

> 希望としては、よく使用しているクローム拡張機能に「楽天アプリ」のイメージ表示があれば有難いなと思いました。

実現できれば会員の皆様にお役立ていただける仕組みであることは
承知しているのですが、
楽天アプリの画面は、HTMLではない仕組みでできていることもあり、
正確な再現が非常に困難となっておりますことを
お含みおきいただきますようお願いします。