フォームスタイル設定リファレンス
概要
これは、WP Simple Pay で利用可能なすべてのフォームスタイル設定の完全なリファレンスです。詳細なセットアップ手順については、メインのフォームスタイルガイドと併せてご使用ください。
前提条件
- Plusライセンス以上のWP Simple Pay Pro
- オンサイトフォームタイプ(埋め込みまたはオーバーレイ)を使用する支払いフォーム
テーマプリセット
| テーマID | 名前 | プライマリ | セカンダリ | テキスト | 背景 |
|---|---|---|---|---|---|
デフォルト | デフォルト | #0f8569 | #0e7c62 | #32325d | #ffffff |
サンセット | サンセット | #e74c3c | #c0392b | #2c3e50 | #ecf0f1 |
森 | 森 | #27ae60 | #219955 | #2c3e50 | #f9f9f9 |
海 | 海 | #3498db | #2980b9 | #2c3e50 | #ecf0f1 |
白黒 | 白黒 | #333333 | #555555 | #333333 | #ffffff |
太陽光 | 太陽光 | #f1c40f | #f39c12 | #34495e | #ffffff |
サンゴ | サンゴ | #e67e22 | #d35400 | #2c3e50 | #f9f9f9 |
ミニマル | ミニマル | #bdc3c7 | #95a5a6 | #2c3e50 | #ffffff |
テーマを選択すると、プライマリカラーはボタンの背景とアクセントカラーに、セカンダリカラーはボタンのホバー状態に、テキストカラーは一般的なテキストとラベルの色に、背景色はフォームと入力フィールドの両方の背景にマッピングされます。
色の設定
すべての色の設定で受け入れられる形式:
- 16進数カラー:
#0f8569、#fff - RGB/RGBA:
rgba(15, 133, 105, 0.8) - HSL/HSLA:
hsl(160, 80%, 29%) - 空の値(デフォルトを継承するか、親の設定にフォールバックします)
| 設定 | 説明 | フォールバック動作 |
|---|---|---|
| フォームの背景 | フォームコンテナの背景 | 透明(ページの背景を継承) |
| 入力フィールドの背景 | 入力フィールドの背景 | 透明 |
| 一般的なテキストの色 | すべてのテキスト要素 | ブラウザのデフォルト |
| ラベルテキストの色 | フィールドラベルのみ | 一般的なテキストの色にフォールバック |
| 入力フィールドのテキストの色 | 入力フィールド内のテキスト | 一般的なテキストの色にフォールバック |
| タイトルの色 | フォームのタイトル | 一般的なテキストの色にフォールバック |
| 説明の色 | フォームの説明 | 一般的なテキストの色にフォールバック |
| プライマリ(アクセント)カラー | フォーカス状態、ハイライト | テーマデフォルト |
| 境界線の色 | 入力および要素の境界線 | テーマデフォルト |
| エラー境界線の色 | 検証エラーの境界線 | デフォルトのエラー |
| エラーテキストの色 | エラーメッセージテキスト | デフォルトのエラー |
| ボタンの背景 | 送信ボタンの背景 | プライマリカラー |
| ボタンテキスト | 送信ボタンテキスト | 白 |
| ボタンのホバー時の背景 | 送信ボタンのホバー時の状態 | より暗いプライマリ |
タイポグラフィ設定
| 設定 | 説明 | 受け入れ可能な値 | デフォルト |
|---|---|---|---|
| ラベルのフォントサイズ | フィールドラベルのサイズ | 正の整数(ピクセル) | 14 |
| ラベルのフォントウェイト | フィールドラベルのウェイト | normal、bold、100–900 | — |
| 入力フォントサイズ | 入力テキストサイズ | 正の整数(ピクセル) | 16 |
| タイトルのフォントサイズ | フォームタイトルのサイズ | 正の整数(ピクセル) | 24 |
| タイトルのフォントウェイト | フォームタイトルの太さ | normal、bold、100–900 | — |
| 説明フォントサイズ | フォーム説明サイズ | 正の整数(ピクセル) | 16 |
| 説明フォントの太さ | フォーム説明の太さ | normal、bold、100–900 | — |
デザインとレイアウト設定
| 設定 | 説明 | 受け入れ可能な値 | デフォルト |
|---|---|---|---|
| フォームの角丸半径 | フォームコンテナの角丸加工 | 正の整数(ピクセル) | 0 |
| 入力欄とボタンの角丸半径 | 入力欄/ボタンの角丸加工 | 正の整数(ピクセル) | 4 |
| フォームのパディング | フォームコンテナの内部余白 | 正の整数(ピクセル) | 0 |
適用対象
| フォームタイプ | スタイルが適用されていますか? |
|---|---|
| サイト埋め込み | はい |
| サイトオーバーレイ(モーダル) | はい |
| Stripe Checkout(サイト外) | いいえ |
| 支払いページ(サイト内) | はい |
次にやること
- フォームスタイルで支払いフォームをスタイリングする – ステップバイステップ設定ガイド
- 支払い方法表示タイプ – タブとアコーディオンのレイアウトを選択
ご不明な点はまだありますか?喜んでお手伝いさせていただきます!
最終更新日: