AI要約
WordPressフォームの外観をカスタマイズしますか？ WPFormsでは、カスタムCSSクラスやスタイルを簡単に追加して、フォームをお好みの見た目にすることができます。
このチュートリアルでは、特定のフォーム要素をスタイル設定するためにカスタムCSSクラスを追加する方法と、WordPressサイトにカスタムCSSを追加する方法を説明します。
注意： CSS初心者の方は、CSSでフォームをスタイル設定するための初心者向けガイドから始めるのが最適です。
CSSクラスとは？
CSSクラスは、ウェブサイトでスタイル設定したい要素をターゲットにする方法です。
WPFormsでは、フィールドにはいくつかのCSSクラスが自動的に割り当てられます。たとえば、フィールドのフィールドサイズが大に設定されている場合、CSSクラスwpforms-field-largeが割り当てられます。
カスタムCSSクラスを追加することで、特定のフォームフィールドを簡単にターゲットにしたり、複数のフィールドに同じスタイルを適用したりできます。
注意：カスタムCSSクラスを使用したりコードを記述したりせずにフォームをスタイル設定したい場合は、フォームのスタイル設定チュートリアルを確認してください。
WPFormsでカスタムCSSクラスを追加する
WPFormsでは、個々のフォームフィールド、送信ボタン、またはフォームの周りのコンテナに独自のカスタムCSSクラスを追加できます。
個々のフォームフィールドにCSSクラスを追加する
フォームフィールドにカスタムCSSクラスを追加するには、新しいフォームを作成するか、既存のフォームを編集する必要があります。
フォームビルダーのプレビューパネル内で、フィールドをクリックしてフィールドオプションを開きます。次に、高度な設定タブを開き、CSSクラスというラベルのフィールドを探します。
CSSクラス名を付ける場合、文字または数字のみを使用でき、スペースは許可されません。クラス名はケースセンシティブなので、小文字を使用することをお勧めします。クラス名に複数の単語を含めたい場合は、スペースの代わりにハイフン（-）またはアンダースコア（_）を含めてください。
問題が発生しないように、クラス名の先頭は常に文字で始めてください。
この例では、CSSクラス名をwpf-blue-backgroundとします。
クラス名の先頭にwpf-を追加することで、サイトのテーマですでに使用されているクラス名を追加する可能性が低くなります。これにより、スタイルの競合を回避し、スタイルが正常に適用される可能性が高まります。
準備ができたら、CSSクラスフィールドにwpf-blue-background CSSクラスを追加します。
必要に応じて、このフィールドに追加のクラスを追加することもできます。これを行うには、各クラス名の間にスペースを追加するだけです。たとえば、次のようになります。
wpf-blue-background wpf-bold-font wpf-xl-margin
注意： CSSクラスフィールドは、複数列レイアウトでフォームフィールドを表示するため、またモバイルでの単一列レイアウトとしても使用できます。
フォームコンテナまたは送信ボタンにCSSクラスを追加する
一部のスタイルでは、フォームのコンテナまたは送信ボタンをターゲットにすると便利です。
例えば、サイト上のすべてのサインアップフォームの送信ボタンをあるスタイルにし、一般的なお問い合わせフォームの送信ボタンを別のスタイルにしたい場合があります。これを実現する簡単な方法は、同じようにスタイルを設定したいすべての送信ボタンに同じCSSクラスを追加することです。
どちらかのオプションにカスタムCSSクラス名を追加するには、フォームビルダーを開き、設定 » 一般に移動します。ここから、高度な設定セクションに移動すると、フォームCSSクラスと送信ボタンCSSクラスのフィールドが表示されます。
複数のクラス名を追加したい場合は、各クラス名をスペースで区切ってください。
注意: 必要であれば、組み込みのフォームCSSクラスを使用して、フォームを1行で表示することができます。
サイト用のCSSスタイルを作成して追加する
フォームのフィールドにカスタムCSSクラスを追加したので、適用したいスタイルを作成できます。
CSSスタイルの作成
CSSは、利用可能な膨大なスタイリングオプションを持つ強力なツールです。CSSの作成方法については、初心者向けCSSガイドをご覧ください。
この例では、クラスwpf-blue-backgroundを持つフィールドに青い背景を追加するだけです。CSS内でクラス名をターゲットにする場合、常にピリオド（.）で始める必要があります。例: .wpf-blue-background。
多くのスタイルがすでにフォームに適用されているため、CSSをより具体的にすることも良い考えです。そのためには、カスタムクラス名の前に.wpforms-formを追加するだけです。
ここに例のCSSを示します:
.wpforms-form .wpf-blue-background {
background-color: #d1effd;
}
カスタムスタイルが正常に適用されない場合は、セミコロンの前に!importantを含めることができます。
注意: !importantの使用は、スタイルが他に適用されない場合にのみ必要です。CSSのトラブルシューティングに関するガイドには、詳細が含まれています。
WordPressサイトへのCSSの追加
カスタムCSSをサイトに追加する迅速かつ簡単な方法の1つは、WordPressテーマカスタマイザーを使用することです。これは、ほとんどすべてのテーマで利用でき、ライブプレビューエリアがあるため、人気のあるオプションです。
テーマカスタマイザーのCSSエリアにアクセスするには、外観 » カスタマイズに移動し、追加CSSというラベルのタブを選択します。
次に、カスタムCSSスニペットを追加します。準備ができたら、公開をクリックします。
CSSクラスとCSSスタイルが適用された、例のフォームの外観は次のとおりです:
注意: カスタムスタイルが表示されませんか？最も一般的な問題と解決策については、CSSのトラブルシューティングガイドをご覧ください。
テーマの変更にわたって一貫性を保つカスタムCSSを追加するもう1つの方法は、WPCodeを使用することです。コードスニペットの使用に関するガイドで、WPCodeを使用してカスタムCSSを適用する方法（事前作成されたCSSコードスニペットのライブラリの使用を含む）については、コードスニペットの使用ガイドを確認してください。
追加のCSSを追加する方法については、WPBeginnerのWordPressにカスタムCSSを追加する方法に関するチュートリアルをご覧ください。
これで完了です！フォームの特定の領域をスタイル設定するために、カスタムCSSクラスを追加できるようになりました。
組み込みのフォームスタイルを表示および変更することもできますか？詳細については、個々のフォームフィールドのカスタマイズに関するチュートリアルをご覧ください。