楽天商品お気に入り登録ボタンの設置について

Question

お世話になっております。
セールページを作成し、とりあえず目玉商品のみお気に入り登録ボタンを設置してみたのですが、
登録データがありませんと表示されてしまいます。
https://www.rakuten.ne.jp/gold/○○○/sale/sale.html

目玉商品の見出し直下にある商品です。
https://my.bookmark.rakuten.co.jp/?func=reg&svid=106&shop_bid=2ショップID&iid=RAC番号下桁itype=1
という形式で入力しました。

Answer

ECマスターズの田中です。

RAC番号下桁　と　itype=1　の間に、半角記号の
&
が抜けておりましたので、追記をお願いいたします。

Answer

ありがとうございます。

https://copypet.jp/417/
で案内されている”■HOVERで囲みから塗り潰しに”を使用したくやってみたのですが、
の下に表示させたいのですが、
他のcssが適用されてしまい、表示が崩れてしまいます。表示が崩れることなく中心に表示させたいのですが、可能でしょうか?

Answer

ECマスターズの田中です。

> 表示が崩れることなく中心に表示させたいのですが、可能でしょうか?

はい、可能です。
「■HOVERで囲みから塗り潰しに」のために必要なのは、
・対象の要素に、変化にかかる時間（transition）
・対象の要素にマウスが当たった時（:hover）に変化させたい内容
以上２点の設定ですので、これらをスタイルシートでご設定ください。

今回、big-item-boxの背景色は、
#item-area .big-item-boxに対して設定されておりますので、
下記のようにスタイルシートを加えていただく形になります。

#item-area .big-item-box { transition: .4s; }
#item-area .big-item-box:hover { background: red; }

Answer

説明不足で申し訳ございません。
お気に入りに登録するのボタンをの下に置き、
「■HOVERで囲みから塗り潰しに」を適用させたいのです。
今の状況ですと、目玉アイテムの見出し画像の上に枠線が表示されており、
「お気に入りに登録する」のテキストのみ商品画像下に表示されてしまいます。

Answer

イメージです。###HR######IMG024c8a71041d9d833c508431a1f49e12a.jpegIMG0######BR###

Answer

ECマスターズの田中です。

> お気に入りに登録するのボタンをの下に置き、
> 「■HOVERで囲みから塗り潰しに」を適用させたいのです。

承知しました。
その場合、「big-item-box」「item-box」「item-box2」その他パーツが
float: left; によってレイアウトされておりますので、

現在の仕組みの中に導入する場合、
お気に入りボタンを「big-item-box」の中に入れて
管理していただく必要がございます。

中に入れた場合、
「#item-area .big-item-box a」の規則が適用されて
サイズがとても大きくなってしまいますので、
お気に入りボタンに適用する規則を、たとえば
「#item-area .big-item-box a.cp_btn」などとして
優先度を上げていただきますようお願いします。

さらに margin: 0 auto; プロパティを加えることで
big-item-box内で中央に表示させることができます。

また、big-item-boxの高さに
お気に入りボタンの高さを加えていただきますようお願いします。

Answer

ありがとうございました。無事表示できました。

何度も大変申し訳ないのですが、下記内容も教えてください。
お気に入り登録のテキストをボタンデザインの縦位置中央表示にしたいのですが、
vertical-alignを追加してもdisplay:block;のせいかうまく表示できません。

/*お気に入りボタンデザイン*/
#item-area .big-item-box a.cp_btn{
display: block;
width: 200px;
height:30px;
font-weight:bold;
padding: 0.8em;
vertical-align: middle;
text-align: center;
text-decoration: none;
background-color: #EC407A;
border: 2px solid #EC407A;
color:#ffffff;
border-radius: 3px;
transition: .4s;
margin:0 auto;
}

Answer

追記
スマホ表示では縦横中央に表示されていますが、pcでは上よりとなってしまいます。

Answer

ECマスターズの田中です。

> お気に入り登録のテキストをボタンデザインの縦位置中央表示にしたいのですが、
> vertical-alignを追加してもdisplay:block;のせいかうまく表示できません。

その場合、display:block; の代わりにFlexboxをご利用いただくと便利です。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

いただいた規則に含まれる
display:block;　を　display: flex;　にご変更いただいた上で、
justify-content: center;
align-items: center;
以上２つのプロパティを追加してみてください。

Answer

出来ました。本当にありがとうございました。

楽天 商品お気に入り登録ボタンの設置について

楽天商品お気に入り登録ボタンの設置について