Yahooショッピングスマートフォン用フリースペースのテーブルタグについて

Question

フリースペースに、カラーバリエーションや関連商品のリンク画像を～タグを使って表示しています。
通常楽天などは、横3列並べる場合、各画像幅をwidth="”で幅指定しないといけないと思いますが、
Yahooの場合、各画像幅を width="100%"にしないと3列綺麗に並ばないためwidth="100%に
しています。

下記、上手く表示されないためご教示お願いいたします。

①横3画像表示にしていますが、5画像表示の場合、1行目3画像、2行目に2画像で、2行目の2画像が2画像でスマホ幅で表示されるため、1行目の画像より大きく表示されてしまいます。
ファイル　IMG_0688.PNG
https://store.shopping.yahoo.co.jp/aloha-hawaii-mau/fl-112013-wy.html
下の方　【他のピカケレイのご紹介】部分

どのようにすれば、2行目の2画像を1行目の3画像と同じ大きさで表示できるのでしょうか

ローズバッドレイ
https://store.shopping.yahoo.co.jp/aloha-hawaii-mau/fl-111189-rd.html
これは他のカラーバリエーションとして７カラー
1・2行目　３画像　３行目　1画像ですが、綺麗に表示されています。

ただ、～終わりの「」が抜けていましたが、なぜか上手く表示されています。
↑
が抜けていてもエラー表示など出ず、崩れず表示されるものなのでしょうか。
（確認すると元となるものをコピーして作成、PCページを元にスマホページ作成のためPC用もスマホ用もほとんどのページでが抜けてました）

②同じように～を使っているつもりですが、【他のピカケレイのご紹介】で2行目が横並びにならず、縦並びで表示されてしまってます、（他の商品ページでの2画像表示も同じです）また、ピカケロア チェリーのリンク先がピカケロングレイアイボリーの商品ページに行ってしまいます。（設置時、間違ってリンク先URLがロングレイアイボリーになっていたものを公開後チェリーのURLに変更し、反映しましたが今だにチェリーのページに行きません。（最初の公開・修正反映時間22日夕刻）　
ファイル　IMG_0696.PNG
https://store.shopping.yahoo.co.jp/aloha-hawaii-mau/fl-113001.html

よろしくお願いいたします。###HR######IMG0bf3aeab84e2f87d20c7df3bc9c70b9ac.pngIMG0### ###IMG17b89904bc4e0836371797d1d9cb4b5df.pngIMG1###

Answer

ECマスターズの伊藤です。

> ①横3画像表示にしていますが、5画像表示の場合、1行目3画像、2行目に2画像で、2行目の2画像が2画像でスマホ幅で表示されるため、1行目の画像より大きく表示されてしまいます。
> ファイル　IMG_0688.PNG
> https://store.shopping.yahoo.co.jp/aloha-hawaii-mau/fl-112013-wy.html
> 下の方　【他のピカケレイのご紹介】部分
> 
> どのようにすれば、2行目の2画像を1行目の3画像と同じ大きさで表示できるのでしょうか

横幅いっぱい=100%に対して
3枚配置されているので、
1つのtdの横幅が約33%となっております。

そのため、余白を入れたいところに

を追加してください。

|４枚め|５枚め|空白(width="33%")|


> ローズバッドレイ
> https://store.shopping.yahoo.co.jp/aloha-hawaii-mau/fl-111189-rd.html
> これは他のカラーバリエーションとして７カラー
> 1・2行目　３画像　３行目　1画像ですが、綺麗に表示されています。

> https://store.shopping.yahoo.co.jp/aloha-hawaii-mau/fl-111189-rd.html

は


|１枚め|２枚め|３枚め|
|４枚め|５枚め|６枚め|
|７枚め|８枚め|９枚め|
|１０枚め|空白|空白|


とひとまとまりになっていますが、

> https://store.shopping.yahoo.co.jp/aloha-hawaii-mau/fl-112013-wy.html


|１枚め|２枚め|３枚め|



|４枚め|５枚め|


となっているためです。


> ただ、～終わりの「」が抜けていましたが、なぜか上手く表示されています。
> ↑
> が抜けていてもエラー表示など出ず、崩れず表示されるものなのでしょうか。
> （確認すると元となるものをコピーして作成、PCページを元にスマホページ作成のためPC用もスマホ用もほとんどのページでが抜けてました）

閉じタグ()はなくても、ブラウザで補完されますが、
意図せぬ表示や、ページ崩れとなる可能性がございますので、
記載いただくことをおすすめいたします。


> ②同じように～を使っているつもりですが、【他のピカケレイのご紹介】で2行目が横並びにならず、縦並びで表示されてしまってます、（他の商品ページでの2画像表示も同じです）また、ピカケロア チェリーのリンク先がピカケロングレイアイボリーの商品ページに行ってしまいます。（設置時、間違ってリンク先URLがロングレイアイボリーになっていたものを公開後チェリーのURLに変更し、反映しましたが今だにチェリーのページに行きません。（最初の公開・修正反映時間22日夕刻）　
> ファイル　IMG_0696.PNG
> https://store.shopping.yahoo.co.jp/aloha-hawaii-mau/fl-113001.html

altの閉じ"がないため、htmlの構造が崩れています。

Answer

伊藤様
お世話になります。
お忙しい中、早々にありがとうございました。
無事、表記されました。


②の際に、～で5画像を囲んでみたのですが、altの閉じがなかったことが原因かと思いますが、1行目の左の画像だけが大きく表示されたので別テーブルタグにしました。
altの閉じがなかったことには、まったく気が付きませんでした、ありがとうございました。


今後のこともあり、タグに関して詳しくはないので確認させてください。

・3画像を横並びで表示させたい場合、
①今まで通りすべての画像にwidth="100%を付ける
②すべての画像にwidth="33%にする

・2画像の場合、
①今まで通り2画像にwidth="100%を付け、3画像目部分の空白をとする
②2画像をwidth="33%するだけ
③2画像をwidth="33%し、3画像目部分の空白をとする

・1画像の場合、
①今まで通り2画像にwidth="100%を付け、2・3画像目部分の空白をとする
②1画像をwidth="33%するだけ
③1画像をwidth="33%し、2・3画像目部分の空白をとする

また、5画像など3で割り切れない画像の設置の場合、ローズバッドレイのようにすべてを～で囲むようにした方がいいでしょうか。
これもすべての画像幅width="100%でいいのかどうか

どの方法がベストなのかご教示お願いいたします。

Answer

ECマスターズの伊藤です。

> ・3画像を横並びで表示させたい場合、
> ①今まで通りすべての画像にwidth="100%を付ける
> ②すべての画像にwidth="33%にする

> ①今まで通りすべての画像にwidth="100%を付ける
でお願いします。

画像にwidth="33%"と、入れると、
セルに対して33%となるため

|画像　　　|画像　　　|画像　　　|
のように表示されてしまいます。


> ・2画像の場合、
> ・1画像の場合、

同様の理由で、①でのご対応をお願いします。

> また、5画像など3で割り切れない画像の設置の場合、ローズバッドレイのようにすべてを～で囲むようにした方がいいでしょうか。
> これもすべての画像幅width="100%でいいのかどうか
> 
> どの方法がベストなのかご教示お願いいたします。

こちらは、正直なところ好みになります。

ただ、文字数の制限があるため、
タグの数はすこしでも少ない方が
よろしいと思いますので、
> ローズバッドレイのようにすべてを～で囲む
の方法をおすすめいたします。

Yahooショッピング スマートフォン用フリースペースのテーブルタグについて

Yahooショッピングスマートフォン用フリースペースのテーブルタグについて