ご注意!

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

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

閉じる

WPFormsで画像選択肢のラベルを非表示にする方法

はじめに

「選択式」および「チェックボックス」フォームフィールドの画像選択ラベルを非表示にしますか? これらのフィールドにラベルだけでなく画像を表示するオプションを使用することは、訪問者の注意を捉えるのに最適な方法ですが、おそらく画像に語らせて、これらの画像の下に表示されるラベルを削除したいのではないでしょうか? 小さなCSSスニペットを使用すると、これらのラベルを簡単に非表示にできます。このチュートリアルでは、その方法を正確に説明します!

フォームの作成

まず、新しいフォームを作成し、フィールドを追加します。すでに「チェックボックス」フィールドに画像を使用したいことがわかっているので、このフィールドとそれに対応する画像を追加します。

フォームの作成についてサポートが必要な場合は、こちらの役立つガイドをご覧ください。また、「画像選択」を使用してフィールドを設定する方法についてサポートが必要な場合は、こちらのドキュメントをご確認ください

チェックボックスの画像選択をフォームに追加する

画像選択ラベルを非表示にするCSSを追加する

フォームが作成されたので、画像の下にラベルが表示されているのがわかります。

画像の下にラベルが表示されているのがわかります

これらのラベルを非表示にしたいので、非表示にするためのCSSを追加します。

サイトにCSSを追加する方法についてヘルプが必要な場合は、こちらのチュートリアルをご覧ください

このCSSをコピーしてサイトに貼り付けるだけです。

form.wpforms-form .wpforms-field-container ul.wpforms-image-choices span.wpforms-image-choices-label {
    display: none;
}

このCSSは、画像の下に表示されるラベルを非表示にするだけでなく、画像の下に自動的に適用される余白(間隔)も削除します。

これで、ラベルが表示されなくなります

画像選択の周りの空白を削除しますか? 画像選択の周りの空白を削除する方法の記事をご覧ください。