お買い物かご近へ表示する画像とリンクのタグについて

Question

楽天のお買い物かご近くの「お気に入り商品を登録する」と「お気に入りショップへ登録する」の画像の間に

「送料無料商品と同梱するとすべて送料無料となります。」の画像とリンク先を下記のCSSに追記したいのですがどのように追記したらいいのかわからないので教えてください。

「送料無料商品と同梱するとすべて送料無料となります」の画像URL
http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/doukonmuryou.gif

画像のクリック先のURL
http://item.rakuten.co.jp/huusuikazan/c/0000000710/


共通説明文（大）に記入されているCSSは下記になります。
--------------------------------------------------



/* お気に入り商品差し替えタグ */
#rakutenLimitedId_aroundCart #serviceTableSml td.favorite {
padding-top: 5px;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm {
width: 250px !important;
height:280px !important;
padding: 0px 0px 10px 0px !important;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm a.addBkm {
width: 250px !important;
height:280px !important;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm a.addBkm span.bkmStar {
display: inline-block !important;
width: 250px !important;
height:280px !important;
margin:0px 0px 10px 0px !important;
background: url("http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/bookmark.gif") no-repeat !important;
}

/* お気に入りショップ差し替えタグ */
div.bookmarkArea {
width: 250px !important;
}
#rakutenLimitedId_aroundCart div.shopBookmarkArea div.shopBkm {
width: 250px !important;
height:80px !important;
padding: 0px 0px !important;
padding-left: 0px !important;
}
#rakutenLimitedId_aroundCart div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
display: inline-block !important;
width: 250px !important;
height:80px !important;
margin-right: 0px !important;
background: url("http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/okiniirishopbana.gif") no-repeat !important;
}




.inventory font{
font-size:70% !important;
color:#999 !important;
}



input[value="買い物かごに入れる"]{

font-size:16px;
font-family:Arial;
font-weight:normal;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #d83526;
padding:9px 18px;
text-decoration:none;
        
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );
       background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );

background-color:#fe1a00;
color:#ffffff;
display:inline-block;
text-shadow:1px 1px 0px #b23e35;
  box-shadow:inset 1px 1px 0px 0px #f29c93;
}

iframe.reserve_caution{
height:850px;
width:598px;
border:1px solid #999999;
margin-top:20px;



-----------------------------------

よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

リンク付きのバナーを追加する場合、
CSSだけでは対応できず、
HTMLにてタグを追記する必要がありますが、
その際、ご注意いただきたい内容があります。

買い物かご周辺に直接
HTMLを記入することはできないため、
各PC用商品説明文の一番左上にタグを設置し、
それを上に◯ピクセル、右に◯ピクセルという形で
数字を指定して移動させる形になります。

その為、説明文の上に表示される
あす楽の説明があるかないかで
移動させる量が変わります。

また、テンプレートごとに、買い物かごと商品説明文の
位置関係が変わりますので、
テンプレートを複数ご利用の場合はご注意ください。

また、Windows・Mac・スマートフォン・タブレット等、
お客様がページを見る方法が変わると、
文字列の高さの違いなどにより
位置に若干のズレが発生いたしますので
ご注意ください。

以上の内容をご承知いただいた上で
バナーを追加する際は、
まず初めに、表示させる商品（全商品に表示させる場合は全商品）の
PC用商品説明文の先頭に、
下記のHTMLタグを記載してください。


===== この下の行から ================

===== この上の行まで ================


次に、共通説明文（大）に入っているタグの内側に、
以下の通り、スタイルシートの指定をお願いします。


===== この下の行から ================
/* 「同梱ですべて送料無料」バナーをかご周辺に設置 */
#postagefreebanner {
position: relative;
display: block;
background: url(http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/doukonmuryou.gif);
width: 250px; /* 画像の横幅 */
height: 270px; /* 画像の縦幅 */
top: -556px; /* 上に◯ピクセル移動 */
left: 0px; /* 右に◯ピクセル移動 */
z-index: 10000;
margin-bottom: -270px;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm {
margin-bottom: 270px !important; /* 「お気に入り商品登録」バナーの下に空間を作る */
}
===== この上の行まで ================
※CSS内の各数値は、様々な環境でページをご確認の上、調整をお願いいたします。

Answer

ありがとうございます。
上記のCSSを挿入してみました。同梱ですべて送料無料のバナーの位置はちょうどいいのですが、どうしても、お気に入りショップへ登録するボタンの上に空白ができてしまいます。
↓
http://item.rakuten.co.jp/huusuikazan/zz01-0768/

空白ができないようにするためにどこへｃｓｓの修正をしたらいいのかわからないのでおしえてください。


共通説明文（大）に入っているタグは下記になります。
-------------------------------------------------


/* お気に入り商品差し替えタグ */
#rakutenLimitedId_aroundCart #serviceTableSml td.favorite {
padding-top: 5px;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm {
width: 250px !important;
height:280px !important;
padding: 0px 0px 10px 0px !important;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm a.addBkm {
width: 250px !important;
height:280px !important;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm a.addBkm span.bkmStar {
display: inline-block !important;
width: 250px !important;
height:280px !important;
margin:0px 0px 10px 0px !important;
background: url("http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/bookmark.gif") no-repeat !important;
}


/* 「同梱ですべて送料無料」バナーをかご周辺に設置 */
#postagefreebanner {
position: relative;
display: block;
background: url(http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/201601doukon.gif);
width: 250px; /* 画像の横幅 */
height: 90px; /* 画像の縦幅 */
top: -556px; /* 上に◯ピクセル移動 */
left: 0px; /* 右に◯ピクセル移動 */
z-index: 10000;
margin-bottom: -270px;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm {
margin-bottom: 270px !important; /* 「お気に入り商品登録」バナーの下に空間を作る */
}



/* お気に入りショップ差し替えタグ */
div.bookmarkArea {
width: 250px !important;
}
#rakutenLimitedId_aroundCart div.shopBookmarkArea div.shopBkm {
width: 250px !important;
height:80px !important;
padding: 0px 0px !important;
padding-left: 0px !important;
}
#rakutenLimitedId_aroundCart div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
display: inline-block !important;
width: 250px !important;
height:80px !important;
margin-right: 0px !important;
background: url("http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/okiniirishopbana.gif") no-repeat !important;
}




.inventory font{
font-size:70% !important;
color:#999 !important;
}



input[value="買い物かごに入れる"]{

font-size:16px;
font-family:Arial;
font-weight:normal;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #d83526;
padding:9px 18px;
text-decoration:none;
        
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );
       background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );

background-color:#fe1a00;
color:#ffffff;
display:inline-block;
text-shadow:1px 1px 0px #b23e35;
  box-shadow:inset 1px 1px 0px 0px #f29c93;
}

iframe.reserve_caution{
height:850px;
width:598px;
border:1px solid #999999;
margin-top:20px;


-----------------------------


よろしくおねがいいたします。

Answer

ECマスターズの田中です。

最初にいただいた
http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/doukonmuryou.gif
上記URLのバナーと、今回使われている
http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/201601doukon.gif
上記URLのバナーにおいて、高さの差が180pxありますので、

挿入していただいたCSSに含まれる、
margin-bottom: 270px !important; /* 「お気に入り商品登録」バナーの下に空間を作る */
の値をバナーの高さに合わせていただき、
top: -556px; /* 上に◯ピクセル移動 */
の値を、合わせる過程で変化させた分だけ修正してください。

今回の場合はそれぞれ、

margin-bottom: 90px !important; /* 「お気に入り商品登録」バナーの下に空間を作る */

top: -376px; /* 上に◯ピクセル移動 */

のようにご変更ください。

Answer

ありがとうございました。
ギフトバナーの位置がブラウザーによって変わるので只今位置を修正中です。わからないことがあったらまた連絡します。