楽天商品ページのレイアウト崩れは画像の「max-width:100%」が原因かも!?

乗組員的EC探査録

こんにちは。ロケッツ4号機です。
6月。早くもうだるような暑さ。
ところで「うだる」ってどういう意味なんでしょう?

さて、今回は楽天のレイアウト崩れについてです。
コーディングをしていると、どういうわけか遭遇する「レイアウトの崩れ」。
特に楽天市場などの場合、楽天側が設定する既存スタイルシートとの競合が発生し、思わぬレイアウト崩れに見舞われることも。

今回はとくに楽天の「商品ページ」における、imgタグへの「max-width:100%」が引き起こすレイアウト崩れの原因と、その一例をご紹介します。
レフトナビとコンテンツの隙間が詰まっていたり、商品画像のサイズが小さくなる等の崩れが見られる場合、それは「max-width」の指定が原因かもしれません。

■なぜレイアウトが崩れてしまったのか

「楽天の商品ページレイアウトが崩れているけれど、原因がわからない」
そんな時、思い出して欲しいのが「リセットCSSを設置したかどうか」です。
リセットCSSとは、普通ブラウザ間のスタイルの相違を慣らすために使用するCSSファイルとして用いられるものです。たとえば楽天の場合、商品ページをオシャレにカスタマイズするたRMSの「ヘッダー・フッター・レフトナビ」に、GOLDからCSSファイルを読み込むケースがあります。そのCSSファイルに、リセット系のファイル、ないし記述があれば要注意!さらにimgタグの「max-width:100%」の記述をしていたなら、レイアウト崩れの原因はそれである可能性が大です。

そもそも、imgタグへの「max-width:100%」指定はおもにレスポンシブデザイン向けのCSSです。しかし楽天商品ページの場合、パソコンで閲覧するページのソースコードと、スマーフォトンでのソースコードはそれぞれ個別となっているため、レスポンシブを意識する必要はほとんどないと言って良いでしょう。
ではなぜ「max-width:100%」としてしまったのか。その原因はおそらく「楽天ではない」ウェブサイト、もしくはセール用ページなどの「GOLD内で完結するページ」をコーディングする際に使用していたリセットCSSを、そのまま「商品ページ用」のCSSとして再利用してしまったことにあるはずです。・・・心当たりはありませんか?
そのため、imgタグへの「max-width:100%」が指定されたままになっているのです。ともあれ、楽天の商品ページにimgタグへの「max-width:100%」は「異物」です。極力削除するようにしましょう。

それでは以下に、imgタグへの「max-width:100%」が引き起こすレイアウト崩れの一例をご紹介します。

■レフトナビとコンテンツの隙間が詰まっている

imgタグに「max-width:100%」がかかっている場合、商品ページ「レフトナビ」と、その右側のコンテンツ部分との隙間が詰まってしまう崩れが生じます。

通常の楽天商品ページは、この図のように隙間(赤枠)が空いています。

しかしimgタグへの「max-width:100%」の場合、このようになります。

赤枠で表示したレフトナビとコンテンツ間の隙間が詰まってしまっています。
実は、隙間の部分には縦横1pxの透過画像(t.gif)がimgタグで設置されており、そのimgタグに「width=”20″」が指定されています。しかし「max-width:100%」を指定すると元々imgタグにかかっていた標準のスタイルよりもmax-widthが優先されてしまうためレイアウト崩れの原因となります。

■商品画像(サムネイル)のサイズが小さくなる

商品画像(サムネイル)とはRMSの「商品ページ設定」>「商品画像(1)〜(20)」で登録する画像です。
こちらもimgタグに「max-width:100%」がかかっていると、画像が極端に小さくなってしまう崩れが発生してしまいます。

通常はこのようなレイアウトになっているはずです。

imgタグへの「max-width:100%」指定だと、このようになります。

ページにより若干の差異はあるでしょうが、おそらく商品画像が通常に比べて小さく表示されてしまい、またここでも左右コンテンツ間の隙間が詰まってしまうといった崩れが生じるはずです。
元々、商品画像は楽天側で縦横250ピクセルと表示を定めているのですが(画像ファイル末尾のプロパティ「?downsize=250:*」)、この場合も先と同様「max-width:100%」が優先されることで、標準のサイズ指定を上書いてしまうために生じてしまいます。

では、これらを解決する方法を次に記載します。
・・・もうお判りかとおもいますが、いちおう。

■解決法

では、どうすればよいのか。
答えは簡単です。

とにかく、imgタグへの「max-width:100%」を削除しましょう。

ただし、何らかの理由でどうしてもメインコンテンツ(PC用販売説明文)の画像を「max-width:100%」で指定したいのであれば・・・

#pagebody span.sale_desc img{
  max-width:100%;
}

こののように「PC用販売説明文」の親要素「span.sale_desc」内のimgタグにのみ指定するようにしましょう。

■さいごに

いかがでしたか?
楽天商品ページのレイアウト崩れは、こちら側で設置したスタイルシート、もしくはタグのミスが原因であることがほとんどです。
特にリセットCSSはimgのみならずdivタグやbodyタグなどに直接スタイルを指定するもののために、レイアウト崩れの大きな要因となってしまいます。
「なんか商品ページのレイアウト崩れてない?」と感じたら、いちどリセット系のCSSを見直してみましょう。
きっと原因はそこにあるはずです。

ECの運営でお悩みの方!ロケッツに「ほぼ丸投げ」してみませんか?

ECサイトのコンサル・制作・運用業務に10年以上携わっているチームが、最短の成功法則を多角的に提案・実行・検証まで一貫して行います。
今後さらに拡大し、兆規模になっていくEC市場。
現在その中心にある大手ECモールの最新ノウハウと実行方法を熟知しており、常に最善のEC運営を実現していきます!

乗組員的EC探査録
シェアする
コンサルロケッツステーション
タイトルとURLをコピーしました