WordPress5, 画像ブロックとインライン画像のちがい。

WordPress5には画像を挿入するのに2つの方法があります。『画像ブロック』と『インライン画像』です。

HTMLの『ブロック』『インライン』と同じ意味なんですが、技術的なことは分からないし編集専門だし、という人にも違いはかんたんに分かります。

なぜ、画像を挿入する方法が違うのかも分かる。

HTMLのブロックとインラインとは何か？

サイトに表示されるものはコンテンツと言い、そのコンテンツも小さなコンテンツの集合でできています。

画像、文章、埋め込み動画などすべて小さなコンテンツで、ブロックとインラインはそのコンテンツの性格を表します。

インラインとは？

インラインは『直列の、一列に並んだ』という英単語なんですが、HTMLでも同じ意味になります。

横に一列に並べることができるコンテンツの性格をインラインと言います。

また、インラインは『AとBというブロックの間にCを差し込んで並べる』ということもできるので、コンテンツ内に差し込むという意味もあります。

WordPressでのインライン画像は、コンテンツの中に挿入する画像という意味になります。

ブロックとは？

一方、ブロックはインラインじゃないもの、横に並べられないものを言います。英単語では『塊（かたまり）』という意味なんですが、そこはあまり考えないほうがいいでしょう。

むしろ、日本語化している『ブロックする』のほうがいい。横に並べると左右にコンテンツがあるんですが、『左右にコンテンツを置くのをブロックする』とイメージすると覚えやすいです。

ここからブロックは、上から下へコンテンツを並べる性格のことを表します。

画像ブロック

WordPressはバージョン5から編集機能のメインをGutenbergというアプリを使うようになりました。

Gutenbergでは編集で使うコンテンツをブロックという単位で管理しています。もちろん『ブロック』なので、左右に別のブロックを置くことができません。

画像ブロックもそう。一番使うブロックは文章の段落ですが、これもブロックです。文章は上下にはブロックを置けますが左右には置けません。

これはかんたんですね？

画像サイズなどは編集画面の右の『ブロック』オプションで変更可能。

インライン画像

インライン画像は、あるブロックの内部に画像を挿入したいときに使います。ここでは文章の途中で入れてみましょうか？

文章の途中でカーソルを置いたまま、編集画面の上のメニューで挿入します。

左の文章右の文章

インライン画像の編集では画面右のオプションではできません。それはブロックではないから。そしてできることは画像サイズの変更のみ。

画像をクリックするとサイズ変更のテキストボックスが表示されるのでそこで変更します。

左の文章右の文章

WordPressではブロックという単位でコンテンツを作成すると言いましたが、インラインはちょっと違うことがイメージできたと思います。

このインライン画像は、テーブルのセル（項目）や引用のテキスト部分に画像を入れたいときなどに使います。

なぜインライン画像が右のオプションじゃなくて、編集機能のメニューの中にあるのかも分かるんじゃないかな？

ここのメニューではブロック内部に何かをするものばかり。まさしくインラインの性格をもっています。