スマホ表示崩れ

Question

お世話になっております。
スマホ商品ページから他の商品へのリンクで表示が崩れてしまいます。
使ってはいけないタグなどを使っているからでしょうか？
少し前はサムネイルが表示されないこともありました（今これは解決しています）

このページの下の方にある他商品へのリンク全てで崩れてしまい、URLの直打ちでは問題はないという状況です。アドバイスいただけると助かります。
https://item.rakuten.co.jp/beauty-phoenix/pemaangel-soap/?force-site=ipn

どうぞよろしくお願いいたします。

Answer

ECマスターズの田辺です。

＞スマホ商品ページから他の商品へのリンクで表示が崩れてしまいます。

確認させていただいたところ、
他の商品へのリンクを設定しているとの間で
リンク先を開いてしまっている状況でした。

デザインレシピの■iframeで解説しているように
を一つのページとして認識しているため、
リンクした後にそのページ内だけで切り替ってしまうことがあります。
https://club.ec-masters.net/index.php?design_tags#iframe

そのため、で読み込んでいる元のページにある
との中に
を
記入していただくことで、
通常のリンク状態になりますのでお試しくださいませ。

Answer

田辺さま

アドバイスありがとうございます。
リンクを経由しての商品ページの崩れは直りました！！
助かりました。

ちなみに、
>少し前はサムネイルが表示されないこともありました（今これは解決しています）
解決していませんでした。
やはり商品サムネイルが表示されないことがあります。
何か商品ページのタグが影響しているのでしょうか？

Answer

ECマスターズの田中です。

私にて確認したところ、
タグの高さを自動調整するための外部JavaScriptファイル、
iframeResizer.contentWindow.min.jsを設置していない
（楽天のシステムによって自動的に挿入されたものなど）に対して
リサイズを行おうとして、JavaScriptエラーを起こした結果
サムネイルの表示処理が止まっていることがわかりました。

対象のタグを絞って、リサイズを行っていただけますでしょうか。

具体的な方法ですが、
スマートフォン用商品説明文に含まれるタグの中身、
 jQuery(function($){ $('iframe').iFrameResize(); });
を、
 jQuery(function($){ $('#itemDescription iframe, #shopCommonText iframe').iFrameResize(); });
このように修正していただき、
動作をご確認いただきますようお願いいたします。

Answer

田中さま

アドバイスありがとうございます。
完全に直りました！
本当に助かります。
ありがとうございました。