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

**URL:** <https://community.shopify.com/t/topic/126559>\
**Category:** 技術的なQ＆A\
**Created:** [June 7, 2022, 10:51am UTC](https://community.shopify.com/t/topic/126559 "2022-06-07T10:51:51Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

- 外部のWordPressにShopify Buy Buttonを埋め込み、バリエーション用セレクターの文字色・字間が変更できず、iOSのみ文字色が青い／タップ時の枠線を消したいという相談。
- 対応として、Buy Button JSのカスタマイズドキュメント（shopify.github.io/buy-button-js/customization/）が共有。
- 購入ボタンコードの"option"設定を編集し、styles.selectでcolor（文字色）、letter-spacing（字間）、outline: none（フォーカス枠線無効化）を指定する方法が提案。コードスニペットが解決の要。
- 提案を適用した結果、希望どおりに表示が変更でき、「うまくいった」と報告。議論は解決済み。

<div class="post-metadata">

**Author:** ![yanana](https://avatars.discourse-cdn.com/v4/letter/y/ecd19e/32.png) [@yanana](https://community.shopify.com/u/yanana)\
**Post date:** [June 7, 2022, 10:51am UTC](https://community.shopify.com/t/topic/126559/1 "2022-06-07T10:51:51Z")

</div>

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

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

宜しくお願いします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [June 10, 2022, 12:14pm UTC](https://community.shopify.com/t/topic/126559/2 "2022-06-10T12:14:29Z")

</div>

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

[https://shopify.github.io/buy-button-js/customization/](https://shopify.github.io/buy-button-js/customization/)

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

触りだけですが、

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

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

“option”: {},

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

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

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

```

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![yanana](https://avatars.discourse-cdn.com/v4/letter/y/ecd19e/32.png) [@yanana](https://community.shopify.com/u/yanana)\
**Post date:** [June 11, 2022, 9:10am UTC](https://community.shopify.com/t/topic/126559/3 "2022-06-11T09:10:35Z")

</div>

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