### [画像選択肢の追加](https://wpforms.com/docs/how-to-add-image-choices-to-fields/) **公開日:** 2023年11月25日 **著者:** David Ozokoye **抜粋:** 複数選択、チェックボックス、複数項目、またはチェックボックス項目フィールドに画像を追加する方法を学びましょう。 **本文:** フォームに画像オプションを追加したいですか？ WPFormsを使用すると、複数選択、チェックボックス、複数項目、チェックボックス項目フィールドに簡単に画像を追加できるため、ユーザーはリストされたオプションまたは項目を確認できます。 このチュートリアルでは、WPFormsの既存または新規フィールドに画像選択肢を追加する方法を説明します。 - [画像選択肢の設定](#setup) - [画像の追加](#adding-images) - [画像オプションのカスタマイズ](#customize) このフォームを完了するには、ブラウザでJavaScriptを有効にしてください。 ##### フラワー注文フォームデモ！ 注文する花を選択してください \*- バラの花 – $4.99 - ひまわり – $7.99 - サリーズスペシャル – $14.99 配送先住所 \*住所1行目 市 — 都道府県を選択 —アラバマ州アラスカ州アリゾナ州アーカンソー州カリフォルニア州コロラド州コネチカット州デラウェア州コロンビア特別区フロリダ州ジョージア州ハワイ州アイダホ州イリノイ州インディアナ州アイオワ州カンザス州ケンタッキー州ルイジアナ州メイン州メリーランド州マサチューセッツ州ミシガン州ミネソタ州ミシシッピ州ミズーリ州モンタナ州ネブラスカ州ネバダ州ニューハンプシャー州ニュージャージー州ニューメキシコ州ニューヨーク州ノースカロライナ州ノースダコタ州オハイオ州オクラホマ州オレゴン州ペンシルベニア州ロードアイランド州サウスカロライナ州サウスダコタ州テネシー州テキサス州ユタ州バーモント州バージニア州ワシントン州ウェストバージニア州ウィスコンシン州ワイオミング州都道府県 合計 \*$0.00 今すぐ注文する カスタマイズ可能なフォームテンプレートをプレビューして使用し、フォーム作成プロセスをスピードアップしたいですか？ [サンプルシャツ注文フォームテンプレート](https://wpforms.com/templates/sample-shirt-order-form-template/)をご覧ください。 --- ## 画像選択肢の設定 開始する前に、WPFormsがWordPressサイトに[インストールおよび有効化](https://wpforms.com/docs/install-wpforms-plugin/ "WPFormsプラグインのインストール方法")されており、[ライセンスが検証済み](https://wpforms.com/docs/verify-wpforms-license/ "WPFormsライセンスの検証方法")であることを確認してください。その後、[新規フォームを作成](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成方法")するか、既存のフォームを編集してフォームビルダーにアクセスできます。 フォームビルダーが開いたら、次のいずれかのフィールドタイプに画像選択肢を追加できます。 - 複数選択 - チェックボックス - 複数項目 - チェックボックス項目 さらに、これらのフィールドタイプの新規および既存のフィールドに画像を追加できます。 例として、[注文フォーム](https://wpforms.com/how-to-create-a-simple-order-form-in-wordpress/ "WordPressで注文フォームを作成する方法 [+無料テンプレート]")の項目オプションの画像を表示したいと思います。これを行うには、まずフォームに**複数項目**フィールドを追加します。 フィールドを追加したら、次のステップはフィールドラベルを変更し、利用可能なオプションのテキストを追加することです。複数項目フィールドを使用しているため、各項目の価格も追加する必要があります。 この基本的な設定が完了したら、**画像選択肢を使用**オプションを選択します。 このオプションを有効にすると、各オプションに**画像アップロード**ボタンが追加されます。また、プレビューエリアには各オプションのプレースホルダー画像が表示されます。 プレースホルダー画像はフォーム構築プロセスをガイドするためのものであり、プレビューエリアにのみ表示されます。これらのプレースホルダー画像は、フォームがサイトに埋め込まれた際には表示されません。 ## 画像の追加 オプションに画像を追加するには、**画像アップロード**ボタンをクリックします。 受け入れられていない画像形式（.svgファイルなど）をアップロードしようとしている場合は、まずそのファイルタイプのサポートを有効にする必要があります。詳細については、[追加のファイルアップロードタイプの許可](https://wpforms.com/docs/how-to-allow-additional-file-upload-types/)に関するガイドを確認してください。 これによりWordPressメディアライブラリが開きます。ここから、サイトに既に追加されているファイルを選択するか、新しい画像をアップロードできます。使用したい画像を選択したら、**画像を使用**ボタンをクリックします。 この例では、すべての画像を150x150ピクセルに編集しました。これにより、画像オプションがより均一でプロフェッショナルに見えるようになります。 画像はフォームに追加される際にトリミングまたはリサイズされません。最良の結果を得るために、すべての画像選択肢を同じサイズ（250x250ピクセル以下）にすることをお勧めします。 WordPressメディアライブラリに組み込まれている基本的な画像編集オプション（スケーリングやクロッピングなど）の詳細については、[WPBeginnerのチュートリアル](http://www.wpbeginner.com/beginners-guide/how-to-crop-rotate-scale-and-flip-images-in-wordpress/)を参照してください。 画像選択肢がユーザーに表示される様子は次のとおりです。 画像選択肢の下にあるラベルを非表示にして、よりクリーンな外観にしたい場合は、[開発者ドキュメント](https://wpforms.com/developers/how-to-hide-image-choice-labels-with-wpforms/)にそのための簡単なCSSスニペットが用意されています。 ## 画像オプションのカスタマイズ WPFormsには、画像選択肢をカスタマイズするためのいくつかの組み込みオプションも含まれています。これらのオプションを表示するには、フィールドオプション内の**詳細設定**タブを開きます。 使用しているフィールドで利用可能な他のカスタマイズオプションに加えて、**画像選択肢を使用**オプションが選択されている場合に2つのオプションが追加されます：画像選択肢のスタイルと選択肢のレイアウト。 ### 画像選択肢のスタイル 画像選択肢のスタイリングには、モダン、クラシック、なしの3つのオプションがあります。 これらのオプションを以下で説明します。 #### モダン スタイル **モダン**オプションは、選択されたオプションを影付きのボックス内に表示し、選択されたオプションの中央に緑と白のチェックマークを追加します。 #### クラシック スタイル **クラシック**オプションは、選択されたオプションの周りに太いダークグレーの境界線を追加するだけです。 #### なし 特別なスタイリングを追加したくない場合は、**なし**オプションを選択してください。このオプションは、各オプションのテキストの横に通常のチェックボックスまたはラジオボタンを表示します。 フォームの画像選択肢の周りの空白を削除したいですか？画像選択肢の外観を合理化するCSSスニペットについては、[開発者ドキュメント](https://wpforms.com/developers/how-to-remove-whitespace-from-around-image-choices/)をご覧ください。 ### 選択肢のレイアウト 画像選択肢が許可されているフィールドでは、いくつかのレイアウトオプションがあります。これは、このフィールド内の選択肢を表示するために使用される列数を決定します。 **選択肢のレイアウト**オプションには、1列、2列、3列、インラインがあります。 デフォルトでは、**画像選択肢を追加**オプションが有効になっている場合に**インライン**オプションが選択されます。これにより、各行に可能な限り多くの選択肢が自動的に配置されます。 ほとんどの場合、画像選択肢フィールドではデフォルトの**インライン**選択肢レイアウトを維持することをお勧めします。これにより、レイアウトがさまざまな画面サイズに自動的に適応します。 これで完了です！これで、フォームの複数選択、チェックボックス、複数項目、チェックボックス項目フィールドに画像を追加できるようになりました。複数項目フィールドを使用し、支払いを処理する予定の場合は、[Stripe](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "WPFormsでのStripeアドオンのインストールと使用方法")、[PayPal](https://wpforms.com/docs/install-use-paypal-addon-wpforms/ "WPFormsでのPayPalアドオンのインストールと使用方法")、[Authorize.Net](https://wpforms.com/docs/how-to-install-and-use-the-authorize-net-addon-with-wpforms/ "WPFormsでのAuthorize.Netアドオンのインストールと使用方法")、または[Square](https://wpforms.com/docs/how-to-install-and-use-the-square-addon-with-wpforms/ "WPFormsでのSquareアドオンのインストールと使用方法")との統合を設定することを忘れないでください。 次に、サイトに追加する前にフォームをテストしたいと思いますか？フォームを公開する前に、[公開前チェックリスト](https://wpforms.com/docs/how-to-properly-test-your-wordpress-forms-before-launching-checklist/ "公開前にWordPressフォームを適切にテストする方法[チェックリスト]")ですべてのヒントと推奨事項を確認してください。 **カテゴリー:** フィールド、フィールドのカスタマイズ ---