画像選択肢の周りの空白を削除する方法

チェックボックスまたは複数選択フォームフィールドで画像選択を使用する際に、画像の周囲の余分なスペースを削除したいですか？数行のCSSで簡単に実現できます。その方法を説明します！

フォームの作成

まず、WPFormsでフォームを作成します。フォームを作成したら、必要なフィールドを追加します。ここでは、画像選択設定の基盤となる複数選択フィールドを追加します。

画像選択の設定方法がわからない場合は、WPFormsに画像選択を追加する方法に関するドキュメントを参照してください。詳細な手順については、こちらをクリックしてください。

余白の削除

サイトに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;
}

これで、フォームの画像の周囲の余白を正常に削除できました。画像選択のスタイリングに関する他の記事も確認してみませんか？画像選択のラベルをカスタマイズする方法に関する記事をご覧ください。