項目選択肢（PC）について（デザインレシピ）

Question

ECマスターズ　メニューにある　デザインレシピにて
お気に入りボタンを好きな画像で表示させる方法（PC）を見直そうと思い確認していたところ
（お気に入りボタンの設置は問題なくできております。ありがとうございます。）

お気に入り画像の参考ページを確認したところ下記のお店に気になるデザインがありました。

項目選択肢　が文字だけでなく　枠などが設置されてとても見やすくデザインされてました。

https://item.rakuten.co.jp/low-ya/vg-romeo/

1，上記のページにあるような、デザインをする方法を教えてください。

よろしくどうぞ。

Answer

ECマスターズの田中です。

> 1，上記のページにあるような、デザインをする方法を教えてください。

https://www.rakuten.ne.jp/gold/low-ya/css/cartBox.css
上記CSSファイルの21〜32行目、
span.choice　への規則によってデザインされておりますので、

この記述をとで囲み、
ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）に
ご記載いただくことで、同様にデザインをすることができます。

スタイルシートの規則に含まれる値を
ご変更いただくことで、自由にデザインを調整することができますので、
http://www.htmq.com/style/
上記ページをご参考の上、各行の意味をご確認いただきながら、
ぜひカスタマイズをお試しください。

Answer

システム担当の田中　様

返信ありがとうございます。
急ぎではありませんので下記質問はついでの時にお願いします。

質問を解決済みにしましたが、ここにまとめたほうが良いのではないかと思い記載します。


１、追加で　レビューを書く　文字も画像に変換する方法を教えてください。

参考サイトはお気に入り画像の参考に記載があるサイトです。
https://item.rakuten.co.jp/zip/13801/

よろしくお願いいたします。

Answer

ECマスターズの田辺です。

参考サイトのように
「レビューを書く」を画像に変換させる場合、
以下の記述を
との間にご追加くださいませ。

＝この下から＝＝＝＝＝＝＝＝
#rakutenLimitedId_aroundCart #serviceTableSml .review a.write {  
display: inline-block !important;  
width: 画像の横幅 !important; 
height: 画像の高さ !important; 
background: url(画像URL) no-repeat; 
overflow: hidden; 
text-indent: 120%; 
white-space: nowrap;
}
＝この上まで＝＝＝＝＝＝＝＝

※画像の横幅、高さ、URLは実際の英数字にご変更ください。

Answer

ECマスターズ　田辺　様

ご返信ありがとうございました。
早速登録してみました。

問題なく表示されました。
ありがとうございました。