### [CSSを使用してチェックボックスのラベルに画像を追加する方法](https://wpforms.com/developers/how-to-apply-images-to-checkbox-labels-using-css/)
**公開日:** 2019年12月6日
**著者:** Umair Majeed
**抜粋:** この記事では、CSSを使用してチェックボックスのラベルに画像を追加するためのいくつかの異なるCSSオプションを紹介します。
**コンテンツ:**
フォームのチェックボックスのラベルに画像を追加したいですか？ CSSを使用して、チェックボックスのラベルに背景画像またはフォントベースのアイコンを追加することで、フォームの視覚的な魅力を高めることができます。デフォルトでは、すべてのフォームラベルには、フォームビルダー内にあるテキストのみが表示されます。
このガイドでは、これを実現するための2つの異なる方法を示します。
記事の手順に従うと、画像またはフォントベースのアイコンを使用して、**チェックボックス**フォームフィールドのラベルに画像とテキストの両方を使用するのは非常に簡単です。
## フォームの設定
まず、フォームを作成し、**チェックボックス**フォームフィールドを追加します。フォームの作成にヘルプが必要な場合は、[最初のフォームの作成](https://wpforms.com/docs/creating-first-form/)に関するガイドを確認してください。
CSSを追加する際に必要になるため、フォームIDとフィールドIDをメモしておいてください。これらのIDを見つける方法がわからない場合は、[フォームIDとフィールドIDを見つける方法](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/)に関するガイドを確認してください。
### 背景画像の追加
最初の方法は、WordPressメディアライブラリにアップロードされた背景画像を使用することです。サイトにカスタムCSSを追加する方法がわからない場合は、[サイトにCSSを追加する方法](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/)に関するチュートリアルを確認してください。
**チェックボックス**フォームフィールドのラベルに背景画像を追加したい場合は、次のCSSを使用します。
CSSコードの次の値を置き換えます。
- **1行目**: **1000**をフォームIDに置き換えます
- **1行目**: **field\_25**をフィールドIDに置き換えます
- **4行目**: URLを画像パスに置き換えます
- **6〜7行目**: 6〜7行目の高さを画像のサイズに基づいて調整します
追加のチェックボックスオプションごとに、CSSブロック全体をコピーし、**choice-1**を**choice-2**、**choice-3**などに変更します。背景画像のURLを変更することで、各選択肢に異なる画像を使用することもできます。
### フォントベースのアイコンの使用
2番目の方法では、背景画像よりも軽量で柔軟性のあるフォントアイコンを使用します。まず、WordPressテーマにフォントアイコンライブラリがインストールされていることを確認してください。これに関するヘルプが必要な場合は、[WPBeginnerのWordPressへのアイコンフォントの追加方法](https://www.wpbeginner.com/wp-themes/how-to-easily-add-icon-fonts-in-your-wordpress-theme/)を確認してください。
フォントベースのアイコンフォントファミリーを使用して、チェックボックスのラベルに画像を使用することもできます。
前のCSSと同様に、フォームID **1000**とフィールドID **25**をターゲットにしています。以下のCSSにある**-1000-**はフォームIDを参照しています。
```
ul#wpforms-583-field_3 li.choice-1 label:before,
ul#wpforms-583-field_3 li.choice-2 label:before,
ul#wpforms-583-field_3 li.choice-3 label:before,
ul#wpforms-583-field_3 li.choice-4 label:before,
ul#wpforms-583-field_3 li.choice-5 label:before {
font-family: dashicons;
content: "\f173";
display: inline-block;
color: #000000;
font-size: 16px;
margin: 0px 5px;
position: relative;
top: 2px;
}
```
## よくある質問
#### Q: このCSSを複数選択フォームフィールドに使用できますか？
**A:** はい、もちろんです！これらの同じCSSクラスは、**複数選択**フォームフィールドにも使用されます。CSSでフォームとフィールドのIDを更新することを忘れないでください。
#### Q: これが私のフォームで機能しないのはなぜですか？
**A:** CSSを更新して、独自のフォームとフィールドIDを使用していることを確認してください。これを確認しても画像が表示されない場合は、CSSに追加しようとしている画像のURLを確認してください。
フォームとフィールドIDを見つけるためのヘルプについては、[この役立つドキュメントを確認してください。](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "フォームIDとフィールドIDを見つける方法")
#### Q: ドロップダウンフィールドに使用できますか？
**A:** 現時点では、このCSSは次のフィールドでのみ正しく機能します。
- チェックボックス
- 複数選択
- 支払いチェックボックス
- 支払い複数選択
これは主に、最新のブラウザがドロップダウンフィールドとHTMLマークアップをレンダリングする方法によるものです。
これで完了です！チェックボックスのラベルに画像を追加することに成功しました。**評価**アイコンの見た目をカスタマイズしたいですか？ [評価アイコンの見た目をカスタマイズする方法](https://wpforms.com/developers/how-to-customize-the-look-of-the-rating-icons/ "評価アイコンの見た目をカスタマイズする方法")に関するチュートリアルをご覧ください。
**カテゴリ:** スタイリング
**タグ:** CSS
---