### [WPFormsの画像選択肢のラベルをカスタマイズする方法](https://wpforms.com/developers/how-to-customize-the-labels-for-image-choices/) **公開日:** 2024年4月15日 **著者:** Umair Majeed **コンテンツ:** WPFormsの画像選択肢のラベルの視覚的な魅力を高めたいと思いませんか？チェックボックスまたは複数選択フィールドで画像選択肢を使用している場合でも、CSSを使用して魅力的なホバー効果を作成し、ラベルをスタイル設定できます。 このガイドでは、画像選択肢のラベルをカスタマイズして、よりインタラクティブで視覚的に魅力的なフォームエクスペリエンスを作成するためのいくつかの方法を紹介します。 ## フォームの設定 まず、フォームを作成し、フィールドを追加しましょう。画像選択肢を使用する**チェックボックス**フィールドも追加します。 画像選択肢を使用したフォームの作成方法がわからない場合は、[画像選択肢の設定](https://wpforms.com/docs/how-to-add-image-choices-to-fields/)ガイドを参照してください。 ## 画像選択肢ラベルのカスタマイズ これらのCSSの例は、画像選択肢ラベルにさまざまな視覚効果を作成するのに役立ちます。すべての例で、`form#wpforms-form-1000` を独自のフォームIDに置き換えることを忘れないでください。フォームIDの見つけ方がわからない場合は、[フォームIDとフィールドIDの見つけ方](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/)ガイドを確認してください。 #### ホバー時にラベルをオーバーレイ表示 このスタイルは、ユーザーがホバーしたときにラベルが画像の上に表示される、エレガントなオーバーレイ効果を作成します。 #### 境界線とボックス効果を追加 境界線とボックスのプロパティを使用して、ラベルの周りにフレーム、境界線、または角丸を作成します。 ``` 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の一部を組み合わせます。 画像にホバーすると、画像の上にラベルが表示されます。 これらは、**画像選択肢**のラベルを簡単にカスタマイズできる例です。画像の周りの空白を削除したいですか？[画像選択肢の周りの空白を削除する方法](https://wpforms.com/developers/how-to-remove-whitespace-from-around-image-choices/ "画像選択肢の周りの空白を削除する方法")の記事をご覧ください。 **カテゴリ:** スタイリング ---