WordPressサイトに画像を追加したいですか？
画像はあらゆるオンラインコンテンツに欠かせないものです。画像はウェブサイトの視覚的な魅力を高め、コンテンツの読みやすさを向上させます。
このチュートリアルでは、WordPressサイトのさまざまな部分に画像を追加する手順を説明します。
この記事で
ワードプレスに画像を追加する方法
WordPressに画像を追加する手順は、画像を挿入する場所によって異なります。このチュートリアルでは、WordPressで画像をアップロードするための最も一般的なシナリオのいくつかを紹介します。
説明書をお読みになりたい方は、こちらをご覧ください。
シナリオ #1：WordPressの投稿に画像を追加する
WordPressで新しい投稿やページを作成する場合、コンテンツを目立たせるためにいくつかの画像を追加する必要があるでしょう。
投稿に画像を追加するには、まずWordPressの投稿エディターにアクセスし、管理メニューから投稿 " すべての投稿に移動します。
これですぐにWordPress Gutenbergエディタに移動します。エディタに入ったら、「+」ボタンをクリックして利用可能なブロックのリストを開き、画像ブロックを選択します。
画像ブロックをコンテンツエリアに挿入すると、コンピューターから新しい画像をアップロードするか、メディアライブラリからすでにアップロードされている画像を選択するか、URLから画像を挿入するかのオプションが表示されます。
まだライブラリに存在しない新しい画像を追加する場合は、アップロードボタンをクリックします。
そして、アップロードしたい画像をコンピュータから選択すると、すぐに投稿に表示されるはずです。
WordPressのブログ記事に画像を追加するのはとても簡単です！
ページに画像を挿入する手順も同様です。WordPressの管理画面のサイドバーから「新しいページを追加 」メニューをクリックした後、同じ手順を踏むだけです。
シナリオ #2：WordPressのフォームに画像を追加する
WordPressのフォームに画像を追加したい場合は、まず簡単に画像をアップロードできる機能を持ったフォームプラグインをインストールする必要があります。
WPFormsはWordPressの数少ないフォームプラグインの一つで、フォーム内の任意の場所に画像を挿入することが驚くほど簡単にできます。
WPFormsをインストールする
まだWPFormsをサイトにインストールしていない場合は、WPForms Proライセンスを取得することをお勧めします。
プラグインのインストールについては、WPFormsのインストールに関するドキュメントガイドをご覧ください。
プラグインをインストールしたら、次のステップに進み、フォームの作成方法を説明します。
新しいフォームを作る
WordPressのダッシュボードで、WPForms " Add Newに進みます。
わずか数秒でフォームのセットアップウィンドウが開きます。ここで、フォームに名前をつけたり、あらかじめ用意されているテンプレートから選んだりすることができます。
このチュートリアルではシンプルなコンタクトフォームを使います。
フォームテンプレートが画面にロードされ、必要なフィールドがすべて追加されます。
次のステップで示すように、画像を追加するためにこのフォームを簡単にカスタマイズすることができる。
WordPressのフォームに画像を挿入する
画像を挿入するには、フォームにコンテンツフィールドを追加する必要があります。コンテンツフィールドを左側のペインから右側にドラッグ＆ドロップするだけです。
フォームの一番上にロゴを追加するので、Contentフィールドを一番上に配置します。
フィールドを追加したら、それをクリックして左側のペインにあるフィールドオプションを開き、ビジュアルエディターを使ってコンテンツを挿入することができます。
次に、ビジュアルエディタのすぐ上にある「メディアを追加」ボタンをクリックします。
ここで、Select Filesボタンをクリックします。
任意の画像ファイルを選択してアップロードし、フォームに挿入することができます。アップロードしたら、altテキストやタイトルなどの詳細を入力できます。そして、一番下にある「フォームに挿入」ボタンをクリックします。
そうすることで、フォーム内に画像が挿入されます。左側のエディタに画像が表示されても、すぐにフォームに表示されるわけではありません。
フォームに画像を表示するには、ビジュアルエディターの下にある更新プレビューボタンを押す必要があります。
コンテンツフィールドを使って画像を追加し、プレビューを更新するとこのようになります。
エディターの右下にある「エディターを拡張」ボタンをクリックすると、その他の書式設定オプションにアクセスすることもできます。
例えば、コンテンツの整列を調整したり、テキストの箇条書きリストを追加したりすることができる。
素晴らしい！フォームに画像を追加したら、フォームビルダーの右上にある保存ボタンを押してください。
あとは、訪問者がアクセスできるように、このフォームをサイトに公開するだけです。
オンラインフォームの公開
WPFormsには簡単な埋め込みウィザードが用意されており、素早く簡単に公開することができます。
フォームビルダーの上部にある埋め込みボタンをクリックします。
すると、フォームを埋め込む場所を選択するモーダルウィンドウが表示されます。ここでは、新しいページに フォームを埋め込むために、新しいページを作成するを 選択します。
その後、ページの名前を入力し、「 Let's Go」をクリックします。
ウィザードがWordPressのエディターに移動し、そこにフォームが埋め込まれます。
準備ができたら、右上の公開ボタンを押してフォームを公開します。
これで完了です！これで画像を追加したフォームの作成は成功です。
WPFormsでグラフィックを追加できることはまだまだたくさんあります。次はいくつかのボーナスヒントを紹介しましょう。
ボーナス：WordPressのフォームで画像を使用するその他の方法
WPFormsの柔軟性は、あなたのフォームにメディアを追加することになると、多くの興味深いことが可能になります。
画像を挿入する別の方法とともに、フォームの見栄えをさらに良くするためのヒントをいくつかご紹介します。
選択したフィールドに画像を追加する
上の例では、フォームに画像をコンテンツとして挿入する方法を紹介しました。
しかし、チェックボックスや複数項目のようなフィールドで選択可能な項目に画像を使用することもできることをご存知ですか？
Multiple Itemsフィールドのオプションに画像を使用するには、そのフィールドオプションでUse Image Choicesトグルボタンをクリックします。
Image Choices（画像選択）をオンにすると、各選択肢の画像をアップロードできるようになります。画像のアップロードボタンをクリックして、簡単に画像を追加することができます。
これを選択肢ごとに繰り返すことで、無味乾燥なフォームをより視覚的に魅力的なものに変えることができる。
実際、選択肢のためにカスタム画像をアップロードすることだけに制限されているわけではありません。WPFormsではあらかじめ用意された膨大なアイコンのライブラリにアクセスすることができます。
選択肢にアイコンを使用するには、アイコンの選択肢を使用するトグルをクリックしてください。
試してみてください。簡単にできますし、訪問者の注意を引く視覚的要素があれば、フォームへの入力がより楽しくなります！
HTMLコードで画像を追加する
以前、コンテンツフィールドを使ってWordPressフォームに画像を挿入する方法を紹介しました。
しかし、HTMLコードで直接作業したい場合は、より技術的に複雑な方法で画像を挿入することもできます。
このためには、フォームに追加したい画像がすでにメディアライブラリにアップロードされていて、そのURLがわかっている必要があります。
そうでない場合は、今すぐアップロードしてURLを取得してください。WordPressのダッシュボードから、メディア " 新しいメディアを追加 をクリックしてください。
メディア・ライブラリー・アップロード・エリアが開きます。ファイルを選択ボタンをクリックして次に進みます。
コンピュータからアップロードしたいファイルを選んでください。ファイルのアップロードが完了すると、そのURLが表示されます。
URLをクリップボードにコピー」ボタンをクリックし、リンクを取得する。
次に、画像を追加したい既存のフォームを開くか、このチュートリアルで以前に紹介したように新しいフォームを作成します。
既存のフォームはWPForms " All Forms で編集できます。
次に、フォームの概要ページから画像を挿入したいフォームを選択します。
フォームビルダー内で、HTMLフィールドをフォームのある右側のエリアにドラッグ＆ドロップします。
これを終えたら、フォーム内に配置したHTMLフィールドをクリックして、左側にあるフィールドオプションを開いてください。
Labelオプションを使ってHTMLフィールドに名前をつけると、フォーム内でそのフィールドをより簡単に識別できるようになりますが、これはフロントエンドでは表示されません。
最後に、挿入したい画像をコードボックスのimgタグ内に追加する必要があります。このフォーマットを使って画像を追加することができます： <img src="[insert your image's file URL]">
コンテンツフィールドとは異なり、HTML フィールドはフォームビルダー内でプレビューを更新するコードを読み込むことができないことに注意してください。しかし、上部にあるプレビューボタンを使えば、フォーム全体のプレビューを見ることができます。
これは、入力したHTMLコードが正しく動作しているかどうかをチェックするのに便利です。
次に、上で下線を引いたのと同じ手順に従って、フォームを公開することができます。
これで完了です！これでWordPressサイトに画像を追加する準備が整いました。
次に、ユーザーが投稿した画像を受け入れる
WPFormsは、訪問者が自分の画像をWordPressにアップロードするのも簡単にしてくれます。
フォームをデザインし、スタイリングする方法をお探しですか？ブロックエディタを使った WPForms のスタイリングに関する記事をご覧ください。このガイドでは、シンプルなコントロールを使って、コードを一切使わずにプロのようにフォームをデザインする方法を紹介します！
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや XでWordPressの無料チュートリアルやガイドをフォローしてください。
こんにちは。
フォームに画像を挿入しようとすると、フォームのサイズに適応せず、いつも大きすぎます。
どうすればもっと "レスポンシブ "になるのか？
ありがとう！
ギョームさん、お手数をおかけして申し訳ありません！画像をレスポンシブにするには、画像サイズを%で追加して、サイズを調整することができます。
しかしながら、可能な限りお客様のご質問にしっかりとお答えするために、お客様が何をお望みなのか、追加情報を添えてサポートチームまでご連絡いただけますでしょうか。
ありがとう！ ᙂ。
ユーザーはどのようにして画像をアップロードするのか？
Sohaib- いい質問ですね！まずコンピュータのストレージに画像を保存し（ウェブカメラで撮影したものも含む）、次に同じ記事を参考にステップ2の手順に従ってください。
お役に立てれば幸いです！ 🙂。
例えば、車や設備を販売するために私が作成したフォームから、顧客が自分の写真をウェブサイトに投稿するにはどうすればいいのでしょうか？
カールさん、こんにちは！顧客に独自の広告を作成させる最も簡単な方法は、Post Submissionsアドオン、特に最近リリースされたリッチテキストフィールドエディタを使用することです。
この2つを組み合わせれば、ユーザーは自分の好きなように広告をデザインし、フォームを送信すれば、直接（または承認待ちで）あなたのサイトに広告が追加されます。
この件に関してさらにご質問がある場合は、有効なサブスクリプションをお持ちであれば、私たちにご連絡ください。そうでない場合は、遠慮なくサポートフォーラムに質問をお寄せください。
ウィジェットフォームの検索ロゴを変更するには？
こんにちは、コーリー！申し訳ありませんが、あなたがおっしゃっていることがよく理解できません。
機会があれば、アクティブなサブスクリプションをお持ちの方は、こちらのチームまでご連絡ください。
そうでない場合は、遠慮なくサポートフォーラムまでご連絡ください。
ありがとう！
HTMLを使ってフォームに画像を追加したのですが、メールに画像が取り込まれません。
ヘッダーに画像をいくつか追加して、フォームの入力とロゴを印刷できるようにしましたが、うまくいきませんでした。
やあ、アマン！
ご連絡ありがとうございます！
HTMLフィールド、セクション分割フィールド、ディスクリプション(この2つは本質的にHTMLフィールドです)を渡さない理由は、これらの領域は完全なHTMLを許可しているため、メール通知が壊れたり、配信の問題を引き起こすようなものが含まれていることが一般的だからです。
しかし、メールに非入力フィールドを含めることができるフィルタがあります。詳細はこちらのチュートリアルをご覧ください。https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/.
また、このようなカスタムコードをサイトに追加する方法の詳細については、https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/（特に簡単なオプションとしては、Code Snippetsプラグインオプションをお勧めします）。
また、PHPを避けたい場合は、通知の本文に必要なテキストを追加することもできます。これは、通常のテキスト、HTML、スマートタグを使用して、よりカスタマイズされた方法で通知コンテンツを構築することで可能です。
このオプションは、おそらく最もコントロールしやすく、通知に含める詳細を正確に選択することができます。
お探しのものと違っていたら申し訳ありません。他に何かご質問があれば教えていただけますか？
ありがとう！
まず写真を撮り、それをデスクトップに保存してから写真を読み込むのではなく、ユーザーがデバイスのカメラを使って写真を撮り、それを1ステップで読み込むことはできますか？理想的には、既存の画像があればライブラリから画像をロードしてほしいのですが、ユーザーが望むのであれば、カメラで撮影してロードすることもできます。WPFormsでこれを行う方法はありますか？
こんにちは、アニル！モバイルデバイスからアクセスした場合、ファイルアップロードフィールドは、ユーザーがカメラから直接画像をアップロードするオプションを提供することができます。ただし、そのユーザーの携帯電話が、ブラウザからカメラにアクセスできるように設定されているかどうかによります。そうでない場合、このオプションは利用できません。
この件に関してさらにご質問がある場合は、有効なサブスクリプションをお持ちであれば、私たちにご連絡ください。そうでない場合は、遠慮なくサポートフォーラムに質問をお寄せください。
こんにちは、
WP-Formsはユーザーの登録データをwoocommerceと同じように扱いますか？もしユーザーが私のeコマースストアからチェックアウトし、アカウントを登録した場合、彼女のデータはwoocommerceで一度、wpフォーム登録で一度、複製されるのでしょうか？
アンさん、私たちのユーザー登録アドオンは既存のユーザーを管理・編集するインターフェイスを提供せず、アカウント作成プロセスのみに焦点を当てています。しかし、WooCommerceとの統合はサポートしていません。
とはいえ、ご質問にできる限り丁寧にお答えし、混乱を避けるため、お手数ですが、弊社チームまでご連絡いただけますでしょうか。
WPFormsのライセンスをお持ちの方は、メールサポートをご利用いただけますので、サポートチケットを送信してください。それ以外の場合は、WPForms Lite WordPress.orgのサポートフォーラムで限定的な無料サポートを提供しています。
ありがとう。
WPFormsはジブメディアに対応していますか？または3Dビューアープラグインからショートコードを埋め込みますか？
メリッサ - 喜んでお手伝いさせていただきます！お時間がありましたら、サポートまでご連絡ください。
WPFormsのライセンスをお持ちの方は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgのサポートフォーラムで限定的な無料サポートを提供しています。
ありがとう🙂。
Wordpressの送信ボタンに画像を追加するには？
今のところ、あなたはアイコンを追加する方法しか示していない。でも、カスタム画像を追加したいんだ。
Aser - 送信ボタンに画像を追加するには、以下のCSSを使用することができます：
.wpforms-submit-container .wpforms-submit {background-image: url('image_url');
background-size: cover;
padding-left: 40px;
}
このようなカスタムCSSをサイトに追加する方法については、こちらのチュートリアルが詳しい。
私のコードは次のようなものだ：
.wpforms-submit-container .wpforms-submit {
background-image: url(‘https://lhamosplane.world/wp-content/uploads/2023/07/th-1787430678.B.png’);
background-size: cover;
padding-left: 40px;
}
しかし、URLは拾われず、つまり画像は表示されません。私が何を求めているのか理解されているかどうかわかりませんが、左側の送信ボタン内の「Submit」テキストの横に.png画像を表示したいのです。
Fantastiqueのアイコンを表示するチュートリアルのコードを見つけたのですが、ほぼ希望通りに表示されるのですが、選択した画像のURLを追加することができません。
.wpforms-form button[type=submit]:hover {
background-color: #ac2428 !important;
}
.wpforms-form button[type=submit]:before {
content: ‘\f1d8’; /* Unicode for icon, be sure to keep the quotes and forward slash */
margin-right: 10px !important; /* Distance between icon and button text */
}
やあ、アッサー - 喜んでお手伝いするよ！お時間がありましたら、サポートまでご連絡ください。
WPFormsのライセンスをお持ちの方は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgのサポートフォーラムで限定的な無料サポートを提供しています。
ありがとう🙂。
フォームの左端に画像を配置するには？
ヘイ、JM - 左側に画像を、右側にフィールドを表示したいのであれば、レイアウトフィールドの使用を検討することができます。
こんにちは、必要なフォームを作るために御社のモジュールを購入できるかどうか質問があります。最初の行には6つのラジオボタンがあり、その上には画像があります（したがって6つの画像）。画像をクリックすると、ポップアップが開き、大きな画像と説明テキストが表示されます。WP-Formsでこのようなことは可能でしょうか？よろしくお願いします。
フランソワーズ - 喜んでお手伝いさせていただきます！お時間がありましたら、サポートチケットをお送りください。