- 文字サイズ変更
- 小
- 中
- 大
解決済
ヤフーカテゴリーページスマホ版の幅がうまくいかない
- 相談者：非公開
- 2018/11/03 14:29
お世話になります。
ヤフーのいい買い物の日の特集ページを作っていますが、
スマホ用のページの表示がうまくいきません。
100％で指定しているのに開いたときに100％以上の幅になり、
スクロールしなければいいけなくなります。
こちらのページです。
https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html
ソースは以下のように設定しています。
<p style="padding:0;margin:0;line-height:1.0;">
<img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_1.jpg" alt="森乃園×いいお買い物の日" width="100%"></p>
<p style="padding:0;margin:0;line-height:1.0;">
<img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_2.jpg" alt="目次" width="100%"></p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#50off"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_3.jpg" alt="大特価半額" width="100%"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#leaf"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_4.jpg" alt="定番ほうじ茶リーフ" width="100%"></a></td>
</tr>
<tr>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#teab"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_5.jpg" alt="定番ほうじ茶ティーバッグ" width="100%"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#sweets"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_6.jpg" alt="ほうじ茶スイーツ" width="100%"></a></td>
</tr>
</table>
<a name="50off"></a>
<p style="padding:0;margin:0;line-height:1.0;"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_7.jpg" alt="大特価半額" width="100%"></p>
<p style="padding:0;margin:0;line-height:1.0;"><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_8.jpg" alt="極上ほうじ茶10本セット" width="100%"></a></p>
<p style="padding:0;margin:0;line-height:1.0;"><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_9.jpg" alt="薬膳ほうじ茶10本セット" width="100%"></a></p>
<a name="leaf"></a>
<p style="padding:0;margin:0;line-height:1.0;">
<img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_10.jpg" alt="定番ほうじ茶リーフ" width="100%"></p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_11.jpg" alt="極上ほうじ茶" width="100%"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_12.jpg" alt="薬膳ほうじ茶" width="100%"></a></td>
</tr>
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_13.jpg" alt="桑の葉ほうじ茶" width="100%"></a></td>
<td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_14.jpg" alt="棒ほうじ茶 width="100%"></a></td>
</tr>
</table>
<a name="teab"></a>
<p style="padding:0;margin:0;line-height:1.0;"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_15.jpg" alt="定番ほうじ茶ティーバッグ" width="100%"></p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_16.jpg" alt="極上ほうじ茶TB"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_17.jpg" alt="薬膳ほうじ茶TB"></a></td>
</tr>
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_18.jpg" alt="桑の葉ほうじ茶TB20個入り"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_19.jpg" alt="極上ほうじ茶TB50個入り"></a></td>
</tr>
<tr>
<td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_20.jpg" alt="桑の葉ほうじ茶TB50個入り"></a><td>
<td></td>
</tr>
</table>
<a name="sweets"></a>
<p style="padding:0;margin:0;line-height:1.0;"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_21.jpg" alt="ほうじ茶スイーツ" width="100%"></p>
<p style="padding:0;margin:0;line-height:1.0;"><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_22.jpg" alt="極上ほうじ茶羊羹" width="100%"></a></p>
<br>
<br>
<br>
解決方法をお教えいただけないでしょうか。
宜しくお願いします。
ヤフーのいい買い物の日の特集ページを作っていますが、
スマホ用のページの表示がうまくいきません。
100％で指定しているのに開いたときに100％以上の幅になり、
スクロールしなければいいけなくなります。
こちらのページです。
https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html
ソースは以下のように設定しています。
<p style="padding:0;margin:0;line-height:1.0;">
<img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_1.jpg" alt="森乃園×いいお買い物の日" width="100%"></p>
<p style="padding:0;margin:0;line-height:1.0;">
<img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_2.jpg" alt="目次" width="100%"></p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#50off"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_3.jpg" alt="大特価半額" width="100%"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#leaf"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_4.jpg" alt="定番ほうじ茶リーフ" width="100%"></a></td>
</tr>
<tr>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#teab"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_5.jpg" alt="定番ほうじ茶ティーバッグ" width="100%"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#sweets"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_6.jpg" alt="ほうじ茶スイーツ" width="100%"></a></td>
</tr>
</table>
<a name="50off"></a>
<p style="padding:0;margin:0;line-height:1.0;"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_7.jpg" alt="大特価半額" width="100%"></p>
<p style="padding:0;margin:0;line-height:1.0;"><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_8.jpg" alt="極上ほうじ茶10本セット" width="100%"></a></p>
<p style="padding:0;margin:0;line-height:1.0;"><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_9.jpg" alt="薬膳ほうじ茶10本セット" width="100%"></a></p>
<a name="leaf"></a>
<p style="padding:0;margin:0;line-height:1.0;">
<img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_10.jpg" alt="定番ほうじ茶リーフ" width="100%"></p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_11.jpg" alt="極上ほうじ茶" width="100%"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_12.jpg" alt="薬膳ほうじ茶" width="100%"></a></td>
</tr>
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_13.jpg" alt="桑の葉ほうじ茶" width="100%"></a></td>
<td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_14.jpg" alt="棒ほうじ茶 width="100%"></a></td>
</tr>
</table>
<a name="teab"></a>
<p style="padding:0;margin:0;line-height:1.0;"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_15.jpg" alt="定番ほうじ茶ティーバッグ" width="100%"></p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_16.jpg" alt="極上ほうじ茶TB"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_17.jpg" alt="薬膳ほうじ茶TB"></a></td>
</tr>
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_18.jpg" alt="桑の葉ほうじ茶TB20個入り"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_19.jpg" alt="極上ほうじ茶TB50個入り"></a></td>
</tr>
<tr>
<td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_20.jpg" alt="桑の葉ほうじ茶TB50個入り"></a><td>
<td></td>
</tr>
</table>
<a name="sweets"></a>
<p style="padding:0;margin:0;line-height:1.0;"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_21.jpg" alt="ほうじ茶スイーツ" width="100%"></p>
<p style="padding:0;margin:0;line-height:1.0;"><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_22.jpg" alt="極上ほうじ茶羊羹" width="100%"></a></p>
<br>
<br>
<br>
解決方法をお教えいただけないでしょうか。
宜しくお願いします。
このフォーラムへの質問は終了しました
今気になってる疑問、
セミナーに参加すれば解決するかも！？
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
- 返信者：非公開
- 2018/11/03 15:28
ECマスターズの星です。
週明け担当の者よりご回答させていただきますので、
申し訳ありませんがお時間いただければ幸いです。
よろしくお願いいたします。………（省略）………
週明け担当の者よりご回答させていただきますので、
申し訳ありませんがお時間いただければ幸いです。
よろしくお願いいたします。………（省略）………
- 返信者：非公開
- 2018/11/05 11:15
ECマスターズの田中です。
「定番ほうじ茶ティーバッグ」表示用の<table>タグに含まれる
各<img>タグに「width="100%"」の指定がされ………（省略）………
「定番ほうじ茶ティーバッグ」表示用の<table>タグに含まれる
各<img>タグに「width="100%"」の指定がされ………（省略）………
- 返信者：非公開（質問者）
- 2018/11/05 11:43
田中様
お世話になります。
凡ミスでした。大変失礼いたしました。
表示はなおりました。
ありがとうございます。
あとお伺いたいのですが、ス………（省略）………
お世話になります。
凡ミスでした。大変失礼いたしました。
表示はなおりました。
ありがとうございます。
あとお伺いたいのですが、ス………（省略）………
- 返信者：非公開
- 2018/11/05 17:29
ECマスターズの田中です。
いただいた部分を確認したところ、
背景色（モスグリーン）の部分も画像の一部として作成されている、
ということですね。
………（省略）………
いただいた部分を確認したところ、
背景色（モスグリーン）の部分も画像の一部として作成されている、
ということですね。
………（省略）………
- 返信者：非公開（質問者）
- 2018/11/05 18:04
ご回答ありがとうございます。
ずれが生じてしまうのですね。
テーブルタグに背景色を指定し解決しました。
ありがとうございます。………（省略）………
ずれが生じてしまうのですね。
テーブルタグに背景色を指定し解決しました。
ありがとうございます。………（省略）………
このフォーラムへの質問は終了しました
質問を検索する