ポンパレモールトップページについて

Question

いつもお世話になっております。
当店のポンパレモールのトップページを確認して頂きたいのですが
大きい横長のバナーの下の小さなバナー横3個×縦4個の部分が間があいてしまい見た目が良くないです。
ホームページビルダーでタグを張り付けてみてうまく表示されますがポンパレモールでは間が変に開いてしまいます。
他にも変に間が開いてしまうところがあります。
あとサイドバーのカテゴリーの部分をグレーの薄い枠で囲みたいのですがうまく表示されません。
タグが間違えているのでしょうか？

ご確認をお願いたします。

Answer

ECマスターズの田中です。

＞当店のポンパレモールのトップページを確認して頂きたいのですが
＞大きい横長のバナーの下の小さなバナー横3個×縦4個の部分が間があいてしまい見た目が良くないです。

トップページを確認したところ、
横長バナーの下の横３個並んでいる部分には
バナーの上と下を開けるためのタグが入っており、
高さ７pxの画像を挟んでおり、
７pxの空間を空けるようにご設定いただいたと思うのですが、

このタグにはline-heightの指示がされていないため、
文章1行が占める高さとして
通常の高さ（私のChromeでは20pxでした）が設定されており、
結果、間隔が、7pxのはずが20px開く結果となっております。

対策としては、下記２つの方法が考えられます。

●ホームページビルダーにて、間隔を空けるための行を削除し、
　行の上を7ピクセル開けるよう設定する。
（ホームページビルダーは、バージョンによって画面の配置が異なるため、
　詳しいご案内が必要な場合は、バージョンをお知らせください）
●下記HTMLタグをヘッダーに挿入する。

====== この下の行から ============

#sectionShopContainer ~ table tr:nth-of-type(even) { line-height: 7px; } /* ３列バナーの間隔調整 */

====== この上の行まで ============
※HTMLの修正により配置が変わると、適用されなくなる可能性があります。


他の部分も同様に、文章1行が占める高さによる影響が考えられますので
一度、見直しを行っていただけますでしょうか。

＞サイドバーのカテゴリーの部分をグレーの薄い枠で囲みたいのですがうまく表示されません。

下記HTMLタグを、ヘッダーに挿入していただけますでしょうか。

====== この下の行から ============

#sectionShopSideBar table table { border: 1px solid rgba(128, 128, 128, 0.8) } /* サイドバーカテゴリ用枠線 */

====== この上の行まで ============
※HTMLの修正により配置が変わると、適用されなくなる可能性があります。

Answer

詳しい説明ありがとうございます。
早速やってみます。