### [WPFormsに背景画像を追加する方法](https://wpforms.com/docs/how-to-add-a-background-image-in-wpforms/)
**公開日:** 2023年11月27日
**著者:** Umair Majeed
**抜粋:** フォームに背景画像を追加する方法を学びます。
**コンテンツ:**
フォームに背景画像を追加する方法を知りたいですか？ CSSを使えば、画像やカラーグラデーションを背景にしてフォームを簡単にスタイル設定できます！
このチュートリアルでは、フォームに背景画像を追加する方法を説明します。
**注意:** このチュートリアルの手順では、[サイトにCSSクラスを追加する](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/)必要があります。カスタムCSSを追加せずに、より簡単な方法をご希望の場合は、[フォームテーマの使用](https://wpforms.com/docs/using-form-themes/)に関するチュートリアルをご覧ください。
---
### 1. 背景画像の選択
まず、フォームの背景として使用する画像を選択する必要があります。メディアライブラリの画像や、サイトからアクセスできるインターネット上の任意の画像を使用できます。
#### 考慮事項
最大限の可読性を確保するために、背景画像とフォーム内のテキストまたはフィールドとの間に十分なコントラストがあることを確認してください。
たとえば、明るい背景に明るいテキストを使用することは避けてください。代わりに、明るい背景に暗いテキスト、暗い背景に明るいテキストを使用してください。
### 2. フォームの選択
次に、カスタマイズしたいフォームを選択します。まだ[フォームを作成していない](https://wpforms.com/docs/creating-first-form/)場合は、**WPForms » 新規追加**をクリックして新しいフォームを追加してください。
開始するには、多くの[フォームテンプレート](https://wpforms.com/templates)から1つを選択できます。
デフォルトのいずれかが要件に合わない場合は、同様のテンプレートを選択して、フォームビルダーでカスタマイズすることもできます。
### 3. フォームへの背景画像の追加
フォームビルダーで、**設定 » 一般 » 詳細設定**に移動します。
ここで、**フォームCSSクラス**にクラス名を入力します。クラス名は任意ですが、接頭辞として`wpf-`を追加することをお勧めします。これにより、カスタムCSSコードとサイトのテーマまたはプラグインとの競合を回避できます。
**注意:** 問題を回避するために、クラス名は必ず文字で始めてください。また、CSSのクラス名は大文字と小文字を区別することに注意してください。詳細については、[初心者向けスタイリングガイド](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/)と[WPFormsへのクラスの追加](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/)のチュートリアルをご覧ください。
#### 既存の画像の利用
メディアライブラリの画像を使用したい場合は、完全な画像URLが必要です。これを入手するには、まずWordPress管理ダッシュボードから**メディア » ライブラリ**に移動します。
ここで、使用したい画像をクリックします。
開いたダイアログボックスで、**URLをクリップボードにコピー**をクリックします。
これにより、画像URLがクリップボードにコピーされます。
**注意:** インターネット上の他のソースからの画像の場合、画像を右クリックして**画像アドレスをコピー**をクリックしてURLをコピーします。
表示されるメニューテキストは、使用しているブラウザによって若干異なる場合があります。ただし、メディアライブラリの**URLをクリップボードにコピー**をクリックするのと同じ機能を実行します。
次に、WordPress管理ダッシュボードに戻り、**外観 » カスタマイズ**を選択し、**追加CSS**を選択します。
次に、`background-image`プロパティを持つカスタムクラスを作成し、以前にコピーしたURLを貼り付けます。
以下にそのようなクラスの例を記述しました。`/path/wpforms-backdrop.png`を実際の画像のURLに置き換えることを忘れないでください。
設定は次のようになります。
コードが正しいことを確認したら、**公開**をクリックして変更を保存します。
コードにエラーがなければ、フォームに背景画像が表示されます。上記のコードを使用したフォームの例を次に示します。
#### グラデーションを背景画像として使用する
CSSでは、カラーグラデーションを画像として使用でき、このソリューションはフォームでも機能します。グラデーションは高度にカスタマイズ可能で、任意の数の色を使用できます。
グラデーションは自動生成されるため、メディアライブラリやインターネット上の他の場所からソース画像を取得する必要はありません。これにより、速度と独自性が向上するという利点があります。ソース画像が見つからなくなる心配もありません。
CSSには3種類のグラデーションがあります。
- `conic-gradient()`
- `linear-gradient()`
- `radial-gradient()`
**注意:** CSSでのグラデーションの使用についてさらに詳しく知りたい場合は、[Mozilla Developer Networkのこのページ](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を読むことをお勧めします。
この例では、単純な線形グラデーションをフォームの背景として使用する方法を示します。以前と同様にクラスを記述しますが、URLの代わりにCSS関数`linear-gradient()`を使用します。
これがどのように機能するかを確認するには、以下のコード例を参照してください。
```
.wpf-custom-background {
background-image: linear-gradient(#0299ed, #FFFFFF) !important;
/*パディングは必須ではありませんが、強く推奨されます*/
padding: 15px 35px !important;
}
```
これにより、フォームの背景画像として柔らかい青から白へのグラデーションが生成されます。
**注意:** グラデーションを生成するためのコード不要のソリューションを使用したい場合は、[CSS Gradient (cssgradient.io)](https://cssgradient.io/)などのオンラインリソースを使用できます。
### よくある質問
以下に、フォームへの背景画像の追加に関するよくある質問にお答えします。
##### Conversational Formsアドオンを使用するフォームに背景画像を追加するにはどうすればよいですか？
上記の方法で背景画像を追加しても、フォームには適用されません。これは、会話型フォームが異なるスタイリングオプションを使用するためです。
[Conversational Formsアドオン](https://wpforms.com/docs/how-to-install-and-use-the-conversational-forms-addon/)を使用するフォームに背景画像を追加するには、`#wpforms-conversational-form-page` CSSセレクターを使用する必要があります。以下にコード例を示します。`url()`プロパティのパスを、使用する実際の画像に置き換えてください。
```
#wpforms-conversational-form-page {
background-image: url(/path/wpforms-backdrop.png) !important;
background-position: center; /* 画像を中央に配置 */
background-repeat: no-repeat; /* 画像を繰り返さない */
background-size: cover;
}
```
これで完了です！ WPFormsでフォームに背景画像を追加する方法がわかりました。
次に、コードを使用せずにフォームをスタイル設定する方法を知りたいですか？ [CSS Heroを使用したWPFormsのカスタマイズガイド](https://wpforms.com/docs/how-to-style-wpforms-without-knowing-any-code/)をご覧ください。
**カテゴリ:** スタイリング、スタイリングとカスタマイズ
---