WordPress5.0から新しく実装されたビジュアルエディタ「Gutenberg(グーテンベルグ)」の使い方を説明していくシリーズです。
今回は、 画像を横並びにする「カラム」ブロックの使い方です。
ブロック「カラム」の使い方
画像を横並びに表示するには「カラム」を利用します。
STEP1
![](https://komatoki.com/wp-content/uploads/2020/01/07660fe98c69486f919821b2b056e114-1024x635.jpg)
ブロック追加ボタン「⊕」、「レイアウト要素」をクリックし、「カラム」を選択します。
STEP2
![](https://komatoki.com/wp-content/uploads/2020/01/c064594488a0a0098266f36079bcc1c5-1024x645.jpg)
表示されたカラムレイアウトの種類から、2つ横並びの場合は、一番左のものをクリックします。
STEP3
![](https://komatoki.com/wp-content/uploads/2020/01/dfeb956df48e89a5eae330dfc68e4fa1-1024x653.jpg)
1枚の画像を入れたい場合:
左のブロック追加ボタン「⊕」をクリックし、「画像」を選択します。
STEP4
![](https://komatoki.com/wp-content/uploads/2020/01/7314a272986bb799f595ffa164b47345-1024x641.jpg)
2枚以上の画像を入れたい場合:
ブロック追加ボタン「⊕」をクリックし、「ギャラリー」を選択します。
次に「メディアライブラリ」をクリックし画像を選択したら、 「ギャラリー作成」、「ギャラリー挿入」とクリックします。
※あらかじめメディアに画像を保存しておきます。
★関連サイト★
WordPress記事の「画像を横並び」にさせたい~ブロック「ギャラリー」編
WordPress記事に「”画像”と”画像の横に文章”」を入れたい~ブロック「カラム」編
STEP5
![](https://komatoki.com/wp-content/uploads/2020/01/971f96c53cdec3fb8f1ef07f19de98a3-1024x651.jpg)
キャプションを入れたい場合は「キャプションを入力・・・」をクリックして入力します。
STEP6
![](https://komatoki.com/wp-content/uploads/2020/01/be689064488572ce0ed858b31adb6577-1024x645.jpg)
カラムを増やしたい場合は、画像ブロックの外側のカラムブロックの枠をクリックします。
STEP7
![](https://komatoki.com/wp-content/uploads/2020/01/7570b9605ebf4e609c64ea8cf3b0457d-1024x652.jpg)
右サイドバーのブロックが”カラム”に変わったのを確認します。
カラムの数字を変更し指定します。
今回は”3”にして、STEP4にならい、画像を選んでみます。
プレビュー画面
![](https://komatoki.com/wp-content/uploads/2020/01/7192b6f4996ff2bfab230682dd9c7cb0.jpg)
実際の表示が確認できます。
(プレビューで表示される画面)