スマホでのバリエーションの文字色

日本語 ディスカッション 技術的なQ＆A
1

外部のwordpressサイトにbuybuttonのコードを埋め込んで商品ページを作成しています。バリエーションのある商品には「カートに入れる」ボタンの上にセレクターがつきますが、その文字色と字間が変更できません。PCとAndroidでは文字色は黒なので、このままでも良いと言えば良いのですが、iOSだと青いです。これを変える方法はありませんでしょうか？

あと、セレクタをクリック（タップ）した時に、青（mac）やオレンジ（Android）の枠線が出るのをやめたいのですが、方法はありますでしょうか？

宜しくお願いします。

2

Buy Buttonの詳しいカスタマイズ方法のドキュメントが下記にありますので、ご確認いただくと良いかもしれません。

https://shopify.github.io/buy-button-js/customization/

私も購入ボタンのカスタマイズに慣れているわけではないので、

触りだけですが、

カスタムコードを記載しておきます。

購入ボタンのコードの中に、

“option”: {},

という箇所があるかと思います。(質問者様のカスタマイズ状況によってコードは異なります。)

それを下記に書き換えます。

"option": {
      "styles": {
        "select": {
          "color": "#f00", //お好きな文字色を設定してください
          "letter-spacing": "10px", //お好きな文字間隔を設定してください
          "outline": "none" //アウトラインを無効化します。
        }
      }
    },

ご参考まで。

(キュー田辺)

3

アドバイス通りにやってみました。うまくいきました。ありがとうございます！！

1 Like