WordPress記事に「”画像”と”画像の横に文章”」を入れたい~ブロック「カラム」編

WordPress5.0から新しく実装されたビジュアルエディタ「Gutenberg(グーテンベルグ)」の使い方を説明していくシリーズです。
今回は、 画像と画像の横に文章 が入れられる「カラム」ブロックの使い方です。

ブロック「カラム」の使い方

画像と画像の横に文章を入れるには、「カラム」を利用します。

STEP1

ブロック追加ボタン「⊕」、「レイアウト要素」をクリックし、「カラム」を選択します。

STEP2

表示されたカラムレイアウトの種類から、2つ横並びの場合は、一番左のものをクリックします。

STEP3

1つのカラムに1枚の画像を入れたい場合:
左に画像、右に文章を入れたい場合、左のブロック追加ボタン「⊕」をクリックし、「画像」を選択します。

STEP4

1つのカラムに2枚以上の画像を入れたい場合:
ブロック追加ボタン「⊕」をクリックし、「ギャラリー」を選択します。
次に「メディアライブラリ」をクリックし画像を選択したら、 「ギャラリー作成」、「ギャラリー挿入」とクリックします。
※あらかじめメディアに画像を保存しておきます。

★関連サイト★
WordPress記事に「”画像”と”画像の横に文章”」を入れたい~ブロック「メディアと文章」編
WordPress記事の「画像を横並び」にさせたい~ブロック「ギャラリー」編

STEP5

次に右のブロック追加ボタン「⊕」をクリックし、「段落」を選択します。

STEP6

文章を入れていきます。
上の四角枠は「Shift+Enter」で改行して入力したものです。
下の丸枠は「Enter」で改行したものです。
見え方が変わりますのでプレビュー画面で確認しながら使い分けてください。

STEP7

キャプションを入れたい場合は、画像をクリックすると「キャプションを入力・・・」が表示されます。さらに「キャプションを入力・・・」をクリックして入力します。

STEP8

カラムを増やしたい場合は、画像ブロックの外側のカラムブロックの枠をクリックします。

STEP9

右サイドバーのブロックが”カラム”に変わったのを確認します。
カラムの数字を変更し指定します。
今回は”3”にして、STEP3にならい、画像を選んでみます。

プレビュー画面

実際の表示が確認できます。
(プレビューで表示される画面)