Snow Monkey Formsのチェックボックス･ラジオボタンはわりと素っ気ないので、画像付きでもう少しタップしやすくしてみました。
Snow Monkey Forms の設定・カスタマイズ方法はこちらにまとめています。
Snow Monkey Formsでチェックボックス･ラジオボタンを画像付きの見た目にする方法
CSSだけでカスタマイズできます。
フォームの用意
対象のラジオボタンとチェックボックスをグループブロックで囲み、グループの追加CSSクラスにwaza-image-optionsを指定します。
このグループ内だけに以下のCSSを適用します。
選択肢には、画像が表示されなくても意味が通じるテキストを設定してください。
旧例を利用中の場合は、本記事の旧CSSを取り外して以下へ置き換えます。
入力にdisplay:noneを指定した旧ルールを残さないでください。
CSSはWordPress管理画面の「外観」＞「カスタマイズ」＞「追加CSS」、または子テーマの style.css に追記してください。
確認範囲：2026年10月21日にSnow Monkey Forms 13.0.0の保存ソースで入力とラベルの隣接構造を確認しました。
旧例のdisplay:noneは入力をキーボード操作とアクセシビリティツリーから除くため、フォーカス可能な隠し方とフォーカス枠へ修正しています（MDNのdisplay解説参照）。
テーマ独自のフォームスタイルや他プラグインによる干渉、すべての端末幅での外観崩れがないかは実機での確認が必要です。
元に戻す場合は、追加したCSSを削除してください。
この記事だけ読みたい方は単品購入、ほかの有料記事も読みたい方は購読プランをご確認ください。
購読対象の記事・料金は、下のプラン案内で確認できます。
役に立った記事を、ブログやSNSで紹介しませんか？
紹介制度の対象記事・購読プランを購入した方は、codocで専用リンクと報酬条件を確認できます。
専用リンク経由で購入されると、設定された紹介報酬が発生します。
購読プランの紹介報酬は初回課金のみが対象です。
紹介時は、広告・PRであることが読者に分かるように明記してください。
