商品ページのHTMLについて

Question

回遊率アップのために、スマートフォンとPCにHTMLを設置したいと考えております。
参考店舗さんのページを添付させていただきます。

HTMLについて知識がなく、チャットGPTやHTMLプレビューツールを活用したのですが、
楽天の使用不可タグが入ってしまい、HTMLを作成することができませんでした。
もし可能でしたら、添付画像のようなHTMLをお伺いさせていただけますか。
価格帯やカテゴリーのURLを入れたいと思っております。

恐れ入りますが、よろしくお願いいたします。

【参考店舗URL】
https://item.rakuten.co.jp/omutsufactory/polo-ralph-lauren-cake-3d/?iasid=07rpp_10095___ew-lfkeswq2-80-4dcfc625-5ea6-499d-a7a1-d81e44f763a5

https://item.rakuten.co.jp/tsutsu-uraura/sakurai-c1000-2s/?s-id=top_normal_browsehist&xuseflg_ichiba01=10015831###HR######IMG0c3e34921996ec7867d923f0f823cb6d1.pngIMG0### ###IMG17c14499afdb283dff0c3022c1b679d15.pngIMG1### ###IMG242ce09fffc9d678e92ff403c6f73d2fc.pngIMG2###

Answer

ECマスターズの伊藤です。

> 添付画像のようなHTMLをお伺いさせていただけますか。
> 価格帯やカテゴリーのURLを入れたいと思っております。

https://ec-masters.gyazo.com/65e44045d07df6658edf30cd7020bf5d
こちら、参考の店舗さんは、
画像でご用意頂いています。

PC、スマホともに対応したタグにて
作成したいというようであれば、
tableタグにて、作成いただくことができます。

例


1-1
1-2
1-3



テーブルタグ作成ツール
https://www.tagindex.com/tool/table.html

をご利用いただくと、
比較的簡単に、タグを作ることができます。

上記のタグは、下記画像の設定となっています。
https://ec-masters.gyazo.com/57d738bd5761c2a663a6885308bffcdb

注意点としまして、

には、width="100%"のように、
%で入れることができないため、
修正が必要となります。

また、

には、widthを指定できないので、
width="33%"
のように、横幅の指定を入れる必要があります。

の横幅は、100%が横幅いっぱいとなり、
3列であれば、100 ÷ 3 = 33%
2列であれば、50% のように、指定してください。


https://ec-masters.gyazo.com/9c33b7fea0ee1f767f8e10e5653c634f
こちらのデザインは、スマホでは
作成することができないため、
PC、スマホともに表示させたいようであれば、
画像でご用意いただくようになります。

Answer

ご確認ありがとうございます。
ツールにて作成をしたのですが、2点修正したいのですが、
下記の2点について、ご教授いただけると助かります。

・セル内のテキストを改行または横幅を調整して、見栄えを良くしたい。
・画像を添付させていただきますが、赤色で記載した罫線を追加したい。

下記に商品ページのURLと作成したHTMLのタグを記載させていただきます。
恐れ入りますが、よろしくお願いいたします。

商品ページ
https://item.rakuten.co.jp/keyroom-hida/keyroom-10000060/

HTML（スマートフォン）
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;価格帯から探す


 〜1,000円
1,001円〜2,000円
2,001円〜3,000円


3,001円〜5,000円
5,001円〜10,000円
10,001円〜



&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;カテゴリーから探す


 食品
日用品
ベビー


ヘルスケア
オーガニック
ほぼ1000円ポッキリ

###HR######IMG05d58a24b85fb92ed87063047ef85d364.jpegIMG0###

Answer

ECマスターズの伊藤です。

> ・セル内のテキストを改行または横幅を調整して、見栄えを良くしたい。



こちらの
cellpadding="30"
の値で調整が必要となってきます。

もし、PCではこの幅がいいというようであれば、
PCとスマホでは、別々にタグをご用意
頂く必要が出てきます。

以下の画像は
　cellpadding="10"
　 〜の後ろに

1,001円〜2,000円
↓
1,001円〜2,000円

を入れた場合の表示イメージとなります。
https://ec-masters.gyazo.com/8fb92effd221f925eb5b6fd8e110ca1d

> ・画像を添付させていただきますが、赤色で記載した罫線を追加したい。


価格帯から探す


のようにしていただくことで、ご対応が可能となっています。

color="【カラーコード】"
を変更することで、他の色もご利用いただけます。
カラーコードについては下記をご参照ください。
https://www.tagindex.com/color/color_name.html


また
　　　　　　　　　カテゴリーから探す

のように、センタリングをスペースを入れて
ご対応いただいているかと思いますが、
センタリングは

カテゴリーから探す

にてご対応いただけます。

スペースですと、幅の異なるスマホでみた場合、
中央からずれてしまうため、
こちらもご修正お願い致します。