WordPressのブロックエディターに初めて切り替えたとき、画像を挿入したり配置したりする簡単な作業でさえ、違いを感じました。
WPBeginnerで多くのユーザーを支援してきた経験から、Gutenbergへの移行で多くの人が直面する最も一般的な障害の1つであることがわかりました。
良いニュースは、ブロックエディターでの画像操作が、どこを見ればよいか分かれば、実際により直感的になったということです。
このガイドでは、WordPressのブロックエディターで画像をどのように追加し、配置するかを正確に説明します。これらは、WPBeginnerで毎日使用しているのと同じテクニックであり、誰でも理解できる簡単な言葉で説明されています。
💡 クイックアンサー：WordPressブロックエディターで画像を追加・配置する方法
WordPressブロックエディターで画像を配置する6つの方法を以下に示します。
- 画像ブロック（単一画像）：個々の写真を挿入し、さまざまな配置オプションで位置を制御します。
- メディア＆テキストブロック（画像とテキスト）：2列レイアウトを作成し、テキストのすぐ横に画像を配置します。
- ギャラリーブロック（複数画像）：複数の画像をグリッドに配置し、列、配置、切り抜きを調整します。
- ギャラリーブロック（横並び）：2列レイアウトを設定して、2つの画像を並べて表示します。
- カバーブロック（テキストオーバーレイ）：画像の上に直接テキストを配置して、魅力的なヘッダーや行動喚起を作成します。
- 埋め込みブロック（ソーシャルメディア）：Instagramなどのプラットフォームから画像を簡単に挿入し、配置ツールも利用できます。
WordPressエディターでの画像配置
以前は、WordPressはデフォルトのエディターとしてクラシックエディターを使用していました。古いエディターの画像配置に関する特定の問題は、WordPressウェブサイトで正しく配置するのが難しい場合がありました。
画像を左、右、中央に配置するオプションがありましたが、常にうまくいくとは限りませんでした。画像が配置されなかったり、サイズが間違っていたり、見た目が悪かったりすることがありました。
WordPressがバージョン5.0でGutenbergブロックエディターを導入したとき、それは初心者とプロの両方にとって大きなアップグレードでした。
古いクラシックエディターを使用したことがあるなら、画像を完璧に配置するのがどれほどイライラしたか覚えているでしょう。ブロックエディターはそれらすべてを修正しました。
今では、画像を挿入、移動、配置するのが非常に簡単になりました。フォーマットに手間をかける代わりに、コードを一行も書かずに、ブログの美しくプロフェッショナルなレイアウトを作成する柔軟性が得られます。
次のセクションでは、新しいエディターで画像を簡単に追加および配置して、WordPressブログの投稿やページの美しいレイアウトを作成する方法を説明します。
ここでは、共有するすべてのトピックの簡単な概要を紹介します。
さあ、始めましょう！
WordPressで画像を挿入して配置する方法
エディターには、WordPressの投稿やページに画像を追加するために使用できるいくつかのブロックが用意されています。このガイドでは、最も人気のあるものに焦点を当てます。
- 画像
- ギャラリー
- メディアとテキスト
- カバー
まずはシンプルな画像ブロックから始めましょう。
投稿エディターでプラス（+）アイコン（ブロックインサーターボタン）をクリックするか、/imageと入力して画像ブロックを挿入できます。
これにより、空白の画像ブロック内の3つのボタンがアクティブになります。
コンピューターから画像をアップロードしたり、メディアライブラリから既にアップロードされた画像を選択したり、画像ファイルのURLを提供して画像を挿入したりできるようになりました。
次に、「アップロード」ボタンをクリックし、コンピューターからアップロードしたい画像を選択します。
画像を選択するとすぐに、WordPressは画像をメディアライブラリにアップロードし、画像ブロックに挿入します。
画像の上にツールバーが表示され、右側の列に画像ブロックの設定が表示されることに気づくでしょう。
画像を配置するには、画像の上部に表示されるツールバーを使用します。
画像ブロックにはいくつかの配置オプションがあります。
WordPressテーマによっては、以下のすべてが表示される場合があります。
| 配置 | 説明 | 視覚効果 |
|---|---|---|
| なし | デフォルトの配置で、画像をテキストと同じ行に配置します。 | 画像はコンテンツの流れの中に配置され、テキストの折り返しはありません。 |
| 左揃え | 画像をコンテンツエリアの左端に寄せます。 | 画像の右側にテキストが回り込みます。 |
| 中央揃え | 画像をメインコンテンツ列の中央に水平に配置します。 | テキストの折り返しはなく、画像は単独で表示されます。 |
| 右揃え | 画像をコンテンツエリアの右端に寄せます。 | 画像の左側にテキストが回り込みます。 |
| 幅広 | 画像をメインコンテンツエリアよりも幅広く表示します。 | 画像が通常のコンテンツマージンを超えて広がり、ダイナミックで没入感のある見た目を実現します。 |
| フル幅 | 画像をブラウザの幅全体に引き伸ばします。 | 画像がブラウザウィンドウの端から端まで広がり、ヒーローセクションに最適です。 |
「中央揃え」ボタンをクリックして、投稿内の画像を中央に配置してください。
テキストの隣に画像をきれいに配置する方法
多くの場合、画像をテキストの横にきれいに配置する必要があるでしょう。WordPressのブロックエディターを使えば、メディア＆テキストブロックで簡単に実現できます。
このブロックは基本的に、画像（メディア）用の1つのカラムと、テキストコンテンツ用の2番目のカラムという2つのカラム領域を追加します。
「アップロード」ボタンをクリックして、画像をアップロードするだけです。
次に、その横に表示したいテキストを追加できます。
より長い説明が必要な場合は、自由に入力してください。
メディアとテキストブロックは、両方の列のコンテンツに対応するために、全体の高さを自動的に調整します。
WordPressでギャラリー画像の配置方法
WordPressブロックエディターには、画像ギャラリーを追加するためのブロックも含まれています。これにより、画像を簡単にグリッド状に表示できます。
デフォルトでは、ブロックは画像をバランスの取れたレイアウトで表示しようとします。複数の画像がある場合は、多くの場合3列を使用します。
そのため、画像ギャラリーは次のようになります。
スライダーを左右に動かすことで、ギャラリーのレイアウトを調整できます。または、ボックスに希望するカラム数を直接入力することもできます。
ここでは、4列レイアウトを試しました。
画像サイズの差によってギャラリーが見栄えしない場合は、配置を調整する必要があります。
投稿エディターで、ギャラリーをクリックできます。次に、「親ブロックを選択：ギャラリー」アイコンをクリックして、カスタマイズパネルを開くことができます。
ここから、「画像をトリミングしてフィットさせる」オプションを有効にしましょう。
これにより、ギャラリー内のすべての画像が同じサイズになり、より整然としたグリッドが作成されます。ギャラリー全体を中央揃えするには、ブロックツールバーのアライメントオプションを使用します。
WordPressのデフォルトのギャラリー機能はかなり優れています。しかし、WordPressの投稿やページに写真ギャラリーを頻繁に追加する場合は、Envira Galleryのような写真ギャラリープラグインの使用を検討してください。
これらのプラグインは、フォトギャラリーの画像を配置したり、ポップアップで表示したり、さまざまなスタイルで表示したりするためのオプションを増やしてくれます。
詳細については、WordPressで画像ギャラリーを追加する方法に関するチュートリアルをご覧ください。
WordPressで画像を横並びにする方法
WordPressの投稿に2つの画像を並べて表示する最も簡単な方法は、両方の画像をギャラリーブロックに追加することです。
ギャラリーブロックのカスタマイズオプションを開くには、ギャラリーをクリックし、次に「親ブロックの選択：ギャラリー」アイコンを再度クリックします。
これにより、右側のカスタマイズパネルが開きます。
ここから、ギャラリーブロックのレイアウトを2列に選択するだけで、両方の画像を隣り合わせに表示できます。
また、「画像を切り抜いてフィットさせる」オプションを有効にすると、両方の画像が同じサイズになり、より一貫性のある見た目になります。ギャラリーブロック自体を中央揃えするには、ツールバーのアライメントオプションを使用します。
WordPressで画像をさらに追加・配置する方法
すでに説明したブロック以外にも、カバーブロックを使用できます。
その主な目的は、画像の上に直接テキストを配置できるようにすることです。これは、目を引くセクションヘッダーや行動喚起を作成するのに最適です。
カバーブロックには、通常の画像と同じ配置オプションがあります。
テキストを読みやすくするためにカラーオーバーレイを追加したり、「固定背景」オプションを選択して、クールなパララックススクロール効果を作成したりすることもできます。
カバー画像の使い方の詳細については、WordPressでのアイキャッチ画像とカバー画像の違いに関する記事をご覧ください。
ここまで、投稿やページに直接画像を挿入する方法について説明しました。サードパーティのサイトからの画像はどうでしょうか？
ブロックエディターでも簡単にできます。人気のあるソーシャル共有サイト（Instagram、Facebook、Flickr、Imgur、Photobucketなど）の画像を含むコンテンツを埋め込むことができます。
例えば、Instagramの写真を挿入したい場合は、投稿エディターにInstagramブロックを追加し、共有したい投稿のURLを入力するだけです。
次に、ツールバーで目的の配置をクリックするだけです。埋め込みブロックを使用すると、WordPressに動画を簡単に埋め込むこともできます。
詳細については、WordPressにInstagramを埋め込む方法に関するガイドをご覧ください。
ボーナスのヒント：WordPressで動画を中央揃えする方法
画像と同様に、動画の配置を変更したい場合もあります。幸いなことに、WordPressの動画ブロックは、画像と同じ配置ツールを使用します。
YouTube動画を埋め込む場合でも、独自の動画をアップロードする場合でも、動画ブロックをクリックするだけです。上部に使い慣れた配置ツールバーが表示されます。
「中央揃え」ボタンをクリックするだけで、コンテンツエリア全体に動画プレーヤーを中央揃えできます。これにより、ページのデザインがよりすっきりと洗練されたものになります。
詳細については、WordPressで動画を中央揃えする方法に関するガイドをお読みください。
WordPressでの画像の配置に関するよくある質問
WordPressで画像を配置することについて、読者からよく寄せられる質問をいくつかご紹介します。
WordPressに最適な画像ファイルの種類は何ですか？
写真の場合、品質とファイルサイズの小ささのバランスが取れているため、通常はJPEGが最適です。ロゴのように透明な背景が必要な場合は、PNG形式を使用する必要があります。
モバイルデバイスで画像をレスポンシブにするにはどうすればよいですか？
WordPressのブロックエディターがこれを自動的に処理します。追加した画像はすべてレスポンシブになり、あらゆるデバイスの画面サイズに合わせて調整されます。
画像の周りにテキストを回り込ませることはできますか？
もちろんです。画像ブロックを追加し、ツールバーの「左寄せ」または「右寄せ」オプションを使用するだけです。その後の段落テキストは自動的に画像に回り込みます。
画像にキャプションを追加するにはどうすればよいですか？
画像が挿入されると、そのすぐ下に「キャプションを追加」フィールドが表示されます。この領域をクリックして、キャプションに使用したいテキストを入力するだけです。
ギャラリー画像が正しく並ばないのはなぜですか？
これは、ギャラリー内の画像が高さと幅で異なる場合に頻繁に発生します。これを修正するには、ギャラリーブロックを選択し、右側の設定パネルで「画像をトリミングして合わせる」オプションを有効にします。これにより、すべてのギャラリー画像のサイズが均一になります。
この記事が、WordPressブロックエディターで画像を簡単に追加および配置する方法を学ぶのに役立ったことを願っています。また、WordPressでブロックの高さと幅を変更する方法やよくあるGutenbergの質問とその回答に関するガイドもご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
イジー・ヴァネック
Gutenbergは私にとってまだ大きな未知数です。WordPress 6.4が登場してからこれらのページを読み始めるまで、Gutenbergを発見し始めたばかりであることを認めます。例えば、しばらくの間、画像とテキストを隣り合わせに配置する方法がわかりませんでした（Elementorでは非常に簡単なことでした）。この記事を読んだ後、Gutenbergで少しだけできるようになりました。ありがとうございます。
WPBeginnerサポート
You’re welcome
管理者
フレッド・デュガス
これはIframeでも機能しますか？カスタムHTMLブロックを編集してiframeを追加し、保存すると、他のすべてのブロックが中央揃えされているのに、追加したものがすべて左揃えになりますか？
WPBeginnerサポート
iframeによりますが、通常iframeには自動的な配置オプションはありません。
管理者
ハリー・ゴールドハーゲン
自動生成されるブログページやカテゴリページに表示されるアイキャッチ画像の配置をどのように調整しますか？画像をクリックすると投稿が開きますが、投稿設定を入力する際にアイキャッチ画像の配置設定が見当たりません。
WPBeginnerサポート
おすすめ画像については、テーマによって決まります。お使いの特定のテーマのサポートに確認すれば、おすすめ画像の配置について支援を得られるはずです。
管理者
ジョン・マッキンタイア
サイト上のすべてのキャプションを同じサイズ、同じフォントにしたいのですが、どうすれば実現できますか？
WPBeginnerサポート
テーマに特別な設定がない限り、画像キャプションのみで、別のテキストブロックではない場合、ほとんどのテーマでテキストは均一になるはずです。
管理者
シャロン
画像をアップロードするたびに中央揃えにしたいのですが。画像をアップロードするたびに中央揃えにするには、画像を追加するたびに個別に設定する必要があり、非常に時間がかかります。デフォルトで中央揃えに変更できますか？
WPBeginnerサポート
現時点では、初心者におすすめできる簡単な方法はありませんが、おすすめできるものがないか引き続き注視していきます。
管理者
アマンダ・A。
ブロックエディターを使用して2つの画像を並べて表示しようとしています。2列機能を使用し、各列に画像ブロックを使用しました。デザイン中は正しく表示されますが、「新しいタブでプレビュー」すると、並列の列がなくなり、画像が積み重ねられます。何が間違っていますか？これは一般的な問題ですか？どうすれば修正できますか？
WPBeginnerサポート
画像が大きすぎないか確認してください。テーマによっては、並べて表示できない場合があります。これが最も一般的な原因です。
管理者
シェリル・ザイゼット
新しいブロックエディターの使い方を学ぼうとしています。ブロックを追加ボタンをクリックして画像を選択し、写真を挿入しようとすると、「URLから挿入」オプションしか表示されず、メディアライブラリから写真を追加する方法が見つかりません。助けていただけますか？
WPBeginnerサポート
メディアライブラリから画像を選択するためのアップロードボタンの横にあるテキストを注意深く確認する必要があります。
管理者
ルーサー・マッキノン
私は長年ブログを公開してきました。新しいシステムの導入は恐ろしいものだと学びました。写真を挿入するような簡単な作業でさえ、今は非常に困難です。
WPBeginnerサポート
Hopefully, once you are comfortable with the new system it becomes easier for you
管理者
病棟
素晴らしい情報ですが、バックエンドでは機能するのに、フロントエンドでは常に左揃えになります。これは私のElementorテンプレートに関連している可能性がありますか？
WPBeginnerサポート
ページビルダーを使用している場合、ページビルダーがスタイルを上書きしている可能性があります。詳細については、ビルダーのサポートにお問い合わせください。
管理者
タンメイ
驚くほど素晴らしい機能ですが、HTMLエディターを使うのは誰にでもできることではありません。
WPBeginnerサポート
Glad you like the block editor feature
管理者
ルイ・アデム
昨日WordPressを使い始めました。全くの初心者ですが、wpbeginnerが「補助輪」を提供してくれたおかげで、すぐに始められました。このウェブサイトの教育内容は非常に価値があります。本当に感謝しています。
WPBeginnerサポート
Glad we could help get you started
管理者
バッドリー・ドローン・ウルフ
Thank you for this little gold nugget – really struggling getting in to the “new” way of handling my blog and almost giving up and searching for other alternatives….
WPBeginnerサポート
私たちの記事がお役に立てて嬉しいです。別の役立つ記事として、以下の記事もご覧ください。
https://014.leahstevensyj.workers.dev/beginners-guide/how-to-use-the-new-wordpress-block-editor/
管理者
カレン
「インライン画像」について言及されていますが、そのようなブロックが見当たりません。この記事はしばらく前に書かれたものですが、2020年1月に更新されたはずです。そのブロックはなくなったのでしょうか、それともこの記事から削除するのを忘れてしまったのでしょうか？あるいは、より良い質問は、段落ブロックや見出しブロックのような別のブロック内にインライン画像を追加するにはどうすればよいですか？
WPBeginnerサポート
インライン画像ブロックは現在利用できませんが、通常はテキストと画像ブロックまたは標準の画像ブロックでフォーマットを再現できます。
管理者
テッド・ストラッツ
メディアから画像を追加すると、画像を左揃えまたは右揃えするための画像ツールバーが表示されません。画像のサイズは変更できます。
WPBeginnerサポート
現在の設定ではなく、ページの上部に配置するように設定していないことを確認する必要があります。
管理者
ハンナ
こんにちは、ブロックエディターですべての画像を配置しましたが、プレビューするまで問題なく表示されますか？
その後、画像によっては他の画像よりもはるかに大きくなり、2つの画像が1つの画像の上に並んでいる状態になりました。すべてがランダムに移動してしまいました！
公開しても、すべて間違っていました。助けていただけると嬉しいです。ありがとうございます！
WPBeginnerサポート
スタイリングの競合がないことを確認するために、テーマのサポートに問い合わせることをお勧めします。それ以外の場合は、プラグインを無効にして、プラグインの競合がないか確認することもできます。
管理者
ハリー
こんにちは、画像で説明されているように、ショートコードを横並びに配置したいのですが、可能でしょうか？よろしくお願いします。
WPBeginnerサポート
ショートコード自体によります
管理者
アポ
こんにちは、
カバーブロックのタイトルの配置はどのように調整しますか？
バーにはそのオプションがありますが、なぜかカバーブロックをクリックしてもテキスト配置オプションがありません。
何かアイデアはありますか？
素晴らしい記事をありがとうございます。
WPBeginnerサポート
要素の上に浮いているのではなく、ページの最上部を確認してください。そこが配置オプションのもう一つの場所になります。
管理者
シェリル
画像をクリック可能なリンクにするにはどうすればよいですか？チュートリアルを探していましたが、すべて以前のGutenbergブロックに基づいているようでしたが、それは変更され、チュートリアルはブロックと一致しなくなりました。
WPBeginnerサポート
画像にリンクを追加する場所については、上部のツールバーを確認してください。
管理者
アレハンドロ
こんにちは、「メディア＆テキストブロック」を使用する場合、画像キャプションを画像の下に直接記述することは可能ですか？
WPBeginnerサポート
スタイリングは特定のテーマによって異なりますが、おそらく
管理者
ランサーカインド
いいですね！どうもありがとうございます！
WPBeginnerサポート
You’re welcome
管理者
ピート・ニューマン
Gutenbergとテーマの間には互換性の問題が存在します。Gutenbergと互換性のある（そしてGutenbergの全機能が利用できる）テーマのリストはありますか？
よろしくお願いします。
Pete
WPBeginnerサポート
テーマが更新されるにつれて、これらの問題は少なくなるはずですが、特にGutenbergフレンドリーなテーマについては、こちらのリストをご覧ください：https://014.leahstevensyj.workers.dev/showcase/gutenberg-friendly-wordpress-themes/
管理者
ピート・ニューマン
長年WordPressを使用してきましたが、最近は少しご無沙汰していました。Gutenbergは頭が混乱します。これらの指示に従っても、画像/テキストブロックで画像を配置することができません。プレビューに行くと、画像はページの一番左に配置され、まったくマージンがありません。何か解決策はありますか？
よろしくお願いします！！
WPBeginnerサポート
設定が無視されている場合は、テーマのサポートに連絡して、スタイルが上書きされていないことを確認する必要があるかもしれません。クラシックエディターに戻したい場合は、こちらのガイドをご覧ください: https://014.leahstevensyj.workers.dev/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/
管理者
ピート・ニューマン
ありがとうございます！素晴らしいサポートです。クラシックエディタープラグインとGutenberg無効化プラグインを追加して、やりたいことの近似を作成することができました。Gutenbergが意図したとおりに機能し、開発者が追いつくのを楽しみにしています。素晴らしいアイデアです。
WPBeginnerサポート
Glad we could help
ジミー
しかし、ギャラリーで画像をリンクすることはできないのですか？それではギャラリー機能の魅力が半減しますね。
WPBeginnerサポート
If each image needs its own link then setting up columns would likely be what you’re looking to do
管理者
ロクサーナ・スネデカー
What is the best way to add multiple images at once, I can’t seem to add more than one at the time
WPBeginnerサポート
同じエリアに複数の画像を追加したい場合は、ギャラリーブロックを確認して、1つのセクションに複数の画像を追加してください。
管理者
アランジャ
「ビジュアルエディター」を経由せずに、「コードエディター」に直接画像を挿入するにはどうすればよいですか？
WPBeginnerサポート
ユーザー > プロフィールでビジュアルエディターを無効にすることはできますが、そうすると他のセクションでビジュアルエディターを使用できなくなります。
管理者
アリス
エディターでは画像をすべて正しく中央揃えにしているのですが、プレビューや公開済みの投稿では、どんな設定にしても左揃えになってしまいます。原因は何だと思われますか？本当に困っています！
WPBeginnerサポート
テーマが設定したスタイルを上書きしている可能性があります。テーマのサポートに問い合わせれば、対応してもらえるはずです。
管理者
アン
ファイル（PDF）の隣に画像を表示したいのですが、すべて同じ行に表示できますか？1つのブロックで可能ですか、それとも2つ作成する必要がありますか？よろしくお願いします！
WPBeginnerサポート
コンテンツを分割して、そのようにコンテンツを表示できるように、カラムブロックを追加したいと思うでしょう。
管理者
スージー・アルガー
ファイルに表示される画像やダウンロードのキャプションを作成しています。画像がファイル内にある場合、どこに行けばよいかわかりません。
WPBeginnerサポート
投稿またはページに画像を追加しようとしている場合は、通常、画像ブロックを追加してから、ブロックで使用したいファイルを選択します。
管理者
ロクサーナ・サフィプール
では、「配置なし」はどうすればよいですか？画像が左側にあり、テキストが周りに折り返されない状態です。これは、配置なしオプションで簡単でしたが、現在はなくなっています。元に戻してください！画像を左側（中央ではない）に配置し、隣にテキストがないようにしようとしていますが、テキストが自動的に折り返されてしまいます！
WPBeginnerサポート
あなたが求めていることのように聞こえる場合、画像のアライメントを特に設定しない限り、画像は自動的にそのように設定されるはずです。
管理者
ベン
これについて簡単なフォローアップです。私も気になっていました。簡単な答えですが、設定を探していたので、あまり明らかではありませんでした。選択した配置ボタンをもう一度押すと、配置がオフになり、デフォルトの配置なしに戻ります。
ジェシー
素晴らしい投稿で非常に役立ちました。WordPress 5.1にアップグレードしましたが、画像をURLにリンクする問題が発生しました。助けていただけますか？
WPBeginnerサポート
ブロックエディターを使用している場合、画像ブロックの設定に「リンク設定」セクションがあり、画像がどこにリンクするかを設定できます。
管理者