AI要約
フォームにカスタムスタイルを追加しますか、それともテーマスタイルを適用しますか？WPFormsはデフォルトで、フォームがどのWordPressテーマでも見栄えがするように、広範なスタイリングを含みます。ただし、これによりカスタムCSSの適用やテーマスタイルの表示が難しくなる場合があります。
このチュートリアルでは、WPFormsの「フォームスタイリングを含める」設定を使用して、フォームに含まれるテーマスタイリングのレベルを選択する方法を説明します。
「フォームスタイリングを含める」設定の調整
WPFormsに含まれるCSSの量を変更するには、WordPress管理メニューの WPForms » 設定 に移動します。
一般 セクションの下に、フォームスタイリングを含める ドロップダウンがあります。デフォルトでは、このドロップダウンは ベースとフォームのテーマスタイリング に設定されています。
注意： 利用可能な各スタイリングオプションの結果は、テーマによって大きく異なる場合があります。最良の結果を得るには、デフォルトの ベースとフォームのテーマスタイリング オプションをそのまま使用することをお勧めします。
他のスタイリングオプションを試すことにした場合は、必ず 設定を保存 ボタンをクリックして変更を保存してください。
注意:
- ブロックエディターでCSSコードを書かずにフォームをスタイリングしたい場合は、 モダンマークアップを使用 オプションを有効にしてください。詳細については、フォームスタイリング ガイドをご覧ください。
- WPFormsバージョン1.8.1以降の新規ユーザーは、デフォルトでモダンマークアップ設定が有効になっています。また、新規ユーザーの場合、WordPressダッシュボードでこの設定を無効にするオプションは非表示になっています。このオプションを 設定ページに表示する方法 については、ガイドをご覧ください。
ベースとフォームのテーマスタイリングを有効にする
ベースとフォームのテーマスタイリング を使用する場合、ベーススタイルとフォームテーマスタイルの2つのCSSレイヤーが含まれます。
フォームテーマには最も強力なスタイルが含まれており、通常はWordPressテーマが適用しようとするスタイルを上書きします。これは、どのテーマを選択してもフォームが見栄えがするようにするための最良の方法です。
このスタイリング設定の例として、2つの一般的なテーマ（Twenty TwentyとAstra）でシンプルなフォームがどのように表示されるかを見てみましょう。
トゥエンティートゥエンティ
アストラ
これらの画像からわかるように、両方のテーマのフォームは多くの同じスタイルを持っています。たとえば、送信ボタンの色、入力フィールドの白い背景、フォントサイズは同じです。これらのスタイルの多くは、フォームテーマのスタイリングから来ています。
ただし、これらのフォームにはまだいくつかの異なるスタイルがあります。たとえば、Twenty Twentyは送信ボタンのテキストを太字にし、各フォームはWordPressテーマが使用するフォントを継承します。
ベーススタイリングのみを有効にする
ベーススタイリングのみ オプションには、フォームテーマのスタイルは含まれません。代わりに、WPFormsのベーススタイルのみが含まれます。
ほとんどの場合、この設定で最も顕著な違いはボタンのスタイルです。WPFormsのベーススタイルにはボタンのスタイルは含まれていないため、すべてのボタンのスタイリングはサイトのテーマから提供されます。
しかし、他の多くのスタイルもテーマで処理されるようになります。ほとんどのテーマでは、この設定によりかなり大きなスタイルの違いに気づくでしょう。
以下のスクリーンショットでは、上記の同じテーマをこの設定の例として使用します。フィールドラベルのフォントサイズ、サブラベルのフォントウェイト、入力フィールドの背景色、ボタンのスタイルに、いくつかの新しい違いがあることに気づくでしょう。
トゥエンティートゥエンティ
アストラ
一般的な基本スタイリングの問題とその修正方法
「基本スタイリングのみ」設定を使用すると、フォームのレイアウトや有効にしているその他の機能によっては、いくつかの問題が発生する可能性があります。以下に、最も一般的な問題の修正方法を説明します。
注意: フォームボタンにカスタムスタイルを追加したいが、「基本スタイリングのみ」設定の問題を避けたいですか？代わりに、基本およびフォームテーマのスタイリング設定を使用できるように、送信ボタンのスタイリングチュートリアルをご覧ください。
複数列レイアウト
「基本スタイリングのみ」設定が有効になっていると、複数列レイアウトは通常正しく機能しません。これを修正するには、「基本およびフォームテーマのスタイリング」オプションに戻すか、サイトに次のCSSを追加する必要があります。
注意: カスタムCSSスニペットの使用方法がわからない場合は、WPBeginnerのサイトにカスタムCSSを追加する方法に関するチュートリアルを参照してください。
フォームスタイリングを削除する（スタイルなし）
「スタイルなし」オプションは、埋め込みフォームのすべてのWPFormsスタイルを読み込まないようにします。これは、フォームで見られる唯一のスタイルがWordPressテーマから来ることを意味します。
注意: 「スタイルなし」オプションは開発者向けであり、広範なカスタムCSSが必要です。
さらに、この設定では多くのフォームオプションが正しく機能しなくなります。たとえば、すべてのフォームレイアウトが削除され、複数ページフォームのすべてのページが一度に表示されます。
これで、サイトに最適なフォームスタイリングオプションを決定するために必要なすべてを知ることができます。
次に、フォームの送信ボタンをカスタマイズする方法を知りたいですか？ボタンの色、サイズなどをカスタマイズする詳細については、送信ボタンのスタイリングチュートリアルを確認してください。