Word Pressdブログ記事内で画像などを横並びにさせたいときは、どうすればいいの?
![](https://yorks-design.com/wp-content/uploads/2021/08/sean-oulashin-KMn4VEeEPR8-unsplash-1024x681.jpg)
![](https://yorks-design.com/wp-content/uploads/2021/08/vincent-van-zalinge-vUNQaTtZeOo-unsplash-1024x684.jpg)
![](https://yorks-design.com/wp-content/uploads/2021/08/niko-photos-tGTVxeOr_Rs-unsplash-1024x683.jpg)
↑こんな感じのです
Word Press 超初心者の私でも、簡単にできそう!という事で使い方をまとめてみたいと思います。
因みに、ここではブロックエディタ(Gutenberg)を使用した方法です。
※実はこの機能について調べると、以前のクラッシックエディタと比較して、今回のブロックエディタ( Gutenberg )で大幅に使いやすくなった機能だそうです。
私は ブロックエディタ( Gutenberg ) しか使用した事がありませんが、とっても簡単・便利に感じました。
「最近ブログを始めてみた!」という私のような Word Press 超初心者 の方のご参考になればと思います。
ブロックメニューの「カラム」を使う
「カラム」とは?
カラムとは「段組み」という意味で、web制作の場面でもよく使用されています。
例えば当ブログの場合、
①コンテンツの部分
②右のメニュー部分
の2カラムで構成されているという事になります。
![](https://yorks-design.com/wp-content/uploads/2021/08/名称未設定-1.png)
構成する要素がいくつあるかが「~カラム」という事になります。
今回は
「ブログの記事内を2カラム・3カラムなどで構成し、画像を横並びに表示する方法」
をご紹介します。
ブロックメニューの「カラム」を使用
①「+」でブロック一覧より「カラム」を選択します
「カラム」がない場合は「すべて表示」させて選択するか、検索🔍で「カラム」と入力します。
![](https://yorks-design.com/wp-content/uploads/2021/08/FireShot-Capture-097-新規投稿を追加-‹-yorks-design-—-WordPress-yorks-design.png)
②複数のレイアウトの表示がでます。ここでは3カラム(33/33/33)を選択してみます。
![](https://yorks-design.com/wp-content/uploads/2021/08/FireShot-Capture-098-新規投稿を追加-‹-yorks-design-—-WordPress-yorks-design.com_-1024x425.png)
③一番左のブロックを指定し、画像を入れてみます。
右側にある「ブロック」というメニューで、選択中のブロックのデザインを変更できます。
(段落ブロックの場合はフォントサイズやテキスト色・背景色などの変更ができます)
![](https://yorks-design.com/wp-content/uploads/2021/08/FireShot-Capture-100-新規投稿を追加-‹-yorks-design-—-WordPress-yorks-design-2-1024x576.png)
![](https://yorks-design.com/wp-content/uploads/2021/08/FireShot-Capture-109-投稿を編集-‹-yorks-design-—-WordPress-yorks-design.png)
④1枚目の画像が左側に入りました。とっても簡単です。
![](https://yorks-design.com/wp-content/uploads/2021/08/FireShot-Capture-110-投稿を編集-‹-yorks-design-—-WordPress-yorks-design.com_-1024x386.png)
画像やテキストなど様々選択できます
画像だけでなく
・テキスト
・メディアテキスト
・テーブル
などブロック一覧にあるものの選択が可能です。
スマホでは縦並びに表示される
PCで見ると横並びに表示されますが、スマホだと左から右の順で縦並びに表示されます。
![](https://yorks-design.com/wp-content/uploads/2021/08/2640254-150x150.jpg)
画像が縦並びになってる・・順番をもう一度確認しなくては
スマホは画面が小さい分、視認性が下がってしまうので、とてもありがたい動きです。
サイズも全て調整されて綺麗に表示されます。
ただ、文字入れなどのレイアウトはその点も考慮する必要があります。
横並びで表示させたい場合はテーブル(表)を使用すると解決されます。
画像の横並びは「カラム」で出来る。スマホの場合は縦並び
以上、Word Press・ブロックエディタ (Gutenberg) で画像を横並びに表示させる方法でした。
ブロックエディタを使用して直観的に使用することができ、とても簡単でした。
ただその際スマホでは画像が縦一列に配置されるため、その点を考慮しながら使用する事をオススメします。
画像を並べて横並びにして、見やすいブログのレイアウトに役立てみて下さい。
コメント