PC のお買い物かご周りにつきまして。

Question

いつも大変お世話になっております。

この度、楽天市場の PC ページにてお買い物かごのカスタマイズをしております。

その際に気になったのが画像の様にお問い合わせとレビューを書く部分商品に空白が出来てしまい、その空白を詰める方法を調べたのですが出て来ず、苦戦しております。

他店様のように空白を適度に詰めたいと思っておりますが、可能でしょうか。

また、レビューを書く部分のバナーを変えましたが、その部分だけマウスオーバーで透過せず、同様にマウスオーバーで透過させたい場合には CSS にどのように処理を加えれば良いでしょうか？

お手数をお掛け致しますが、ご回答の程お願い申し上げます。

以下、その部分の CSS となります。



td.favorite::before {
    display: block;
    content: "";
    width: 490px;
    height: 200px;
    background: url(弊社画像) left bottom no-repeat;
}

body div.bookmarkArea {
padding-left: 0 !important;
}

body div.bkm{
width: 242px !important;
height: 90px !important;
padding-right: 5px !important;
}

body div.bookmarkArea div.bkm a.addBkm span.bkmStar {
display:inline-block !important;
width: 242px !important;
height: 80px !important;
background: url("弊社画像") no-repeat !important;
}

#rakutenLimitedId_aroundCart div.bkm {
float: left;
padding-bottom: 0 !important;
}

.bookmarkArea .bkm:hover {
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
-moz-opacity: 0.50;
}

#rakutenLimitedId_aroundCart div.shopBkm {
float: left;
}

body #rakutenLimitedId_aroundCart div.shopBkm {
width: 242px !important;
height: 90px !important;
padding-left: 5px !important;
}

body div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
display:inline-block !important;
width: 242px !important;
height: 80px !important;
background: url("弊社画像") no-repeat !important;
}

#rakutenLimitedId_aroundCart font input {
width: 490px !important;
height: 55px !important;
background: url("弊社画像") no-repeat !important;
overflow:hidden;
border-width: 0px;
cursor: pointer;
display:block;
text-indent:150%;
margin: 0 !important;
}

body #rakutenLimitedId_aroundCart button.rAskBtn {
width: 490px !important;
height: 55px !important;
background: url("弊社画像") no-repeat !important;
overflow:hidden !important;
border-width: 0px !important;
cursor: pointer !important;
display:block !important;
text-indent:-9999px !important;
margin: 0 !important;
}





/* 「レビューを書く」のリンクを独自画像に */
#rakutenLimitedId_aroundCart #serviceTableSml .review a.write{
    text-indent:-9999px;
    padding:0!important;
    display:block;
    width:490px!important;
    height:340px!important;
    background:url(弊社画像) no-repeat 0 0!important;
}

###HR######IMG02a2b679ccb7015b7492323b58a8a48a8.jpegIMG0###

Answer

ECマスターズの土屋です。

>その際に気になったのが画像の様にお問い合わせとレビューを書く部分商品に空白が出来てしまい、その空白を詰める方法を調べたのですが出て来ず、苦戦しております。

こちらに関しまして、
頂いたキャプチャの隙間を埋める為に
下記のCSSをヘッダー・フッター・レフトナビに追加して頂き
動作の確認をして頂いてもよろしいでしょうか。

#rakutenLimitedId_aroundCart #serviceTableSml td {
    height: 0 !important;
}

>また、レビューを書く部分のバナーを変えましたが、
>その部分だけマウスオーバーで透過せず、
>同様にマウスオーバーで透過させたい場合には 
>CSS にどのように処理を加えれば良いでしょうか？

こちらに関しましても
レビューのバナーを透過したい場合に関しましては、
下記の様にCSSを指定して頂けますと
透過することが可能です。

また、
opacityの値で透過の値を調整
することができますので、
任意の数値で動作の確認をお願いいたします。

#rakutenLimitedId_aroundCart #serviceTableSml .review:hover {
    opacity: 0.8;
}

Answer

お忙しい中、ご対応有難うございます。
動作確認も取れました。
因みになのですが、お問い合わせバナー部分のマウスオーバーによる透過値の変更も↑とは別に CSS で書き込む必要がありますでしょうか？
お手数をお掛け致しますが、ご回答の程お願い申し上げます。

Answer

ECマスターズの土屋です。

>因みになのですが、お問い合わせバナー部分のマウスオーバーによる透過値の変更も↑とは別に CSS で書き込む必要がありますでしょうか？
>お手数をお掛け致しますが、ご回答の程お願い申し上げます。

こちらに関しましては、
別途CSSの記述は必要ございません。

先程お伝えした、CSSのopacityの値を変更して頂けますと
透過度を変更することが可能です。

Answer

お忙しい中、ご対応有難うございます。

何れも確認・作動出来ました。

また何かあれば質問させて頂きます。

今後とも宜しくお願い申し上げます。