画像選択肢のラベルをカスタマイズする方法

WPFormsの画像選択ラベルの視覚的な魅力を強化したいですか？チェックボックスや複数選択肢フィールドに画像選択肢を使用している場合でも、魅力的なホバー効果を作成したり、CSSを使用してラベルをスタイリングすることができます。

このガイドでは、イメージチョイスラベルをカスタマイズして、よりインタラクティブで視覚的に魅力的なフォームエクスペリエンスを実現する方法をいくつかご紹介します。

フォームの設定

まずはフォームを作成し、フィールドを追加しましょう。また、Image Choicesを使用するCheckboxフィールドも追加します。

イメージチョイスを使用したフォームの作成については、イメージチョイスの設定ガイドをご覧ください。

イメージチョイスラベルのカスタマイズ

これらのCSS例は、Image Choiceラベルに様々な視覚効果を与えるのに役立ちます。すべての例において form#wpforms-form-1000 を自分のフォームIDで入力してください。フォームIDを見つけるのにお困りの場合は、以下のガイドをご覧ください。フォームとフィールドIDの検索.

ホバー時のオーバーレイ・ラベル

このスタイルでは、ユーザーがカーソルを合わせると、画像の上にラベルが表示されるエレガントなオーバーレイ効果が得られます：

このCSSを使えば、カーソルを合わせたときに画像の上にラベルが表示されるように簡単にスタイル設定できる。

ボーダーとボックスエフェクトの追加

ボーダーとボックスのプロパティを使用して、ラベルの周りにフレーム、ボーダー、角丸を作成します。

form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px;
}

ホバー時に画像を回転させる

CSSルール transform画像に楽しいひねりを加えます。カーソルを合わせると、画像はエレガントに回転し、あなたのフォームに遊び心のあるインタラクティブな要素を注入します。この魅力的なエフェクトは、画像をナビゲートする訪問者を魅了します。

form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
    transform: rotate(10deg);
}

ホバー時のボックスシャドウ

画像に奥行きと立体感を与え、ホバー時のボックスシャドウ効果を実装し、ホバー時のデフォルトボーダーを削除します。訪問者が各画像の上を滑ると、微妙な影が優雅に浮かび上がり、あなたのフォームに魅惑的な奥行き感とインタラクティブ性を与えます。

form#wpforms-form-1000 .wpforms-image-choices label:hover {
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

複数のエフェクトを組み合わせる（ホバー時のボーダー、ラベル、ボックスシャドウ）

この最後の例では、すでに使ったCSSのいくつかを組み合わせます。

画像の上にカーソルを置くと、画像の上にラベルが表示されます。

以上、イメージチョイスのラベルを簡単にカスタマイズできる例をご紹介しました。画像の周りにある空白を削除したいですか？イメージ・チョイスの周りの空白を削除する方法」をご覧ください。

画像選択用ラベルのカスタマイズ方法