ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

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

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

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

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

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

インラインとは?

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

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

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

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

ブロックとは?

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

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

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

画像ブロック

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

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

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

wordpress image
画像ブロックで挿入した画像

これはかんたんですね?

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

インライン画像

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

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

Gutenbergメニュー インライン画像

左の文章wordpress image右の文章

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

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

インライン画像のサイズ変更

左の文章wordpress image右の文章

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

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

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

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

WordPressの右のオプションはブロックの編集。

(タブ変更で投稿全体のオプションの設定もできる。)

画面上部の編集メニューはコンテンツの内部で何かをするインラインの編集。

前の投稿
WordPress5, インライン画像, インラインコード, キーボード入力って何だ?
WordPress5, 引用に画像を挿入する方法。プラグインは使いません。
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す