「商品をかごに追加」「購入手続きへ」の赤いボタンについて

Question

「商品をかごに追加」「購入手続きへ」の赤いボタンは、画像を変更することができるのでしょうか？
フォーラムにサイズ変更できると書いてあるものもありましたが今でもサイズを変更できるのですか？

Answer

ECマスターズの伊藤です。

> 「商品をかごに追加」「購入手続きへ」の赤いボタンは、画像を変更することができるのでしょうか？

画像にされたいのは
PC、スマホどちらになりますでしょうか。

> フォーラムにサイズ変更できると書いてあるものもありましたが今でもサイズを変更できるのですか？

ご覧頂いたフォーラムは下記となりますでしょうか。
https://forum.ec-masters.net/post_view.php?id=7907

確認したところ、サイズの変更は
今でも可能なようです。

Answer

> 画像にされたいのは
> PC、スマホどちらになりますでしょうか。

 PC、スマホ両方とも知りたいです。

Answer

早く回答ください

Answer

ECマスターズの伊藤です。

> 早く回答ください

フォーラムへは順次回答をしておりますので
ご回答まではお時間をいただくことがございますので
ご了承くださいませ。


> PC、スマホ両方とも知りたいです。

下記の通り、CSSをご登録いただきますと
ご対応いただくことができます。

PC
PC用商品説明文や
ヘッダーなどにご登録お願いいたします。


/* 商品をかごに追加 の設定 */
div#rakutenLimitedId_aroundCart .cart-button.add-cart.new-cart-button.sku-submit-add-cart {
    width: 【画像の幅】px!important; 
    height: 【画像の高さ】px!important;
    background-image: url(【画像のURL】)!important;
    background-color: transparent!important;
    text-indent: -9999em!important;
}
/* ご購入手続きへ */
div#rakutenLimitedId_aroundCart .cart-button.checkout.new-cart-button.sku-submit-checkout{
    width: 【画像の幅】px!important; 
    height: 【画像の高さ】px!important;
    background-image: url(【画像のURL】)!important;
    background-color: transparent!important;
    text-indent: -9999em!important;
}



スマホ
スマートフォン用商品説明文や
商品共通説明文に
ご登録をお願いします。


/* 商品をかごに追加 の設定 */
body #floatingAddToCart.cartButton a {
    width: 【画像の幅】px;
    height: 【画像の高さ】px;
    background-image: url(【画像のURL】)!important;
    background-color: transparent!important;
    text-indent: -9999em;
}
/* ご購入手続きへ */
body #floatingCheckOut.cartButton a {
    width: 【画像の幅】px;
    height: 【画像の高さ】px;
    background-image: url(【画像のURL】)!important;
    background-color: transparent!important;
    text-indent: -9999em;
}

Answer

「商品をかごに追加」「購入手続きへ」の赤いボタンのサイズ変更は分かりましたが、中の文字のサイズを変更することは可能でしょうか？

Answer

ECマスターズの伊藤です。

> 「商品をかごに追加」「購入手続きへ」の赤いボタンのサイズ変更は分かりましたが、中の文字のサイズを変更することは可能でしょうか？

ボタンサイズ変更時に追加して頂いたの上に
下記CSSの追加をお願いいたします。

18 の数字で、文字のサイのご指定がいただけますので
ご希望のサイズに合わせて、変更をお願いいたします。


#div#rakutenLimitedId_aroundCart .new-cart-button span{
 font-size:18px;
}

Answer

body div#rakutenLimitedId_aroundCart .new-cart-button {
width: 250px!important;
height: 40px!important;
}
#div#rakutenLimitedId_aroundCart .new-cart-button span{
font-size:23px;
}



上記の文を「共通説明文(大)」に追加したのですが文字サイズに変化がないみたいなのですが・・・

◆商品ページ
https://item.rakuten.co.jp/*****/10000062/

Answer

すみません。2019/10/17 10:14の私の返信の「◆商品ページ」の下のURLを削除したいのでよろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 上記の文を「共通説明文(大)」に追加したのですが文字サイズに変化がないみたいなのですが・・・

大変失礼いたしました。
他のタグと競合しており、フォントサイズの変更が
反映されていないようでしたので
下記に書き換えて、再度ご確認いただけますでしょうか。

div#rakutenLimitedId_aroundCart .new-cart-button span{
    font-size:23px!important;
}

> すみません。2019/10/17 10:14の私の返信の「◆商品ページ」の下のURLを削除したいのでよろしくお願いいたします。

店舗IDのみ伏せる形で
修正をさせていただきました。