楽天GOLD 特集ページの表示崩れとマウスオーバーの動作について

Question

お世話になっております。

父の日に向けて下記ページを作成しています。
https://www.rakuten.ne.jp/gold/yamaguchi-seni/sale/gift-feature.html

父の日ランキングの部分をPCトップページよりコピペで持ってきて、修正しているのですがバランスよく配置できません。（トップページのランキングコンテンツのように余白も含め左右対称にしたい）
また、別の要素に当てたプロパティがmainCont全体にあたってしまい、マウスオーバーによる透過がかかってしまいます。これを画像及びテキストの範囲のみに絞りたいのですが可能でしょうか。

Answer

ECマスターズの田中です。

> トップページのランキングコンテンツのように余白も含め左右対称にしたい

バランスよく配置できないのは、
スタイルシートの設定がトップページと異なることが原因です。
gift-feature.htmlの設定に合わせて、
各商品用のタグの横幅、つまり
https://www.rakuten.ne.jp/gold/yamaguchi-seni/sale/css/gift-feature-content.css
に設定されている #ranking li の widthプロパティの値を
160px→156pxに縮めていただくことで、
左右対称に配置していただくことができます。

万が一、「gift-feature-content.css」を他のページでも読み込んでいる場合、
そちらのページにも影響を及ぼすのでご注意ください。

> 別の要素に当てたプロパティがmainCont全体にあたってしまい、マウスオーバーによる透過がかかってしまいます。これを画像及びテキストの範囲のみに絞りたいのですが可能でしょうか。 

内にあるdivタグすべてに対して
規則が設定されていることが原因です。
取り急ぎ回避するのであれば、たとえば
 と、それに対応する  を
 と  のように、
pタグなど、別のタグにご変更いただければ、ご希望どおりの動作が可能となります。

Answer

ご回答いただきましてありがとうございました。
無事解決いたしました。