• 文字サイズ
解決済

スマホの商品ページのレイアウトが崩れてしまいました。

  • 相談者:非公開
  • 2019/09/27 13:45
スマホの商品画像の上のバナーを入れ替えたところ、
商品ページの全ページのレイアウトが崩れてしまいました。
スマホから見た場合、商品画像やバナーが、
商品説明より下になってしまい、
画像も半分しかうつりません。
例)https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/

商品ページ 共通パーツ設定は以下となっています。

<script ="" src="https//www.rakuten.ne.jp/gold/SHOP-URL/sptop.js"></script ="">


<iframe = "" width="100%" height="178" src="https//www.rakuten.ne.jp/gold/SHOP-URL/ss.bn.top.html" class="iframeBefore" frameborder="0" scrolling="no"></iframe =""><br />

<iframe = "" width="100%" height="178" src="https//www.rakuten.ne.jp/gold/SHOP-URL/ecstation/toolbox/slider_5048495711910511011610111449.html" class="iframeBefore" frameborder="0" scrolling="no"></iframe ="">


<iframe = "" width="100%" height="178" src="https//www.rakuten.ne.jp/gold/SHOP-URL/ecstation/toolbox/slider_1151121161111129897110110101114.html" frameborder="0" scrolling="no"></iframe ="">




<table width="100%" border="0">

<tr>
<td align="center"><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/" target="_blank"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/banr/imgrc0082574110.jpg" width="90%" border="0" /><br />
</a></td>
</tr>


<tr>
<td align="center"><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/" target="_blank"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/banr/imgrc0082574145.jpg" width="90%" border="0" />
<br />
</a></td>
</tr>

<tr>
<td align="center"><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/" target="_blank"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/banr/imgrc0078352110.jpg" width="90%" border="0" />
<br />
</a></td>
</tr>


<tr>
<td align="center"><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/" target="_blank"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/banr/imgrc0082574112.jpg" width="90%" border="0" />
<br />
</a></td>
</tr>
<tr>
<td align="center"><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/" target="_blank"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/banr/imgrc0082555184.jpg" width="90%" border="0" /><br />
</a></td>
</tr>

<tr>
<td align="center"><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/" target="_blank"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/banr/imgrc0082555183.jpg" width="90%" border="0" /><br />
</a></td>
</tr>

<tr>
<td align="center"><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/" target="_blank"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/banr/imgrc0082574115.jpg" width="90%" border="0" />

<br />
</a></td>
</tr>

<tr>
<td align="center"><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/" target="_blank"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/banr/imgrc0082574146.jpg" width="90%" border="0" /><br />
<br />
</a></td>
</tr>


<tr>
<td align="center"><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/" target="_blank"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/banr/imgrc0081794139.jpg" width="90%" border="0" />

<br />
</a></td>
</tr>

<tr>
<td align="center"><a href="https://search.rakuten.co.jp/search/mall/男の子/?sid=304622" target="_blank"><img src="https://image.rakuten.co.jp/SHOP-URL/cabinet/banr/imgrc0077760275.jpg" width="90%" border="0" /><br />
</a></td>
</tr>
</table>

・・・・・・・・・・

https//www.rakuten.ne.jp/gold/SHOP-URL/sptop.js  は以下を入れています。

jQuery(function($){
$('.iframeBefore').before($('#itemImageSlider'));
});

・・・・・・・・・・

崩れる前に行ったことは、
一番上の画像の入れ替えと、
sptop.js ファイルを間違ってアップしたことです。
(中身はさわっていません)

お手数をおかけしますが、
宜しくお願い致します。
キーワード:スマホのレイアウト
投稿内容について報告する




  • 返信者:非公開
  • 2019/09/27 17:53
ECマスターズの田中です。

sptop.js の内容を確認したところ、
記述が逆になっており、
iframeの前に商品画像を移動させる命令になっており………(省略)………
  • 返信者:非公開(質問者)
  • 2019/09/27 19:50
ありがとうございます!
ちゃんと直りました。………(省略)………