WordPressの箇条書き(リスト)の中に画像を入れたくなることがあります。以前(クラシックエディタ)は割とベタに書けばよかったのですが、ブロックエディタだとどうするのかちょっと悩みました。
ということで、手順を簡単に。
もくじ
リストにインライン画像を貼り込む手順
リストを作る
まず、普通にリストブロックを書きます。とりあえず、こんな感じ。
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_01.png)
この、一行目(の下)に太陽の画像を貼り込むことにします。
メニューから「インライン画像」を選択する
一行目の文末にカーソルを持っていき、「Shift+Enter」で改行します。
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_02.png)
ここで、メニューを開きます。
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_03.png)
「インライン画像」を選びます。
画像を貼り込む
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_04.png)
貼り付けたい画像を選びます。予めアップロードされているものの中から選ぶか、新たにアップロードします。ここでは、新規にアップロードします。と言っても、ドラッグ&ドロップでOK。
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_05.png)
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_06.png)
「選択」を押します。
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_07.png)
無事、画像を貼り込めました。
この下が実際の箇条書きです。
- 本日は晴天なり
- 明日は不明
補足
画像サイズの変更
画像のサイズを変更することもできます。まず、画像をクリックします。
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_09.png)
「幅」と出るので、希望のサイズ(ピクセル数)を入力します。
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_10.png)
後はこれを適用すればOKです。
文章と同じ行に画像を貼り込む
ここまでの説明では一行目の行末で改行しましたが、改行しなければそのままその場に貼り込まれます。
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_08.png)
ぱっと見では上にあるように見えなくもないですが、行の下のラインが基準になっているのでこれで一行目に入っています。画像のサイズや、目的次第で使い分ければよいかと。
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_11.png)
リストを書きながらでもOK
ここでは箇条書き全体を先に作ってから、その後で画像を貼り込みましたが、これは単に説明の都合。もちろん、箇条書きを書きながら都度画像を入れることもできます。
番号付きリストも同様
「番号付きリスト」でも同じように画像を入れることができます。
![](https://affilife.sainoa.com/wp-content/uploads/2021/01/list_inline_img_12.png)