画像はWordPressの投稿やページをより魅力的なものにしてくれます。しかし、多くの初心者は画像を思い通りに配置することに苦労しています。
WordPressの新しいブロックエディター（Gutenberg）は、WordPressでの画像の追加や配置を簡単にすることで、この問題を解決している。
この投稿では、WordPressで画像を簡単に追加して配置し、美しいコンテンツレイアウトを作成する方法を紹介します。
WordPressエディターでの画像の配置
以前のWordPressでは、編集ボタン付きのテキストエリアを初期設定エディターとして使用していました。古いエディターで特に問題だったのは、画像の配置でした。WordPressサイト上で正しく並べるのは難しいかもしれません。
画像を左寄せ、右寄せ、中央寄せにするオプションがあったとしても、必ずしも見栄えが良いとは限りませんでした。画像が整列しなかったり、正確なサイズでなかったり、単に奇妙に見えたりすることもあった。
WordPress 5.0では、Gutenbergブロックエディターと呼ばれる新しいWordPress投稿エディターが導入された。このエディターでは、画像の配置の問題など、旧エディターのいくつかの問題が修正されました。
WordPressブログの投稿やページの美しいレイアウトを作成するために、新しいエディターで画像を簡単に追加したり配置したりする方法を見てみましょう。
WordPressで画像を追加して整列させる
エディターには、WordPressの投稿やページに画像を追加するために使用できる以下のブロックが付属しています。
- イメージ
- インライン画像
- ギャラリー
- メディア＆テキスト
- 表紙
まずはシンプルなイメージブロックから。
新規ブロックを追加」ボタンをクリックするか、投稿エディターで「/image」とタイプして画像ブロックを挿入します。
空白の画像ブロックの中に3つのボタンが見えます。
コンピューターから画像をアップロードするか、メディアライブラリからすでにアップロードされている画像を選択するか、画像ファイルのURLをプロバイダーに提供して画像を挿入することができます。
次に、「アップロード」ボタンをクリックし、コンピューターからアップロードしたい画像を選択します。
画像を選択するとすぐに、WordPressはその画像をメディアライブラリにアップロードし、画像ブロックに挿入します。
画像の上にツールバーが表示され、右カラムに画像ブロックの設定が表示されます。
画像の位置合わせには、画像の上に表示されるツールバーを使います。
画像ブロックには、ツールバーのボタンとして以下の画像配置オプションがあります。
- 左揃え
- 中央揃え
- 右揃え
- ワイド幅
- 全幅
画像の横幅が小さい場合、左右に揃えると画像の横にテキストが表示されます。画像を中央に配置すると、左右にテキストは表示されず、画像だけが表示されます。
幅の広いオプションを選択すると、画像の幅がテキストエリアよりも広くなります。
全幅オプションを設定すると、ブラウザー画面の左右の端に押し出されます。
テキストの横に画像を完璧に配置する方法
テキストの横に画像を完璧に配置する必要がある場合がよくあります。WordPressのブロックエディターでは、メディアとテキストブロックを追加することで、これを簡単に行うことができます。
このブロックは基本的に2カラムのエリアを追加する。1カラムは画像（メディア）用、2カラム目はテキストコンテンツ用。
画像をアップロードするだけです。
次に、その横に表示したいテキストを追加することができる。
画像とテキストを追加すると、ブロックのオプションが増えます。ブロック全体の幅を広くしたり、全幅にしたり、画像とテキストの辺を入れ替えたりできます。
画像の配置は、次のカラムのテキストの高さに自動的に調整されます。
WordPressでギャラリー画像を整列させる方法
WordPressのブロックエディターには、画像ギャラリーを追加するブロックも用意されています。これにより、行と列のグリッドに画像を簡単に表示することができます。
ギャラリーブロックには、ツールバーに同様の配置オプションがあります。
ギャラリーブロック全体を左寄せ、中央寄せ、右寄せにすることができます。また、全幅にしたり、全幅の列に変更することもできます。
WordPressの初期設定のギャラリー機能は非常に優れています。しかし、定期的にWordPressの投稿やページにフォトギャラリーを追加する場合は、Envira Galleryのようなフォトギャラリー・プラグインの使用を検討してください。
これらのプラグインは、フォトギャラリーの画像を整列させたり、ポップアップに表示させたり、スタイルを変えたりするオプションを増やします。
WordPressで2つの画像を並べて追加する方法
WordPressの投稿で2つの画像を並べて表示する最も簡単な方法は、ギャラリーブロックに両方の画像を追加することです。
ギャラリーブロックに2カラムレイアウトを選択するだけで、両方の画像が隣り合って表示されます。また、両方の画像が同じサイズであることを確認するために、’サムネイルを切り抜く’オプションをチェックすることができます。
WordPressで画像を追加して整列させるその他の方法
画像、メディア、テキスト、ギャラリーブロックとは別に、カバーブロックを使ってカバー画像を追加することもできます。
現代のウェブデザインでは、カバー画像は非常に魅力的なコンテンツレイアウトを作成するために使用されます。これらの画像は、ページのさまざまなセクションを強調するために使用されます。
カバー画像ブロックには、画像ブロックと同じ配置オプションがあります。画像の上にテキストを追加し、ブロックの設定からオーバーレイの色を選択することができます。一番良いのは、「固定背景」オプションをチェックすることで、パララックス背景効果を作成できることです。
カバー画像の使い方についてさらに詳しく知りたい方は、WordPressのアイキャッチ画像とカバー画像の違いについての投稿をご覧ください。
これまで、投稿やページに直接画像を追加する方法について説明してきました。サードパーティサイトの画像についてはどうでしょうか？
ブロックエディターを使えば、これも簡単だ。Instagram、Facebook、Flickr、Imgur、Photobucketなど、人気のソーシャル共有サイトの画像を追加できます。
例えば、Instagramの写真を追加したい場合は、投稿エディターにInstagramブロックを追加し、共有したい投稿のURLを入力するだけです。
あとはツールバーで好きな配置をクリックするだけ。埋め込みブロックを使えば、WordPressに動画を簡単に埋め込むこともできます。
詳しくは、WordPressにInstagramを埋め込む方法をご覧ください。
この投稿が、WordPressのブロックエディターで画像を簡単に追加して配置する方法を学ぶのにお役に立てば幸いです。また、WordPressを高速化するための画像の最適化方法や、最適なデザインソフトウェアについてのガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Jiří Vaněk
Gutenberg is still a big unknown for me. I’ll admit that I only started discovering it after WordPress 6.4 arrived and reading these pages. For a long time, for example, I could not figure out how to place an image and text next to each other (in Elementor it was a completely simple matter). After reading this article, I can do a little more with Gutenberg. Thanks for that.
WPBeginner Support
You’re welcome
管理者
fred dugas
will this work with Iframes? I edit a custom HTML block and add iframe and the save and the add is lining up all the way to the left where all the other blocks are centered.?
WPBeginner Support
It would depend on the iframe but normally iframes will not automatically have alignment options.
管理者
Harry Goldhagen
How do you align Featured Images that appear on the automatically generated Blog page and Category page? Clicking on the image opens the post, and there doesn’t seem to be an alignment setting for Featured image when filling in the post settings.
WPBeginner Support
For the featured image, that would be determined by your theme. If you check with your specific theme’s support they should be able to assist with the alignment of your featured image.
管理者
john McIntyre
I wish to have all captions on my site, the same size and font.
How is this achieved?
WPBeginner Support
Unless your theme has a specific setting for it, most themes should have the text uniform if it is all the image caption and not a different text block.
管理者
Sharon
I’m wanting to change the default for uploading an image to be centred every time. To change each image I upload to centre each time I add an image is so time consuming. Can I change the default to centre?
WPBeginner Support
There is not a simple method we would recommend for beginners at the moment but we will keep an eye out for something we would recommend.
管理者
Amanda A.
I am trying to use the Block Editor to display two images side by side. I used the two column feature then image blocks in each column. While designing, it displays correctly, but when I “preview in new tab”, the side by side columns are gone and the images are stacked. What am I doing wrong? Is this a common issue? How can I fix this?
WPBeginner Support
You may want to ensure the images aren’t too large for them to be side by side in your specific theme for the most common reason for that issue.
管理者
Sheryl Zeiset
I’m trying to learn how to use the new block editor. When I click on the Add block button and choose image to add a photo, I only get the ‘insert from URL’ option and I can’t find a way to add photos from my Media Library. Can you help?
WPBeginner Support
You would want to check closely to find the text next to the upload button for selecting the image from your media library
管理者
Luther Mckinnon
I have been publishing a blog for many years. I have learned to dread the introduction of a new system. Doing a simple thing like adding photographs is now very difficult.
WPBeginner Support
Hopefully, once you are comfortable with the new system it becomes easier for you
管理者
Ward
Great information, problem is that back end it works but front end it always aligns to the left. Would it be possible that this has something to do with my Elementor template?
WPBeginner Support
If you are using a page builder there is a chance that your page builder is overriding the styling and you can reach out to your builder’s support for assistance.
管理者
tanmay
absolutely amazing feature its not every cup of tea to use HTML editor
WPBeginner Support
Glad you like the block editor feature
管理者
Louie Adem
just started WordPress yesterday. Totally a beginner and so happy wpbeginner provided me the “trainer wheels” to jumpstart. The education in this website is so valuable. Can’t thank you enough.
WPBeginner Support
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 Support
Glad our article could help, for another helpful article you may want to take a look at our article below:
https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/
管理者
Karen
You mention “Inline Image”, but I don’t see any such block. Your article was written awhile ago but supposedly updated in Jan. 2020 – did that block go away and you forgot to remove it from this article? Or a better question: How can I add an inline image within another block like Paragraph or Heading?
WPBeginner Support
The inline image block is not currently available but you can normally recreate the formatting with the text and image or the standard image block
管理者
Ted Strutz
When I add an image from my media the image toolbar does not come up to align left or right. I can change size of image.
WPBeginner Support
You would want to ensure you have not set it to be at the top of the page instead of how we have it at the moment.
管理者
Hannah
Hello, I have aligned all images using the block editor and everything looks fine until I preview?
Then some images have become far bigger than the others, I have a gallery of two images suddenly sitting on top of a single image. Everything has moved around randomly!
Even when I published it, it was still all wrong. I would love your help, thank you!
WPBeginner Support
You would want to reach out to your theme’s support to ensure there isn’t a styling conflict, otherwise, you could try disabling your plugins to see if this is a plugin conflict as well.
管理者
Harry
Hi, I’m looking to align shortcodes next to one another like you describe with the images is this possible? Many Thanks
WPBeginner Support
That would depend on the shortcodes themselves
管理者
Ap
Hello,
How do you arrange the positioning of the title for the cover blocks?
You have that option in your bar, but for some reason, when I click on cover block, there is no text alignment option.
Any ideas on this?
Thank you for the great article.
WPBeginner Support
You would want to check the top of your page as that would be the other location the alignment options would be rather than floating over the element
管理者
Cheryl
How do you make an image clickable with a clickable link? I’ve been looking for tutorials and they all seemed based on a prior Gutenberg block which since has changed an the tutorials no longer match the block.
WPBeginner Support
You would want to check the top toolbar for the current location for where to add a link to an image
管理者
Alejandro
Hello, Is it possible to write an image caption right below the image when using the “Media & Text block”?
WPBeginner Support
It would depend on your specific theme for the styling but you should be able to
管理者
Lancer Kind
Nice! Thank you so much!
WPBeginner Support
You’re welcome
管理者
Pete Newman
There is an existing issue of incompatability between Gutenberg and themes. Do you have a list of themes that are compatable with Gutenberg (and that allow full functionality of Gutenberg)?
Thanks and regards,
Pete.
WPBeginner Support
There should be fewer issues with that as themes are updated but for specifically Gutenberg friendly themes you could take a look at our list here: https://www.wpbeginner.com/showcase/gutenberg-friendly-wordpress-themes/
管理者
Pete Newman
I have been using wordpress for years but have been a bit absent lately. Gutenberg is a headspin. I follow these instructions but simply cannot align images in an image/text block. When I go to preview the image is aligned extreme hard left of the page with no margin at all. Any solutuions on offer?
Thanks!!
WPBeginner Support
If the settings are being ignored you may need to check with your theme’s support to ensure it’s not overriding your styling. If you wanted to try reverting to the classic editor we have our guide here: https://www.wpbeginner.com/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/
管理者
Pete Newman
Thank you! Excellent support. I added the classic editor plugin and the disable Gutenberg plugin and was able to create an approximation of what I want. Looking forward to Gutenburg functioning as intended and developers catching up – it is a great idea.
WPBeginner Support
Glad we could help
Jimmie
But you can’t link images in a gallery? That makes the gallery function less attractive
WPBeginner Support
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 Support
If you want to add multiple images in the same area, you would want to take a look at the gallery block to add multiple images in one section
管理者
Aaranja
How to add an image directly in the “Code Editor”, without passing by “Visual Editor”?
WPBeginner Support
You could disable the visual editor under Users>Your Profile but that would prevent you from using the visual editor for other sections.
管理者
Alice
I’m centering all of my images correctly in the editor, but they are all showing up as left-aligned in preview and live posts no matter what. Do you know what might be causing this? It’s driving me so crazy!
WPBeginner Support
Your theme may be overriding the styling you are setting. If you reach out to your theme’s support they should be able to assist.
管理者
Anne
I would like to have an image next to a file (pdf) – all on the same line. Can I do that in one block, or would I need to create two? Thank you!
WPBeginner Support
You would want to add the column block to split the content and allow you to display the content like that.
管理者
Suzy Algar
I am having creating captions for images and downloads that appear in my files. I don’t know where to go once I have the image in my files.
WPBeginner Support
If you’re trying to add the image to a post or page you would normally add an image block and then select the file you want to use in the block
管理者
Roxana Safipour
So now how do you do “no alignment”, where the image is on the left and has no text wrapping around it? This used to be easy with the no alignment option, which is now gone. Please bring this back! I am going crazy trying to figure out how to get my image on the left (not centered) and with no text next to it, but the text keeps wrapping around it automatically!
WPBeginner Support
For what it sounds like you’re wanting, if you don’t specifically set the alignment for an image, the image should set itself that way.
管理者
Ben
Just a quick followup on this, as it was annoying me as well. There’s a simple answer but it’s sort of not that obvious as I was looking for a setting – just press the selected alignment button again to turn off the alignment and revert to the default no alignment.
Jesse
Great post very useful.I have ugrade to wordpres 5.1 but now have problem with linking image to url. Can you help me?
WPBeginner Support
If you’re using the block editor, in the image block’s settings there should be a Link Settings section for you to set where an image links to.
管理者