WordPress5.0から新しく実装されたビジュアルエディタ「Gutenberg(グーテンベルグ)」の使い方を説明していくシリーズです。
今回は、 画像と画像の横に文章 が入れられる「メディアと文章」ブロックの使い方です。
ブロック「メディアと文章」の使い方
画像と画像の横に文章を入れるには、「メディアと文章」を利用します。
STEP1
![](https://komatoki.com/wp-content/uploads/2020/01/0ebaa1469840cf816bb054a8345056d3-1024x632.jpg)
ブロック追加ボタン「⊕」、「レイアウト要素」をクリックし、「メディアと文章」を選択します。
STEP2
![](https://komatoki.com/wp-content/uploads/2020/01/8bdc051cfcfdf138370d95baeb232442-1024x629.jpg)
「メディアライブラリ」をクリックし、記事にしたい画像を選択します。
※あらかじめメディアに画像を保存しておきます。
STEP3
![](https://komatoki.com/wp-content/uploads/2020/01/af796632a8dafd352fb0a533a675d9a4-1024x647.jpg)
段落ブロック内にカーソルを合わせて文章を入力します。
右サイドバーの「文字サイズ」で文字の大きさを設定できます。
STEP4
![](https://komatoki.com/wp-content/uploads/2020/01/ebdcaeef857208e9a35c908fea0aea51-1024x601.jpg)
メディア内文章エリア、背景色を設定できます。
※右サイドバーのブロックが「メディアと文章」となっていることを確認しときます。
STEP5
![](https://komatoki.com/wp-content/uploads/2020/01/3226fb5a2b954ea37e3ab76b6fdc8bd1-1024x612.jpg)
さらに段落内、色設定(背景色、文字色)および蛍光マーカーを設定できます。
※右サイドバーのブロックが「段落」となっていることを確認しときます。
★関連サイト★
WrodPrdss記事の「文章に色をつけて強調」したい~色設定(背景色)の使い方
WrodPrdss記事の「文章に色をつけて強調」したい~色設定(文字色)の使い方
WrodPrdss記事の「文章に色をつけて強調」したい~蛍光マーカーの使い方
プレビュー画面
![](https://komatoki.com/wp-content/uploads/2020/01/b50cc41753d74202d98be370f5336fba.jpg)
実際の表示が確認できます。
(プレビューで表示される画面)