楽天RMSでレフトナビと商品情報の間に大きく隙間があいたときの対処法

先日の勉強会で、一つ「おまけ」を用意。

以前、自分が楽天のページ制作で、
RMSを使ってデザイン設定したとき
どうしてもレフトナビと登録した商品情報の間に、
大きな隙間ができて困ったことがありました。

その解決策がなかなか見つからず、
いろいろ調べてやっと行き着いたのが結局は楽天のFAQだったわけですが、
楽天のショップさんをみていると同じような状況を結構見かけます。
知らない方が多いのかなと思うのでご紹介しておきます。


■楽天RMSの R-Storefrontには推奨値がある

 楽天RMSのR-Storefront でページを作成するには下記のような推奨値があるようです。

看板（RMSの看板機能）…800ピクセル  ヘッダー及びフッター …780ピクセル  レフトナビ          …150ピクセル  商品情報部分        …590ピクセル
R-Storefront デザイン設定で、ヘッダーコンテンツエリアに ヘッダーの画像を差し込む場合には、780px以下にすると崩れにくいようです。 とはいっても、最近ではこの推奨値以上で制作することも多いのでは？ その場合は、下記の方法を試してみてください。 ■共通説明文(大）に計算した数字を入れたtableタグを入れる。 <table width="★★">  <tbody> <tr>  <td>---文章を入れる場合はここに---</td>  </tr>  </tbody> </table> ★★には、以下の計算をした数字を入れます。 ヘッダーの幅　－　レフトナビの幅　－　40　＝　★★ ≪例1≫　ヘッダーの幅が850ピクセル、レフトナビの幅が150ピクセルの場合 850　－　150　－　40　＝　660 ≪例２≫　ヘッダーの幅が780ピクセル、レフトナビの幅が160ピクセルの場合 780　－　160　－　40　＝　580 同じ現象に悩んでいる方はぜひお試しください。