• 文字サイズ


解決済

PCレイアウト崩れの修正方法について

  • 相談者:非公開
  • 2018/04/11 13:10
お世話になっております。

商品画像を良い物の修正しているのですが、
以前に指摘していただいたPCのレイアウト
崩れが多く見受けられます。

前任者が設定したのでしょうが、以下の
ようなHTMLが多数入っており、どう修正
すればいいかアドバイスいただきたいです。

(こちらは末尾10000078の商品ページです)
↓↓↓
<div class='em2spwrp'><style><!--.em2spwrp div,.em2spwrp img,.em2spwrp table,.em2spwrp tr,.em2spwrp td{width:auto;height:auto;padding:0;margin:0;overflow:hidden}.em2spwrp td{float:none !important}.em2spwrp,.em2spwrp div,.em2spwrp div h3,.em2spwrp div p{display:block}.em2spwrp div table{display:table;width:auto;height:auto;padding:0;margin:0;border-spacing:0}.em2spwrp div table tr,.em2spwrp div table tbody tr{display:table-row}.em2spwrp div table tr td,.em2spwrp div table tbody tr td{display:table-cell;float:none !important;vertical-align:top}.em2spwrp table table{width:100%}.em2spwrp,.em2spwrp th,.em2spwrp td{color:#000000;font-size:16px !important;font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',メイリオ,Meiryo,Osaka,'MS Pゴシック','MS PGothic',sans-serif;text-align:center}.em2spwrp div h3,.em2spwrp div p,.em2spwrp strong{word-wrap:break-word;word-break:break-all;padding:0;margin-top:0.5em;margin-bottom:0.5em;line-height:1.4;text-align:left;overflow:visible}.em2spwrp div h3,.em2spwrp strong{font-size:117%;}.em2spim{vertical-align:top}.em2spwrp div.em2spim{margin-left:auto;margin-right:auto;text-align:center}.em2spwrp p.em2spim{text-align:center}.em2spwrp div img,.em2spwrp div a img{border:none;vertical-align:bottom}.em2spwrp div,.em2spwrp table {height:auto}.em2spwrp div{overflow:hidden}.em2spwrp div div{overflow:visible}.em2spwrp > div:after,.em2spwrp > table:after {content:"";display:block;height:0;clear:both;visibility:hidden}.em2spwrp{width:710px;height:auto;background:#ffffff;margin-left:auto;margin-right:auto;padding:0}#em2spb0{background:transparent;padding:5px}#em2spb0 table{border-spacing:10px;margin:-10px;width:720px}#em2spc0{width:698px;background:transparent;border:solid #00ffff 1px;padding:0}#em2spc0 .em2spim{width:188px;height:250px}#em2spb1,#em2spb2{background:transparent;padding:5px 0 5px 5px}#em2spb1 table,#em2spb2 table{border-spacing:10px;margin:-10px;width:725px}#em2spc1,#em2spc2{width:705px;background:transparent;border:solid #000000 0;padding:0}.em2spim{width:100%;height:auto}#em2spb3,#em2spb4,#em2spb5,#em2spb6,#em2spb7{background:transparent;padding:5px 0}#em2spb3 table,#em2spb4 table,#em2spb5 table,#em2spb6 table{border-spacing:10px;margin:-10px;width:730px}#em2spc3,#em2spc4,#em2spc7,#em2spc8{width:710px;background:transparent;border:solid #000000 0;padding:0}#em2spc3 .em2spim{width:600px;height:200px}#em2spc5,#em2spc6{width:350px;background:transparent;border:solid #000000 0;padding:0}#em2spc5{margin-right:10px}#em2spc5 .em2spim,#em2spc6 .em2spim{width:300px;height:230px}#em2spb7 table{width:730px}#em2spc8 .em2spim{width:300px;height:220px}#em2spc8 table{margin:-10px;border-spacing:10px}--></style><!--[if gte IE 6.0]><style>.em2spwrp,.em2spwrp div,.em2spwrp h3,.em2spwrp p,.em2spwrp th,.em2spwrp td{zoom:1}.em2spwrp,.em2spwrp th,.em2spwrp td{font-size:16px !important}.em2spwrp{width:710px}#em2spc0{width:700px}#em2spc1,#em2spc2{width:705px}#em2spc3,#em2spc4,#em2spc7,#em2spc8{width:710px}#em2spc5,#em2spc6{width:350px}</style><![endif]-->
キーワード:PCレイアウト崩れ
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2018/04/11 15:12
ECマスターズの田辺です。

商品説明文の記述ですね。
こちらの大きさが710pxであることで
全体的に横に広がっておりますので、
スケッチページで新………(省略)………
  • 返信者:非公開(質問者)
  • 2018/04/11 18:12
田辺さん、ありがとうございます。

450pxにするために450pxより大きい数値をすべて
450pxにするのではダメでしょうか?

HTML文が長す………(省略)………
  • 返信者:非公開
  • 2018/04/12 12:14
ECマスターズの田中です。

>450pxにするために450pxより大きい数値をすべて
>450pxにするのではダメでしょうか?
たとえば、末尾1000………(省略)………
  • 返信者:非公開(質問者)
  • 2018/04/12 14:14
田中さん、ありがとうございます。

確かに450pxに制限すると、ぐしゃっと
なってしまいますね。

一時的に画像サイズを小さくして影響を
小さくし………(省略)………
  • 返信者:非公開(質問者)
  • 2018/04/12 14:26
解決済みとしていながら、再度お聞きしますm(_ _)m

末尾が10000036のケースではきれいに表示されています。

一方で10000078の場合は………(省略)………
  • 返信者:非公開(質問者)
  • 2018/04/12 14:46
お世話になっております。

分かりました!

商品レイアウトの設定が「テンプレートA」
になっていたのが原因でした。

「テンプレートE」に修正す………(省略)………
このフォーラムへの質問は終了しました