### [PayPal Commerceフィールドのカスタマイズ](https://wpforms.com/docs/customizing-the-paypal-commerce-field/)

**公開日:** 2024年2月23日
**著者:** 編集チーム

**概要:** PayPal Commerceフィールドのカスタマイズ方法について解説します。

**内容：**

PayPal CommerceはPro機能です

PayPal Commerceやその他の強力な機能を有効にして、ビジネスを成長させましょう。

 [ WPForms Pro を入手 ](https://wpforms.com/pricing/) 

サイトのスタイルに合わせて PayPal Commerce フィールドをカスタマイズしたいとお考えですか？このガイドでは、フィールドやボタンのサイズの調整から色の変更まで、WPForms PayPal Commerce アドオンで利用可能なカスタマイズオプションについて解説します。

このチュートリアルでは、WPForms で PayPal Commerce フィールドをカスタマイズする方法をご紹介します。

**必要条件**：WPFormsのPayPal Commerceアドオンを使用するには、以下が必要です：

- [Proライセンス以上](https://wpforms.com/pricing/ "WPForms 価格ページ")
- [PayPalビジネスアカウント](https://www.paypal.com/us/business "PayPalビジネス")
- PayPal Commerceアドオンの[必要最小バージョン](https://wpforms.com/docs/why-you-should-always-use-the-latest-version-of-wpforms/#version-requirements)を満たすために、WPFormsの最新版をインストールすること
- [PayPal Commerce連携機能付きのフォームを設定すること](https://wpforms.com/docs/paypal-commerce-addon/)

---

作業を開始する前に、まずWordPressサイトにWPFormsが[インストールされ、有効化されている](https://wpforms.com/docs/install-wpforms-plugin/ "WPFormsプラグインのインストール方法")ことを確認してください。 [ライセンスの確認](https://wpforms.com/docs/verify-wpforms-license/ "WPFormsライセンスの確認方法")が完了したら、[PayPal Commerceアドオンをインストールして有効化](https://wpforms.com/docs/install-activate-wpforms-addons/ "WPFormsアドオンのインストールと有効化方法")できます。

**注意：** [PayPal Standardアドオン](https://wpforms.com/docs/install-use-paypal-addon-wpforms/) をインストールしている場合は、必ず無効にしてください。2つのPayPalアドオンを同時に使用することはできません。

### PayPal Commerceフィールドのカスタマイズ

支払いフォームの外観を設定するためのさまざまなオプションが用意されています。フォームビルダーでこれらのオプションにアクセスするには、**PayPal Commerce**フィールドを選択し、**フィールドオプション » 詳細**に移動してください。

![PayPal Commerceフィールドのカスタマイズ](https://wpforms.com/wp-content/uploads/2022/08/paypal-commerce-advanced-options.png)

利用可能なカスタマイズオプションは以下の通りです：

- [フィールドサイズ](#field-size)
- [ボタンサイズ](#button-size)
- [ボタンの形状](#button-shape)
- [ボタンの色](#button-color)

**注：** **PayPal Commerce**フィールドおよびそれに含まれる**PayPal**ボタンは、サイトのデザインに合わせて変更することができます。

さらに詳細なカスタマイズを行いたい場合は、[CSSを使用してフォームをカスタマイズ](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/)することができます。

#### フィールドサイズ

「フィールドサイズ」オプションを使用すると、**PayPal Commerce**フィールドに含まれる入力項目の相対的な幅を設定できます。**Small**、**Medium**、**Large**のサイズから選択でき、**Large**を選択するとフォームの利用可能な幅全体が使用されます。

**フィールドサイズ**のドロップダウンリストから値を選択し、使用したいサイズを設定してください。

![フィールドサイズの選択](https://wpforms.com/wp-content/uploads/2022/08/paypal-commerce-field-size.png)

#### ボタンのサイズ

このオプションでは、支払い方法としてPayPal Creditが選択された場合、または定期支払いが有効になっている場合に表示される**PayPal**ボタンのサイズを設定します。

**Small**、**Medium**、**Large**のオプションに加え、デバイスの画面サイズに合わせてボタンのサイズを調整する**Responsive**オプションがあります。

![ボタンのサイズを選択](https://wpforms.com/wp-content/uploads/2022/08/paypal-commerce-button-size.png)

#### ボタンの形状

このオプションでは、**PayPal**ボタンの形状を**丸型**または**長方形**から選択できます。

![ボタンの形状を選択](https://wpforms.com/wp-content/uploads/2022/08/paypal-commerce-button-shape.png)

#### ボタンの色

**PayPal**ボタンの色を変更したい場合は、さまざまなスタイルが用意されています。利用可能なスタイルを確認し、お好みのデザインを選択するには、**ボタン色**のドロップダウンリストをクリックしてください。

![ボタンの色を選択](https://wpforms.com/wp-content/uploads/2022/08/paypal-commerce-button-color-1.png)

選択したボタンのスタイルは、フォームビルダーおよびフォームのプレビューで確認できます。

![シルバーに色変更されたPayPal Commerceボタン](https://wpforms.com/wp-content/uploads/2022/08/paypal-commerce-button-colorized.png)

以上です！これで、WPForms を使用して PayPal Commerce フィールドをカスタマイズする方法がわかりましたね。

次に、フォームにさらに多くのスタイルを追加する方法について知りたいですか？詳細については、[フォームのスタイリング](https://wpforms.com/docs/styling-your-forms/)に関するチュートリアルをぜひご覧ください。

**カテゴリ:** フィールド、支払いフォーム

---