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

はじめに

複数選択肢と チェックボックスのフォームフィールドの画像選択肢ラベルを非表示にしたいですか?これらのフィールドにラベルの代わりに画像を表示するオプションを使用することは、訪問者の注意を引くための素晴らしい方法です。このチュートリアルでは、小さなCSSスニペットを使用して、これらの画像のラベルを簡単に非表示にすることができます!

フォームの作成

まず始めに、新しいフォームを作成してフィールドを追加します。チェックボックス・フィールドに画像を使いたいことはすでに分かっているので、このフィールドとそれに付随する画像を追加します。

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

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

画像選択ラベルを隠すCSSの追加

これでフォームが作成され、画像の下にラベルが表示されました。

画像の下にラベルが表示されます。

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

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

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

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

このCSSは、画像の下に表示されるラベルを隠すだけでなく、画像の下に自動的に適用されるマージン(間隔)も取り除きます。

ラベルがなくなっているのがわかるだろう。

画像の選択肢の周りにある空白も削除したいですか?画像選択肢の周りの空白を削除する方法」の記事をご覧ください。