• 文字サイズ


解決済

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

  • 相談者:非公開
  • 2021/02/21 17:24
Yahoo!ショッピングの商品ページのスマホ版とアプリ版の表示の差異についておうかがいします

「スマートフォン用フリースペース」に空欄で登録した場合
スマホ・ブラウザー版で商品ページでは、
1.PCスマホ共通の商品情報が一部表示され
2.小さく書かれた「詳しく見る」を押すと
3.PC版の商品情報が100%のワイドに修正され、問題なく商品ページが表示されます。

同じ商品ページをアプリ版で見た場合
1.PCスマホ共通の商品情報が全文表示され
2.「商品情報をもっと見る」のバナーを押すと
3.PC版の商品情報がワイド修正されずに画面からはみ出して表示されます

アプリ版の「商品情報をもっと見る」を押した後も、ワイド修正させて表示させるには、どこを修正すれば良いでしょうか?
キーワード:スマホサイトアプリ
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも!?
2020年は4月から毎週オンラインにて開催し、1900社が参加された90分で学べる楽天集客対策セミナーですが、アップデートをして2021年も開催いたします。

  • 返信者:非公開
  • 2021/02/21 17:48
ECマスターズの中野です。

パクチーさんがおっしゃられた手順で実際に
パクチーさんの商品を確認させていただいたところ、
「商品情報をもっと見る」のバナ………(省略)………
  • 返信者:非公開(質問者)
  • 2021/02/21 18:13
お休みの所、早々の返信ありがとうございます。

商品によってスマートフォン用フリースペースに入力した商品と空欄の商品が混在しています。
「投稿内容について………(省略)………
  • 返信者:非公開
  • 2021/02/21 18:19
ECマスターズの中野です。

ご返信いただきありがとうございます。
お送りいただいた商品ページを再度スマートフォンアプリで
確認させていただきましたが、………(省略)………
  • 返信者:非公開(質問者)
  • 2021/02/22 10:29
お世話になります。

>はみ出さずに正常に表示されておりました。

これはiPhoneのアプリでの結果でしょうか?
iPhoneだとしたらアプリでは「………(省略)………
  • 返信者:非公開
  • 2021/02/22 11:52
ECマスターズの田中です。

私のiPhone 11の場合、
アプリでは「商品情報をもっと見る」が表示され、
初回は画面幅に併せて表示されましたが、
………(省略)………
  • 返信者:非公開(質問者)
  • 2021/02/22 15:07
>まずは一度、各<img>タグおよび<table>タグに
>width="700" style="max-width:100%;"
>上記の指定をお試しいた………(省略)………
  • 返信者:非公開
  • 2021/02/22 15:32
ECマスターズの田中です。

> 上記の指定はどの箇所に挿入すれば良いのでしょうか?

各<img><table>タグごとに、下記のように挿入していただ………(省略)………
  • 返信者:非公開(質問者)
  • 2021/02/22 15:43
テーブルタグ<table width="700"...>を使っている場所で、他のサイズ指定をしている箇所はどのようにすれば良いでしょうか?

<th wid………(省略)………
  • 返信者:非公開
  • 2021/02/22 20:08
ECマスターズの田中です。

申し訳ありません、
tableタグへ「max-width」を指定しても、期待通りに動作しないことがわかりました。
お手数で………(省略)………
  • 返信者:非公開(質問者)
  • 2021/02/24 11:11
ありがとうございます。案内いただいた方法で修正したところ
アプリ版でもはみ出さずに表示されるようになりました。

他店の商品もいろいろと見たのですが
ア………(省略)………
  • 返信者:非公開
  • 2021/02/24 13:21
ECマスターズの田中です。

無事表示できて何よりです。
トリプルをご利用の場合は、<link>タグで外部CSSファイルを読み込ませることで
全商品一括………(省略)………
  • 返信者:非公開(質問者)
  • 2021/02/24 13:43
回答ありがとうございます。

>トリプルをご利用の場合は、<link>タグで外部CSSファイルを読み込ませることで
>全商品一括の適用も可能となりますので………(省略)………
  • 返信者:非公開
  • 2021/02/24 18:14
ECマスターズの田中です。

> 「<link>タグで外部CSSファイルを読み込ませる」はどのようにすればよいでしょうか

まず、テキスト編集ソフト(メ………(省略)………
  • 返信者:非公開(質問者)
  • 2021/02/25 21:13
トリプルにファイルをアップ―ロードして
他の商品に<link>タグを貼り付けたところ、上手く表示することが出来ました

トリプルではこんな利用方法もできる………(省略)………