Form Style で支払いフォームのスタイルを設定する方法

概要

WP Simple Payには、カスタムCSSなしで、オンサイト支払いフォームの外観をカスタマイズできる組み込みのフォームスタイル機能が含まれています。8つのデザイン済みテーマプリセットから選択するか、個々の色、タイポグラフィ、レイアウト設定を微調整してブランドに合わせます。

フォームスタイル設定はフォームごとに構成されるため、各支払いフォームを個別にスタイル設定できます。

注意：フォームスタイルは、オンサイト支払いフォーム（埋め込みおよびオーバーレイ表示タイプ）にのみ適用されます。フォームがStripe Checkout（オフサイト）を使用している場合、これらの設定は有効になりません。フォームスタイルを使用するには、一般設定タブでフォームタイプを「オンサイト支払いフォーム」に切り替えてください。

前提条件

• Plusライセンス以上のWP Simple Pay Pro
• オンサイトフォームタイプ（埋め込みまたはオーバーレイ）を使用する支払いフォーム

フォームスタイルタブへのアクセス

1. WordPress管理画面のWP Simple Pay > 支払いフォームに移動します。
2. 既存のフォームをクリックして編集するか、新しいフォームを作成します。
3. フォームエディタでフォームスタイルタブをクリックします。

フォームスタイルタブには、テーマ、色、タイポグラフィ、デザインとレイアウトの4つのサブタブがあります。

テーマプリセットの選択

テーマプリセットは、完全に調整されたスタイルのセットをフォームに即座に適用します。テーマを適用した後、他のタブで個々の設定をさらにカスタマイズできます。

1. フォームスタイルタブで、テーマサブタブ（デフォルトで選択されています）を選択します。
2. 利用可能なテーマを参照してください。各テーマカードには、カラーパレットのプレビューとミニフォームのプレビューが表示されます。
3. テーマカードをクリックして選択します。
4. 保存するには、公開または更新をクリックします。

以下のテーマが利用可能です：

テーマ	説明	プライマリカラー
デフォルト	WP Simple Payのデフォルトのスタイリング	ティール
サンセット	明るい背景に暖色系の赤のアクセント	赤
森	クリーンな背景のフレッシュなグリーンテーマ	緑
海	落ち着いたブルーのパレット	青
白黒	シンプルな白黒テーマ	黒
太陽光	明るく陽気な黄色のアクセント	黄色
サンゴ	暖かみのあるオレンジのパレット	オレンジ
ミニマル	クリーンでミニマルなデザイン	グレー

重要：テーマを選択すると、すべての色とスタイルの設定がテーマの値に更新されます。個々の設定に対して行ったカスタム変更は上書きされます。

色のカスタマイズ

個々の色設定を微調整するには、色サブタブをクリックします。色はセクションに整理されています。

背景色

• フォームの背景 — フォームコンテナ全体の背景色。
• 入力欄の背景 — 入力フィールド、セレクトボックス、ドロップダウンの背景色。

テキストの色

• 一般的なテキストの色 — フォーム内のすべてのテキスト要素のデフォルトの色。
• ラベルのテキストの色 — フィールドラベルの色。ラベルのみ一般テキストの色を上書きします。
• 入力欄のテキストの色 — 入力フィールド内のテキストの色。入力欄のみ一般テキストの色を上書きします。

タイトルと説明の色

• タイトルの色 — フォームタイトルの色。設定されていない場合は、一般的なテキストの色が適用されます。
• 説明の色 — フォーム説明文の色。設定されていない場合は、一般的なテキストの色が適用されます。

アクセントと境界線の色

• プライマリ（アクセント）の色 — フォーカス状態、ハイライト、その他のアクセント要素に使用されます。
• 境界線の色 — 入力フィールドやその他の境界線のある要素の境界線の色。

エラー状態の色

• エラー境界線の色 — 検証エラーのあるフィールドに適用される境界線の色。
• エラーテキストの色 — エラーメッセージのテキストの色。

ボタンの色

• ボタンの背景 — 送信ボタンの背景色。
• ボタンのテキスト — 送信ボタンのテキストの色。
• ボタンのホバー時の背景 — 送信ボタンにマウスを合わせたときの背景色。

すべてのカラーフィールドは、16進数カラー（例：#0f8569）と透明度を持つrgbaカラー（例：rgba(15, 133, 105, 0.8)）をサポートしています。カラーピッカーを開くには、各フィールドの横にあるカラーチップをクリックしてください。

タイポグラフィのカスタマイズ

フォントサイズとフォントウェイトを調整するには、タイポグラフィサブタブをクリックしてください。

ラベルのタイポグラフィ

• ラベルのフォントサイズ — フィールドラベルのサイズ（ピクセル単位）。デフォルト：14px。
• ラベルのフォントウェイト — フィールドラベルのウェイト。オプション：標準、太字、または数値（100～900）。

入力欄のタイポグラフィ

• 入力欄のフォントサイズ — 入力フィールド内のテキストサイズ（ピクセル単位）。デフォルト：16px。

タイトルと説明のタイポグラフィ

• タイトルのフォントサイズ — フォームタイトルのサイズ（ピクセル単位）。デフォルト：24px。
• タイトルのフォントウェイト — フォームタイトルのウェイト。オプション：標準、太字、または数値（100～900）。
• 説明フォントサイズ — フォームの説明のサイズをピクセル単位で指定します。デフォルト: 16px。
• 説明フォントウェイト — フォームの説明のウェイトを指定します。オプション: Normal、Bold、または数値 (100–900)。

デザインとレイアウトのカスタマイズ

デザインとレイアウトのサブタブをクリックして、スペーシングと境界線の半径の設定を調整します。

境界線の半径

• フォーム境界線の半径 — フォームコンテナの角の丸みをピクセル単位で制御します。角を四角くするには0に設定します。
• 入力フィールドとボタンの境界線の半径 — 入力フィールドとボタンの角の丸みをピクセル単位で制御します。

各設定の横にあるライブプレビューで、現在の値の効果を確認できます。

スペーシング

• フォームのパディング — フォームコンテナの内部スペーシング（パディング）をピクセル単位で制御します。

スタイルをデフォルトにリセットする

すべてのスタイル設定をデフォルト値に戻すには、次の手順を実行します。

1. フォームスタイルタブで、いずれかのサブタブの一番下までスクロールします。
2. スタイルをリセットボタンをクリックします。
3. 求められたらリセットを確認します。
4. 公開または更新をクリックしてフォームを保存します。

これにより、すべての色、タイポグラフィ、レイアウトの設定がリセットされます。選択したテーマは変更されません。

よくある質問

フォームスタイルタブが表示されないのはなぜですか？

フォームスタイルタブには、Plusライセンス以上が必要です。パーソナルライセンスをお持ちの場合、代わりにアップグレードプロンプトが表示されます。

オフサイトフォームに関する警告が表示されるのはなぜですか？

フォームスタイルは、サイト上の支払いフォームにのみ適用されます。フォームがオフサイトのStripe Checkoutを使用するように設定されている場合、フォームスタイル設定は有効になりません。フォームエディタの一般タブで、フォームタイプを「サイト上の支払いフォーム」に変更してください。

フォームごとに異なるスタイルを使用できますか？

はい。フォームスタイル設定はフォームごとに保存されるため、各支払いフォームは独自のユニークなスタイルを持つことができます。

フォームスタイルはオーバーレイ（モーダル）フォームでも機能しますか？

はい。フォームスタイルは、埋め込みフォームとオーバーレイ/モーダルフォームの両方に適用されます。オーバーレイフォームの場合、フォームの背景色がモーダルコンテンツ領域の背景を制御します。

フォームスタイルとカスタムCSSを併用できますか？

はい。カスタムCSSは、フォームスタイル設定の上に適用されます。

フォームスタイルはGutenbergブロックのプレビューに影響しますか？

はい。ブロックエディタでWP Simple Payブロックを使用して支払いフォームを挿入すると、ブロックプレビューにフォームの現在のスタイル設定が反映されます。

カラーフィールドを空のままにした場合はどうなりますか？

空のフィールドは適切なデフォルト値を継承します。たとえば、ラベルと入力テキストの色は一般的なテキストの色にフォールバックします。ボタンの色はテーマのプライマリカラーにフォールバックします。

次にやること

• フォームのスタイル設定リファレンス – すべての設定とそのデフォルト値の完全なリファレンス
• 支払い方法表示タイプ – タブとアコーディオンのレイアウトを選択