Yahoo!ショッピングのアプリ版スマホ商品ページ表示のハミだし関して

Question

Yahoo!ショッピングの商品ページのスマホ版とアプリ版の表示の差異についておうかがいします

「スマートフォン用フリースペース」に空欄で登録した場合
スマホ・ブラウザー版で商品ページでは、
1.PCスマホ共通の商品情報が一部表示され
2.小さく書かれた「詳しく見る」を押すと
3.PC版の商品情報が100%のワイドに修正され、問題なく商品ページが表示されます。

同じ商品ページをアプリ版で見た場合
1.PCスマホ共通の商品情報が全文表示され
2.「商品情報をもっと見る」のバナーを押すと
3.PC版の商品情報がワイド修正されずに画面からはみ出して表示されます

アプリ版の「商品情報をもっと見る」を押した後も、ワイド修正させて表示させるには、どこを修正すれば良いでしょうか？

Answer

ECマスターズの中野です。

パクチーさんがおっしゃられた手順で実際に
パクチーさんの商品を確認させていただいたところ、
「商品情報をもっと見る」のバナーを押すと画面からはみ出さず
正常に商品情報を確認できました。

一度アプリを再起動して同じ動作確認を試してみていただけますでしょうか。
お手数おかけいたしますがよろしくお願いいたします。

Answer

お休みの所、早々の返信ありがとうございます。

商品によってスマートフォン用フリースペースに入力した商品と空欄の商品が混在しています。
「投稿内容について報告する」から「空欄」ではみ出している商品URLを送りますので、そちらの商品ページを確認してもらえますでしょうか

Answer

ECマスターズの中野です。

ご返信いただきありがとうございます。
お送りいただいた商品ページを再度スマートフォンアプリで
確認させていただきましたが、はみ出さずに正常に表示されておりました。

いただいたこちらのご質問につきまして、
再度確認させていただき明日またご連絡させていただきます。

お時間いただき申し訳ございませんが、
お待ちいただきます様よろしくお願いいたします。

Answer

お世話になります。

>はみ出さずに正常に表示されておりました。

これはiPhoneのアプリでの結果でしょうか？
iPhoneだとしたらアプリでは「商品情報をもっと見る」と「詳しく見る」のどちらが表記されますでしょうか？

手持ちのアンドロイド2機種で操作した場合、下記のようになっています
1.アプリでは「商品情報をもっと見る」が表示され、はみ出してページが表示される
2.webでは「詳しく見る」が表示され、きちんとワイド修正される

よろしくお願いします。

Answer

ECマスターズの田中です。

私のiPhone 11の場合、
アプリでは「商品情報をもっと見る」が表示され、
初回は画面幅に併せて表示されましたが、
２回目以降ははみ出して表示されるようになりました。
webでは「詳しく見る」が表示され、画面幅に併せて表示されております。

アプリ内のブラウザでは開発者ツールが使えないため、
正確な原因を追求することが非常に難しいのですが、
おそらく、商品情報の内容が指定通り700pxのまま表示されておりますので、

まずは一度、各タグおよびタグに
width="700" style="max-width:100%;"
上記の指定をお試しいただきますようお願いします。

Answer

>まずは一度、各タグおよびタグに
>width="700" style="max-width:100%;"
>上記の指定をお試しいただきますようお願いします。

商品説明(PCのみ)にテーブルタグを使っていますが、
上記の指定はどの箇所に挿入すれば良いのでしょうか？

現在、商品説明のはサイズ指定なしで設定しております。

Answer

ECマスターズの田中です。

> 上記の指定はどの箇所に挿入すれば良いのでしょうか？

各タグごとに、下記のように挿入していただく形になります。
（つまり、指定のないタグにも、同じ指定を行っていただく形になります）


↓



↓

Answer

テーブルタグを使っている場所で、他のサイズ指定をしている箇所はどのようにすれば良いでしょうか？



    (等、テーブルタグを使用)

Answer

ECマスターズの田中です。

申し訳ありません、
tableタグへ「max-width」を指定しても、期待通りに動作しないことがわかりました。
お手数ですが改めて、
・img、tableタグには、style="width:min(700px, 100%); を指定
・thタグは width="14%" に変更（無いところは必要なし）
・tdタグは width="86%" に変更
上記のようにご指定いただきますようお願いします。
全商品変更の前に、まずはいただいた商品ページにて、無事変更できるかどうかご確認をお願いします。


↓



↓



↓




↓

Answer

ありがとうございます。案内いただいた方法で修正したところ
アプリ版でもはみ出さずに表示されるようになりました。

他店の商品もいろいろと見たのですが
アプリ版で同様に表示(画像がはみ出す)されるのはあまりありませんでした。

PC商品説明以外にもスマートフォン用フリースペースにスマホ用の説明文を入力するのが
普通・多数のお店が行ってる事なのでしょうか？

Answer

ECマスターズの田中です。

無事表示できて何よりです。
トリプルをご利用の場合は、タグで外部CSSファイルを読み込ませることで
全商品一括の適用も可能となりますので、ご検討いただければ幸いです。

スマートフォン用フリースペースの利用の有無につきましては
各店舗での判断となり、Yahoo!ショッピングの全ストア通して状況を調べることも困難なため
一概に申し上げることができません。

商品説明とスマートフォン用フリースペースで各デバイスに最適な見た目を作るか、
商品説明のみでPC/スマートフォン両方に合わせた見た目を作るか、
パクチーさんに合う方法で構築していただきますようお願いします。

Answer

回答ありがとうございます。

>トリプルをご利用の場合は、タグで外部CSSファイルを読み込ませることで
>全商品一括の適用も可能となりますので、ご検討いただければ幸いです。

トリプルを利用していますが
「タグで外部CSSファイルを読み込ませる」はどのようにすればよいでしょうか

Answer

ECマスターズの田中です。

> 「タグで外部CSSファイルを読み込ませる」はどのようにすればよいでしょうか

まず、テキスト編集ソフト（メモ帳など）に下記内容をご記載いただき、
= この下の行から ====================
img, table { width:min(700px, 100%); }
tr > :first-child { width: 14%; }
tr > :last-child { width: 86%; }
= この上の行まで ====================

記載が終わりましたら、
item210224.css
という名前で保存してください。

次に、トリプルに「css」というフォルダを作成して、
（すでにフォルダがある場合は作成の必要はありません）
保存したファイルをアップロードしてください。

最後に、商品説明に下記タグをご記載いただければ結構です。

※アップロード先のURLは、実際のURLに置き換えてください。
　ストアクリエイターProのトリプル管理ツールより「ブラウザ表示」していただくと、URLをご確認いただけます。
※調整できるようでしたら、ファイル名やアップロード先フォルダをご変更いただいても結構です。

Answer

トリプルにファイルをアップ―ロードして
他の商品にタグを貼り付けたところ、上手く表示することが出来ました

トリプルではこんな利用方法もできるのですね！
ありがとうございました！！