画像の選択範囲から空白を取り除く方法

チェックボックスや 複数選択肢のフォームフィールドに画像選択肢を使用する際、画像を囲む余分なスペースをなくしたいとお考えですか？ほんの数行のCSSで、簡単にこれを実現することができます！

フォームの作成

まず、WPFormsでフォームを作成します。フォームを作成したら、必要なフィールドを追加します。その中には、イメージ選択肢の設定の基礎となる複数選択肢フィールドも含まれます。

Image Choicesの設定方法がわからない場合は、WPFormsにImage Choicesを追加する方法についてのドキュメントを参照してください。ここをクリックすると詳しい説明が表示されます。

空白の削除

CSSを追加する方法や場所がわからない場合は、こちらのチュートリアルを参考にしてください。

すべてのフォーム

デフォルトでは、フォームに画像の選択肢を追加すると、CSSのパディングによって画像の周囲に空白が表示されます。この空白は下の画像で見ることができます：

この空白を削除するには、以下のCSSコードをコピーしてサイトに貼り付ける必要があります：

span.wpforms-image-choices-label {
    display: none !important;
}

.wpforms-field-label-inline {
    line-height: 0 !important;
}

label.wpforms-field-label-inline {
    padding: 0 !important;
}

このCSSコードは、画像の周りの空白を取り除くだけでなく、各画像に関連するラベルを非表示にし、画像を独立させます。

特定のフォーム

フォームIDの空白を削除するには 1328あなたのサイトに以下のCSSコードをコピー＆ペーストしてください：

form#wpforms-form-1328 span.wpforms-image-choices-label {
    display: none !important;
}
 
form#wpforms-form-1328 .wpforms-field-label-inline {
    line-height: 0 !important;
}
 
form#wpforms-form-1328 label.wpforms-field-label-inline {
    padding: 0 !important;
}

これで完了です！ これで、フォーム内の画像の周りの空白を取り除くことができました。 画像選択肢のスタイリングに関する他の記事もご覧ください。画像選択肢のラベルをカスタマイズする方法をご覧ください。