CSSを使用してチェックボックスラベルに画像を追加する

フォームのチェックボックスラベルに画像を追加しますか？ CSSを使用して、チェックボックスラベルに背景画像またはフォントベースのアイコンを追加することで、フォームの視覚的な魅力を高めることができます。デフォルトでは、すべてのフォームラベルには、フォームビルダー内のテキストのみが表示されます。

このガイドでは、これを実現するための2つの異なる方法を紹介します。

記事の手順に従えば、画像またはフォントベースのアイコンを使用して、チェックボックスフォームフィールドラベルのテキストと画像の両方を使用するのは簡単です。

フォームの設定

まず、フォームを作成し、チェックボックスフォームフィールドを追加します。フォームの作成にヘルプが必要な場合は、最初のフォームの作成に関するガイドをご覧ください。

CSSを追加する際に必要になるため、フォームIDとフィールドIDをメモしておいてください。これらのIDを検索する方法がわからない場合は、フォームとフィールドIDの検索方法に関するガイドを確認してください。

背景画像の追加

最初​​の方法は、WordPressメディアライブラリにアップロードされた背景画像を使用することです。カスタムCSSをサイトに追加する方法がわからない場合は、サイトへのCSSの追加に関するチュートリアルを確認してください。

チェックボックスフォームフィールドのラベルに背景画像を追加したい場合は、次の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へのアイコンフォントの追加に関するガイドを確認してください。

フォントベースのアイコンフォントファミリーを使用して、チェックボックスラベルに画像を使用することもできます。

前のCSSと同様に、フォームID1000とフィールドID25をターゲットにしています。以下の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を見つけるためのヘルプについては、こちらの役立つドキュメントをご覧ください。

Q: ドロップダウンフィールドで使用できますか？

A: 現時点では、このCSSは次のフィールドでのみ正しく機能します：

• チェックボックス
• 複数選択
• 支払いチェックボックス
• 支払い複数選択肢

これは主に、最新のブラウザがドロップダウンフィールドとHTMLマークアップをレンダリングする方法によるものです。

これで、チェックボックスラベルに画像を追加できました。レーティングアイコンの見た目もカスタマイズしますか？レーティングアイコンの見た目をカスタマイズする方法のチュートリアルをご覧ください。