WordPressのブロックエディターに初めて切り替えたとき、画像を挿入したり配置したりする簡単な作業でさえ、違いを感じました。
WPBeginnerで多くのユーザーを支援してきた経験から、Gutenbergへの移行で多くの人が直面する最も一般的な障害の1つであることがわかりました。
良いニュースは、ブロックエディターでの画像操作が、どこを見ればよいか分かれば、実際により直感的になったということです。
このガイドでは、WordPressのブロックエディターで画像をどのように追加し、配置するかを正確に説明します。これらは、WPBeginnerで毎日使用しているのと同じテクニックであり、誰でも理解できる簡単な言葉で説明されています。
WordPressエディターでの画像配置
以前は、WordPressはデフォルトのエディターとして編集ボタン付きのテキストエリアを使用していました。古いエディターの特に問題だったのは画像の配置で、WordPressウェブサイトで正しく配置するのが難しい場合がありました。
画像を左、右、中央に配置するオプションがありましたが、常にうまくいくとは限りませんでした。画像が配置されなかったり、サイズが間違っていたり、見た目が悪かったりすることがありました。
WordPress 5.0では、Gutenbergブロックエディタと呼ばれる新しいWordPress投稿エディタが導入されました。これにより、画像の配置の問題を含む、古いエディタのいくつかの問題が解決されました。
次のセクションでは、新しいエディターで画像を簡単に追加および配置して、WordPressブログの投稿やページの美しいレイアウトを作成する方法を説明します。
ここでは、共有するすべてのトピックの簡単な概要を紹介します。
- WordPressで画像を挿入して配置する方法
- テキストの隣に画像をきれいに配置する方法
- WordPressでギャラリー画像の配置方法
- WordPressで画像を横並びにする方法
- WordPressで画像をさらに追加・配置する方法
- ボーナスのヒント：WordPressで動画を中央揃えする方法
- WordPressでの画像の配置に関するよくある質問
さあ、始めましょう！
WordPressで画像を挿入して配置する方法
エディターには、WordPressの投稿やページに画像を追加するために使用できるいくつかのブロックが用意されています。このガイドでは、最も人気のあるものに焦点を当てます。
- 画像
- ギャラリー
- メディアとテキスト
- カバー
まずはシンプルな画像ブロックから始めましょう。
「新しいブロックを追加」ボタンをクリックするか、投稿エディターに/imageと入力して画像ブロックを挿入できます。
これにより、空白の画像ブロック内の3つのボタンがアクティブになります。
コンピューターから画像をアップロードしたり、メディアライブラリから既にアップロードされた画像を選択したり、画像ファイルのURLを提供して画像を挿入したりできます。
次に、「アップロード」ボタンをクリックし、コンピューターからアップロードしたい画像を選択します。
画像を選択するとすぐに、WordPressは画像をメディアライブラリにアップロードし、画像ブロックに挿入します。
画像の上にツールバーが表示され、右側の列に画像ブロックの設定が表示されることに気づくでしょう。
画像を配置するには、画像の上部に表示されるツールバーを使用します。
画像ブロックには、いくつかの配置オプションがあります。WordPressテーマによっては、以下のすべてが表示される場合があります。
- なし：デフォルトの配置で、画像をテキストと同じ行に配置します。
- 左揃え: 画像を左に寄せ、テキストが右側に回り込むようにします。
- 中央揃え: 画像をメインコンテンツ列の中央に配置します。
- 右寄せ: 画像を右に配置し、テキストが左側に回り込むようにします。
- ワイド幅: メインコンテンツエリアよりも画像を広く表示し、よりダイナミックな見た目にします。
- 全幅: 画像をブラウザの端から端まで、ブラウザ全体に広げます。
「中央揃え」ボタンをクリックして、投稿内の画像を中央に配置してください。
テキストの隣に画像をきれいに配置する方法
多くの場合、画像をテキストの横にきれいに配置する必要があるでしょう。WordPressのブロックエディターを使えば、メディア＆テキストブロックで簡単に実現できます。
このブロックは基本的に、画像（メディア）用の1つのカラムと、テキストコンテンツ用の2番目のカラムという2つのカラム領域を追加します。
「アップロード」ボタンをクリックして、画像をアップロードするだけです。
次に、その横に表示したいテキストを追加できます。
より長い説明が必要な場合は、自由に入力してください。
画像の配置は、次の列のテキストの高さに合わせて自動的に調整されます。
WordPressでギャラリー画像の配置方法
WordPressのブロックエディターには、画像ギャラリーを追加するためのブロックも含まれています。これにより、画像を簡単にグリッド状に表示できます。
ギャラリーブロックには、ツールバーに同様の配置オプションがあります。デフォルトでは、ブロックは画像を3列レイアウトで表示します。
そのため、画像ギャラリーは次のようになります。
スライダーを左右に動かすことで、ギャラリーのレイアウトを調整できます。または、ボックスに希望するカラム数を直接入力することもできます。
ここでは、4列レイアウトを試しました。
画像サイズの差によってギャラリーが見栄えしない場合は、配置を調整する必要があります。
投稿エディターで、ギャラリーをクリックできます。次に、「親ブロックを選択：ギャラリー」アイコンをクリックして、カスタマイズパネルを開くことができます。
ここから、「画像をトリミングしてフィットさせる」オプションを有効にしましょう。
そのようにすると、WordPressはギャラリーを中央に調整します。
WordPressのデフォルトのギャラリー機能はかなり優れています。しかし、WordPressの投稿やページに写真ギャラリーを頻繁に追加する場合は、写真ギャラリープラグインを検討してください。例えば、Envira Galleryなどです。
これらのプラグインは、フォトギャラリーの画像を配置したり、ポップアップで表示したり、さまざまなスタイルで表示したりするためのオプションを増やしてくれます。
詳細については、WordPressで画像ギャラリーを作成する方法に関するチュートリアルをご覧ください。
WordPressで画像を横並びにする方法
WordPressの投稿に2つの画像を並べて表示する最も簡単な方法は、両方の画像をギャラリーブロックに追加することです。
ギャラリーブロックのカスタマイズオプションを開くには、ギャラリーをクリックし、次に「親ブロックの選択：ギャラリー」アイコンを再度クリックします。
これにより、右側のカスタマイズパネルが開きます。
ここから、ギャラリーブロックのレイアウトを2列に選択するだけで、両方の画像を隣り合わせに表示できます。
「画像をトリミングしてフィットさせる」オプションを有効にすると、両方の画像が同じサイズになり、中央揃えになります。
WordPressで画像をさらに追加・配置する方法
すでに説明したブロック以外にも、カバーブロックを使用できます。
その主な目的は、画像の上に直接テキストを配置できるようにすることです。これは、目を引くセクションヘッダーや行動喚起を作成するのに最適です。
カバーブロックには、通常の画像と同じ配置オプションがあります。
テキストを読みやすくするためにカラーオーバーレイを追加したり、「固定背景」オプションを選択して、クールなパララックススクロール効果を作成することもできます。
カバー画像の使い方の詳細については、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
管理者
fred dugas
これはIframeでも機能しますか？カスタムHTMLブロックを編集してiframeを追加し、保存すると、他のすべてのブロックが中央揃えされているのに、追加したものがすべて左揃えになりますか？
WPBeginnerサポート
iframeによりますが、通常iframeには自動的な配置オプションはありません。
管理者
ハリー・ゴールドハーゲン
自動生成されるブログページやカテゴリページに表示されるアイキャッチ画像の配置をどのように調整しますか？画像をクリックすると投稿が開きますが、投稿設定を入力する際にアイキャッチ画像の配置設定が見当たりません。
WPBeginnerサポート
おすすめ画像については、テーマによって決まります。お使いの特定のテーマのサポートに確認すれば、おすすめ画像の配置について支援を得られるはずです。
管理者
ジョン・マッキンタイア
サイト上のすべてのキャプションを同じサイズ、同じフォントにしたいのですが、どうすれば実現できますか？
WPBeginnerサポート
テーマに特別な設定がない限り、画像キャプションのみで、別のテキストブロックではない場合、ほとんどのテーマでテキストは均一になるはずです。
管理者
シャロン
画像をアップロードするたびに中央揃えにしたいのですが。画像をアップロードするたびに中央揃えにするには、画像を追加するたびに個別に設定する必要があり、非常に時間がかかります。デフォルトで中央揃えに変更できますか？
WPBeginnerサポート
現時点では、初心者におすすめできる簡単な方法はありませんが、おすすめできるものがないか引き続き注視していきます。
管理者
Amanda A.
ブロックエディターを使用して2つの画像を並べて表示しようとしています。2列機能を使用し、各列に画像ブロックを使用しました。デザイン中は正しく表示されますが、「新しいタブでプレビュー」すると、並列の列がなくなり、画像が積み重ねられます。何が間違っていますか？これは一般的な問題ですか？どうすれば修正できますか？
WPBeginnerサポート
画像が大きすぎないか確認してください。テーマによっては、並べて表示できない場合があります。これが最も一般的な原因です。
管理者
Sheryl Zeiset
新しいブロックエディターの使い方を学ぼうとしています。ブロックを追加ボタンをクリックして画像を選択し、写真を挿入しようとすると、「URLから挿入」オプションしか表示されず、メディアライブラリから写真を追加する方法が見つかりません。助けていただけますか？
WPBeginnerサポート
メディアライブラリから画像を選択するためのアップロードボタンの横にあるテキストを注意深く確認する必要があります。
管理者
Luther Mckinnon
私は長年ブログを公開してきました。新しいシステムの導入は恐ろしいものだと学びました。写真を挿入するような簡単な作業でさえ、今は非常に困難です。
WPBeginnerサポート
Hopefully, once you are comfortable with the new system it becomes easier for you
管理者
病棟
素晴らしい情報ですが、バックエンドでは機能するのに、フロントエンドでは常に左揃えになります。これは私のElementorテンプレートに関連している可能性がありますか？
WPBeginnerサポート
ページビルダーを使用している場合、ページビルダーがスタイルを上書きしている可能性があります。詳細については、ビルダーのサポートにお問い合わせください。
管理者
tanmay
驚くほど素晴らしい機能ですが、HTMLエディターを使うのは誰にでもできることではありません。
WPBeginnerサポート
Glad you like the block editor feature
管理者
Louie Adem
昨日WordPressを使い始めました。全くの初心者ですが、wpbeginnerが「補助輪」を提供してくれたおかげで、すぐに始められました。このウェブサイトの教育内容は非常に価値があります。本当に感謝しています。
WPBeginnerサポート
Glad we could help get you started
管理者
BadlyDrawmWolf
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://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/
管理者
Karen
「インライン画像」について言及されていますが、そのようなブロックが見当たりません。この記事はしばらく前に書かれたものですが、2020年1月に更新されたはずです。そのブロックはなくなったのでしょうか、それともこの記事から削除するのを忘れてしまったのでしょうか？あるいは、より良い質問は、段落ブロックや見出しブロックのような別のブロック内にインライン画像を追加するにはどうすればよいですか？
WPBeginnerサポート
インライン画像ブロックは現在利用できませんが、通常はテキストと画像ブロックまたは標準の画像ブロックでフォーマットを再現できます。
管理者
Ted Strutz
メディアから画像を追加すると、画像を左揃えまたは右揃えするための画像ツールバーが表示されません。画像のサイズは変更できます。
WPBeginnerサポート
現在の設定ではなく、ページの上部に配置するように設定していないことを確認する必要があります。
管理者
ハンナ
こんにちは、ブロックエディターですべての画像を配置しましたが、プレビューするまで問題なく表示されますか？
その後、画像によっては他の画像よりもはるかに大きくなり、2つの画像が1つの画像の上に並んでいる状態になりました。すべてがランダムに移動してしまいました！
公開しても、すべて間違っていました。助けていただけると嬉しいです。ありがとうございます！
WPBeginnerサポート
スタイリングの競合がないことを確認するために、テーマのサポートに問い合わせることをお勧めします。それ以外の場合は、プラグインを無効にして、プラグインの競合がないか確認することもできます。
管理者
ハリー
こんにちは、画像で説明されているように、ショートコードを横並びに配置したいのですが、可能でしょうか？よろしくお願いします。
WPBeginnerサポート
ショートコード自体によります
管理者
Ap
こんにちは、
カバーブロックのタイトルの配置はどのように調整しますか？
バーにはそのオプションがありますが、なぜかカバーブロックをクリックしてもテキスト配置オプションがありません。
何かアイデアはありますか？
素晴らしい記事をありがとうございます。
WPBeginnerサポート
要素の上に浮いているのではなく、ページの最上部を確認してください。そこが配置オプションのもう一つの場所になります。
管理者
シェリル
画像をクリック可能なリンクにするにはどうすればよいですか？チュートリアルを探していましたが、すべて以前のGutenbergブロックに基づいているようでしたが、それは変更され、チュートリアルはブロックと一致しなくなりました。
WPBeginnerサポート
画像にリンクを追加する場所については、上部のツールバーを確認してください。
管理者
Alejandro
こんにちは、「メディア＆テキストブロック」を使用する場合、画像キャプションを画像の下に直接記述することは可能ですか？
WPBeginnerサポート
スタイリングは特定のテーマによって異なりますが、おそらく
管理者
ランサーカインド
いいですね！どうもありがとうございます！
WPBeginnerサポート
You’re welcome
管理者
Pete Newman
Gutenbergとテーマの間には互換性の問題が存在します。Gutenbergと互換性のある（そしてGutenbergの全機能が利用できる）テーマのリストはありますか？
よろしくお願いします。
Pete
WPBeginnerサポート
テーマが更新されるにつれて、この問題は少なくなるはずですが、特にGutenbergフレンドリーなテーマについては、こちらのリストをご覧ください：https://www.wpbeginner.com/showcase/gutenberg-friendly-wordpress-themes/
管理者
Pete Newman
長年WordPressを使用してきましたが、最近は少しご無沙汰していました。Gutenbergは頭が混乱します。これらの指示に従っても、画像/テキストブロックで画像を配置することができません。プレビューに行くと、画像はページの一番左に配置され、まったくマージンがありません。何か解決策はありますか？
よろしくお願いします！！
WPBeginnerサポート
設定が無視されている場合は、テーマのサポートに確認して、テーマがスタイリングを上書きしていないことを確認する必要があるかもしれません。クラシックエディターに戻したい場合は、こちらのガイドをご覧ください: https://www.wpbeginner.com/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/
管理者
Pete Newman
ありがとうございます！素晴らしいサポートです。クラシックエディタープラグインとGutenberg無効化プラグインを追加して、やりたいことの近似を作成することができました。Gutenbergが意図したとおりに機能し、開発者が追いつくのを楽しみにしています。素晴らしいアイデアです。
WPBeginnerサポート
Glad we could help
Jimmie
しかし、ギャラリーで画像をリンクすることはできないのですか？それではギャラリー機能の魅力が半減しますね。
WPBeginnerサポート
If each image needs its own link then setting up columns would likely be what you’re looking to do
管理者
Roxana Snedeker
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つのセクションに複数の画像を追加してください。
管理者
Aaranja
「ビジュアルエディター」を経由せずに、「コードエディター」に直接画像を挿入するにはどうすればよいですか？
WPBeginnerサポート
ユーザー > プロフィールでビジュアルエディターを無効にすることはできますが、そうすると他のセクションでビジュアルエディターを使用できなくなります。
管理者
アリス
エディターでは画像をすべて正しく中央揃えにしているのですが、プレビューや公開済みの投稿では、どんな設定にしても左揃えになってしまいます。原因は何だと思われますか？本当に困っています！
WPBeginnerサポート
テーマが設定したスタイルを上書きしている可能性があります。テーマのサポートに問い合わせれば、対応してもらえるはずです。
管理者
アン
ファイル（PDF）の隣に画像を表示したいのですが、すべて同じ行に表示できますか？1つのブロックで可能ですか、それとも2つ作成する必要がありますか？よろしくお願いします！
WPBeginnerサポート
コンテンツを分割して、そのようにコンテンツを表示できるように、カラムブロックを追加したいと思うでしょう。
管理者
Suzy Algar
ファイルに表示される画像やダウンロードのキャプションを作成しています。画像がファイル内にある場合、どこに行けばよいかわかりません。
WPBeginnerサポート
投稿またはページに画像を追加しようとしている場合は、通常、画像ブロックを追加してから、ブロックで使用したいファイルを選択します。
管理者
Roxana Safipour
では、「配置なし」はどうすればよいですか？画像が左側にあり、テキストが周りに折り返されない状態です。これは、配置なしオプションで簡単でしたが、現在はなくなっています。元に戻してください！画像を左側（中央ではない）に配置し、隣にテキストがないようにしようとしていますが、テキストが自動的に折り返されてしまいます！
WPBeginnerサポート
あなたが求めていることのように聞こえる場合、画像のアライメントを特に設定しない限り、画像は自動的にそのように設定されるはずです。
管理者
ベン
これについて簡単なフォローアップです。私も気になっていました。簡単な答えですが、設定を探していたので、あまり明らかではありませんでした。選択した配置ボタンをもう一度押すと、配置がオフになり、デフォルトの配置なしに戻ります。
Jesse
素晴らしい投稿で非常に役立ちました。WordPress 5.1にアップグレードしましたが、画像をURLにリンクする問題が発生しました。助けていただけますか？
WPBeginnerサポート
ブロックエディターを使用している場合、画像ブロックの設定に「リンク設定」セクションがあり、画像がどこにリンクするかを設定できます。
管理者