ご注意!

この記事にはCSSコードが含まれており、開発者を対象としています。このコードは便宜上提供していますが、コードのカスタマイズやサードパーティの開発についてはサポートしていません。

追加のガイダンスについては、WPBeginnerのカスタムCSSの追加に関するチュートリアルをご覧ください。

閉じる

チェックボックスと選択式の下に説明テキストを追加する方法

チェックボックスおよび複数選択フィールドのラベルの下に説明テキストを追加しますか? このチュートリアルでは、簡単なHTMLを使用して、これがわずか数ステップでいかに簡単に実現できるかをご紹介します。

デフォルトでは、多くのWPFormsフィールドラベルは、br(改行)、i(イタリック)、b(太字)などの標準的なHTMLタグを受け入れますが、すべてのフィールドがこれらのタグを受け入れるわけではなく、すべてのHTMLタグが受け入れられるわけではないことに注意してください。変更が期待どおりに表示されることを確認するために、各フォームを徹底的にテストしてください。HTML要素の定義の詳細については、Mozillaのドキュメントを参照してください

フォームの作成

まず、フォームを作成し、少なくとも1つのチェックボックスと1つの複数選択を含むフィールドを追加します。

フォームの作成方法についてサポートが必要な場合は、こちらの便利なガイドをご覧ください

フォームを作成し、フィールドを追加することから始めます

説明テキストの追加

チェックボックスおよび複数選択フィールドを追加したら、各ラベルで<br>タグを追加することから始めます。これは、元のラベルの下に新しい行を作成する標準的なHTMLタグです。

次に、複数選択フィールドの下の説明テキストを太字にし、チェックボックスラベルの下の説明テキストをイタリックにします。

これを行うために、説明テキストを<b> HTMLタグで囲むことにより、太字の標準HTMLコードを使用します。

複数選択ラベルの場合、各ラベルは、このテキストをラベルフィールド内に追加することによって作成されます。

  • 商品A <br><b>商品Aの説明テキストはこちら</b>
  • 商品B <br><b>商品Bの説明テキストはこちら</b>
  • 商品C <br><b>商品Cの説明テキストはこちら</b>

チェックボックスラベルの場合、各ラベルは、このテキストをラベルフィールド内に追加することによって作成されます。

  • パッケージA <br><b>パッケージAの説明テキストはこちら</b>
  • パッケージB <br><b>パッケージBの説明テキストはこちら</b>
  • パッケージC <br><b>パッケージCの説明テキストはこちら</b>

チェックボックスおよび複数選択フィールドのラベルにHTMLを追加する

これらのラベルにこのHTMLを追加することで、これらのフィールドのラベルの下に説明テキストが表示されるようになります。

チェックボックスおよび複数選択ラベルの下に説明テキストが表示されるようになります

チェックボックスおよび複数選択の色もカスタマイズしますか? チェックボックスフィールドのスタイルをカスタマイズする方法の記事をご覧ください。