商品ページの画像の大きさや商品情報の編集

Question

お世話になっております。

https://item.rakuten.co.jp/nopnop/sho-babybed/
https://item.rakuten.co.jp/platina-shop/10040827/
こちらのショップ様方のように商品情報横の写真の大きさまた、「商品をかごに追加」ボタン等を大きくしたり、レビューやお問い合わせバナーの変更、表示？、バリエーションの表の色を変えたりなどしたいのですがどこで編集？変更したらよいのかわからず質問させていただきました。

まとめての質問、言葉足らずなとこもあるかもしれませんがご教授お願いいたします。###HR######IMG0161b10cd5ac88a93a91757de2668b8ae.jpegIMG0### ###IMG18c7968c08d35739923117fd1c75c31b1.jpegIMG1### ###IMG2aec9f818541e2339f8bfef5b106e072e.jpegIMG2###

Accepted Answer

ECマスターズの伊藤です。

ご連絡いただきありがとうございます。

> （1）・「商品レビューを見る」ボタンのデザイン
> （1）・「お気に入り商品」ボタンのデザイン
> （1）・「お気に入りショップ」ボタンのデザイン
> （1）・「商品についての問合わせ」ボタンのデザイン

上記すべてのボタンを画像への変更を
ご希望とのことで承知いたしました。

ボタンの画像に付いてですが、
対象の店舗のものを利用す等はお控えいただき、
ご自身で作成いただくようになります。


下記のを、
・商品共通説明文
・PC用商品説明文
・商品に適用している、ヘッダー・フッター・レフトナビ
いずれかにご登録をお願いいたします。

ボタンについては、【画像URL】、【画像高さ】、【画像幅】を、
画像に合わせて修正をお願いします。

項目選択肢については、
濃い茶色部分
#958475
薄い茶色部分
#fdeecd
文字色（白）
#ffffff
となっておりますので、
ご希望の色に変更をお願いします。

色については、下記URLをご参照ください。
https://www.colordic.org/



/* 商品レビュー */
#rakutenLimitedId_aroundCart .seeReview {
    background: #fff url(【画像URL】) no-repeat !important;
    border: none!important;
    text-indent: -9999px;
    width: 【画像幅】px;
    height: 【画像高さ】px;
    margin-bottom: -10px ;
}

/* 商品をお気に入り登録 */
.bookmarkArea .bkm a.addBkm span.bkmStar {
    background-image: url(【画像URL】)!important;
    width: 【画像幅】px!important;
    height: 【画像高さ】px!important;
}
.bookmarkArea .bkm a.addBkm {
   height: 80px!important;
}

/* レビューを書く */
#rakutenLimitedId_aroundCart #serviceTableSml .review a.write {
  display: block !important;
  width: 302px !important;
  line-height: 2 !important;
  font-size: 16px !important;
  border: 2px solid #c36 !important;
  padding: 3px 0 0 !important;
  margin-bottom: 10px !important;
  color: #a11 !important;
  text-indent: 2em !important;
  font-weight: bold !important;
  cursor:pointer !important;
  background-position: 10px center !important;
  border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
}


/* 商品についてのお問い合わせ */
#rakutenLimitedId_aroundCart button.rAskBtn {
    text-indent: -9999px;
    border: none!important;
    background-image: url(【画像URL】)!important;
    background-position:top center !important;
    width: 【画像幅】px;
    height: 【画像高さ】px!important;
}

/* お気に入りショップに登録 */
.shopBookmarkArea .shopBkm a.addShopBkm {
    height: 【画像高さ】px!important;
}
.shopBookmarkArea .shopBkm a.addShopBkm span.shopBkmStar {
    background: url(【画像URL】)!important;
    width: 【画像幅】px!important;
    height: 【画像高さ】px!important;
    margin-bottom: -10px ;
}

#rakutenLimitedId_aroundCart div.bkm,
#rakutenLimitedId_aroundCart div.bkm ,
#rakutenLimitedId_aroundCart div.shopBkm {
    float: initial;
}

/* 項目選択肢別在庫の色 */
#rakutenLimitedId_aroundCart table[bgcolor="#CCCCCC"]{
	font-family:ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,sans-serif;
	background:#FFF;
}

#rakutenLimitedId_aroundCart table[bgcolor="#CCCCCC"] td.inventory_choice_name {
	background:#958475;
	padding:10px 5px;
}

#rakutenLimitedId_aroundCart table[bgcolor="#CCCCCC"] span.inventory_choice_name {
	color:#FFF;
	font-size:13px;
	letter-spacing:1px;
	font-family:ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,sans-serif;
}

#rakutenLimitedId_aroundCart table[bgcolor="#CCCCCC"] td.inventory{
	background:#fdeecd;
	padding:10px 5px!important;
}

#rakutenLimitedId_aroundCart table[bgcolor="#CCCCCC"] td.inventory font{
	font-size:13px;
}

Answer

ECマスターズの田中です。

> 商品情報横の写真の大きさ

「商品画像サイズの設定」画面にてご設定願います。
https://navi-manual.faq.rakuten.net/design/000038869

> 「商品をかごに追加」ボタン等を大きく
> レビューやお問い合わせバナーの変更、表示？
> バリエーションの表の色を変えたり

「お気に入り商品」「お気に入りショップ」
各ボタンを別の画像に変更する方法につきましては、
会員サイトの「デザインレシピ」にてご紹介差し上げております。
https://club.ec-masters.net/index.php?design_page1

それ以外の要素につきましては、スタイルシートを利用して
細かくコードを書く必要がございます。

「このページのデザインを、このまま自ショップに導入したい」
という、具体的なページなどございますでしょうか。

・「商品をかごに追加」ボタンのサイズ
・「ご購入手続きへ」ボタンのサイズ
・「商品レビューを見る」ボタンのデザイン
・「お気に入り商品」ボタンのデザイン
・「お気に入りショップ」ボタンのデザイン
・「商品についての問合わせ」ボタンのデザイン
・バリエーション（項目選択肢別在庫）の表のデザイン

それぞれの項目に対して、
そのまま利用したいページのURLをお知らせいただきますようお願いします。

いただいた２つのURLを割り当てていただいても結構です。
また、不足している項目がございましたら、追加していただいても結構です。
よろしくお願いいたします。

Answer

田中様、お返事遅くなりすみません。画像サイズの件、承知いたしました。
ボタンを別の画像に変更に関しましては、質問したショップ
（1）https://item.rakuten.co.jp/nopnop/sho-babybed/
（2）https://item.rakuten.co.jp/platina-shop/10040827/
こちらのショップ様のデザインを導入したいと考えております。
項目はご指示いただきました、デザインレシピを使用させていただきましたので残りの
（1）・「商品レビューを見る」ボタンのデザイン
（1）・「お気に入り商品」ボタンのデザイン
（1）・「お気に入りショップ」ボタンのデザイン
（1）・「商品についての問合わせ」ボタンのデザイン
（1）・バリエーション（項目選択肢別在庫）の表のデザイン
　　　　　　+
（2）・「レビューを書く」ボタンのデザイン
を利用したいです。
お忙しいと思いますがよろしくお願いいたします。

Answer

伊藤様、お忙しい中ありがとうございます。使用させていただきます。