### [WPFormsにカスタムCSSクラスを追加する方法](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/) **公開日:** 2023年11月23日 **著者:** Umair Majeed **抜粋:** 特定のフォーム要素をスタイル設定するためにカスタムCSSクラスを追加する方法を学びます。 **コンテンツ:** WordPressフォームの外観をカスタマイズしたいですか？WPFormsでは、カスタムCSSクラスとスタイルを簡単に追加して、フォームを希望どおりの外観にすることができます。 このチュートリアルでは、特定のフォーム要素をスタイル設定するためにカスタムCSSクラスを追加する方法と、WordPressサイトにカスタムCSSを追加する方法を説明します。 **注意:** CSSが初めての場合は、[CSSを使用したフォームのスタイル設定の初心者ガイド](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/ "CSSを使用したWPFormsのスタイル設定（初心者ガイド）")が最適な開始点です。 --- ### CSSクラスとは？ CSSクラスは、ウェブサイトでスタイル設定したい要素をターゲットにする方法です。 WPFormsでは、フィールドにはいくつかのCSSクラスが自動的に割り当てられます。たとえば、フィールドの**フィールドサイズ**が**大**に設定されている場合、`wpforms-field-large`というCSSクラスが割り当てられます。 カスタムCSSクラスを追加することで、特定のフォームフィールドを簡単にターゲットにしたり、複数のフィールドに同じスタイルを適用したりできます。 **注意:** カスタムCSSクラスを使用したりコードを書いたりせずにフォームをスタイル設定したい場合は、[フォームのスタイル設定](https://wpforms.com/docs/styling-your-forms/)チュートリアルを確認してください。 ### WPFormsでカスタムCSSクラスを追加する WPFormsでは、個々のフォームフィールド、送信ボタン、またはフォームの周囲のコンテナに独自のカスタムCSSクラスを追加できます。 #### 個々のフォームフィールドにCSSクラスを追加する フォームフィールドにカスタムCSSクラスを追加するには、[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/ "最初のフォームを作成する")するか、既存のフォームを編集する必要があります。 フォームビルダーのプレビューパネル内で、フィールドをクリックしてフィールドオプションを開きます。次に、**高度な設定**タブを開き、**CSSクラス**というラベルのフィールドを探します。  CSSクラスの名前を付ける際は、文字または数字のみを使用でき、スペースは許可されません。クラス名は大文字と小文字を区別するため、小文字を使用することをお勧めします。クラス名に複数の単語を含めたい場合は、スペースの代わりにハイフン（-）またはアンダースコア（\_）を含めてください。 問題が発生しないように、クラス名の先頭には常に文字を使用してください。 この例では、CSSクラスの名前を`wpf-blue-background`とします。 クラス名の先頭に`wpf-`を追加することで、サイトのテーマによって既に使われているクラス名を追加する可能性が低くなります。これにより、スタイルの競合を回避し、スタイルが正常に適用される可能性が高まります。 準備ができたら、`wpf-blue-background` CSSクラスを**CSSクラス**フィールドに追加します。  必要に応じて、このフィールドにクラスを追加することもできます。これを行うには、クラス名の間にスペースを入れます。例： `wpf-blue-background wpf-bold-font wpf-xl-margin` **注意:** CSSクラスフィールドは、フォームフィールドを[複数列レイアウト](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/ "WPFormsで複数列フォームレイアウトを作成する方法")で表示したり、モバイルで[単一列レイアウト](https://wpforms.com/docs/how-to-display-fields-in-a-single-column-on-mobile/ "モバイルでフィールドを単一列で表示する方法")で表示したりするためにも使用できます。 #### フォームコンテナまたは送信ボタンにCSSクラスを追加する 一部のスタイルでは、フォームのコンテナまたは送信ボタンをターゲットにすると便利です。 たとえば、サイトのすべてのサインアップフォームの送信ボタンをある方法でスタイル設定し、一般的な連絡フォームの送信ボタンを別の方法でスタイル設定したい場合があります。これを実現する簡単な方法は、同じようにスタイル設定したい送信ボタンに同じCSSクラスを追加することです。 どちらかのオプションのカスタムCSSクラス名を追加するには、フォームビルダーを開き、**設定 » 一般**に移動します。ここから**高度な設定**セクションに移動すると、**フォームCSSクラス**と**送信ボタンCSSクラス**のフィールドが表示されます。  複数のクラス名を追加したい場合は、各クラス名をスペースで区切ります。 **注意:** 必要に応じて、組み込みのフォームCSSクラスを使用して[フォームを1行で表示](https://wpforms.com/docs/how-to-display-your-form-in-a-single-line/ "フォームを1行で表示する方法")できます。 ### サイト用のCSSスタイルの作成と追加 フォームのフィールドにカスタムCSSクラスを追加したので、適用したいスタイルを作成できます。 #### CSSスタイルの作成 CSSは、利用可能な豊富なスタイリングオプションを備えた強力なツールです。CSSの作成を開始する方法については、[初心者向けCSSガイド](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/ "CSSを使用したWPFormsのスタイル設定（初心者ガイド）")を参照してください。 この例では、クラス`wpf-blue-background`を持つフィールドに青い背景を追加するだけです。CSS内でクラス名をターゲットにする場合、常にピリオド（.）で始める必要があります。例：`.wpf-blue-background`。 多くのスタイルが既にフォームに適用されているため、CSSをより具体的にすることも良い考えです。これを行うには、カスタムクラス名の前に`.wpforms-form`を追加するだけです。 ここに例のCSSを示します： ``` .wpforms-form .wpf-blue-background { background-color: #d1effd; } ``` カスタムスタイルが正常に適用されない場合は、セミコロンの前に**!important**を含めることができます。 **注意:** **!important**の使用は、スタイルが他に適用されない場合にのみ必要です。[CSSのトラブルシューティングに関するガイド](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/#important-rule "CSSが機能しない場合のトラブルシューティング方法")には詳細が含まれています。 #### WordPressサイトにCSSを追加する サイトにカスタムCSSを追加する迅速かつ簡単な方法の1つは、WordPressテーマカスタマイザーを使用することです。これは、ほとんどすべてのテーマで利用でき、ライブプレビューエリアがあるため、一般的なオプションです。 テーマカスタマイザーのCSSエリアにアクセスするには、**外観 » カスタマイズ**に移動し、**追加CSS**というラベルのタブを選択します。  次に、カスタムCSSスニペットを追加します。準備ができたら、**公開**をクリックします。  CSSクラスとCSSスタイルが適用された後の例のフォームの外観は次のとおりです。  **注意:** カスタムスタイルが表示されないですか？最も一般的な問題と解決策については、[CSSのトラブルシューティングに関するガイド](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/ "CSSが機能しない場合のトラブルシューティング方法")を確認してください。 テーマの変更に一貫して適用されるカスタムCSSを追加する別の方法は、[WPCode](https://wpcode.com/)を使用することです。WPCodeでカスタムCSSを適用する方法、および事前構築済みのCSSコードスニペットライブラリの使用方法については、[コードスニペットの使用](https://wpforms.com/docs/using-wpforms-code-snippets/)に関するガイドを確認してください。 CSSを追加する他の方法を確認したい場合は、[WPBeginnerのWordPressサイトにカスタムCSSを簡単に追加する方法](http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/ "WordPressサイトにカスタムCSSを簡単に追加する方法")のチュートリアルを参照してください。 これで完了です！フォームの特定の領域をスタイル設定するためにカスタムCSSクラスを追加できるようになりました。 組み込みのフォームスタイルを表示および変更したいですか？詳細については、[個々のフォームフィールドのスタイル設定のカスタマイズ方法](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields "個々のフォームフィールドのスタイル設定のカスタマイズ方法")のチュートリアルを確認してください。 **カテゴリ:** スタイリング、スタイリングとカスタマイズ ---