WordPressワードプレス)のブロックエディタでよく使うブロックの1つ、「画像」ブロックの使い方を紹介します。画像ブロックを使うと、ただ画像を挿入できるだけでなく、さまざまな編集をすることもできます。

画像ブロックの使い方

記事の中で画像を使用すると、文章ばかりのページに比べて記事の内容が伝わりやすくなります。このサイト(WordPress超初心者講座)でも、WordPressの使い方を解説するほぼ全ての記事に画像を掲載しています。

WordPressのブロックエディタで画像を挿入するには、「画像」ブロックを使います。

画像を挿入できるブロックは、他にも「ギャラリー」「カバー」「ファイル」「メディアと文章」などがあります。これらの違いについては、あとで説明します。

以下の解説は、つぎの条件下で作成しています。ご利用環境によって、本文の内容と実際の画面が異なる場合があります。

  • WordPress バージョン:5.2.2
  • テーマ:Twenty Nineteen
  • パソコン OS:Windows 10

画像を挿入する前に設定しておきたいこと

WordPressでは、画像をアップロードするたびにサイズが異なる複数の画像ファイルを自動生成する機能があります。そのサイズは、WordPress管理画面[設定]>[メディア]で設定変更することができます。

WordPress管理画面 メディア設定
画像ファイルの元のサイズがここで指定したサイズよりも小さい場合は、自動生成されません。

記事に画像ファイルを挿入するとき、[サムネイルのサイズ][中サイズ][大サイズ][フルサイズ(元のサイズ)]の中から好みのサイズを選択することができます。そのやり方については、あとで説明します。

もし画像ファイルの自動生成が不要の場合は、下記ページを参考にしてください。

画像ブロックを追加する

画像ブロックを追加する

画像ブロックを新しく追加する方法については、下記ページを参考にしてください。

画像ブロックで画像を挿入する方法や、挿入した画像を編集する方法について、くわしく見ていきましょう。

画像を挿入する

画像ブロックを新しく追加すると、次の画面が表示されます。この画面では、画像を挿入する方法を3つの中から選ぶことができます。

画像ブロックで画像を挿入する方法
①アップロード
パソコンなどの端末から、サーバー(WordPressがインストールされている場所)に画像ファイルを転送する。
②メディアライブラリ
「メディアライブラリ」はWordPressの管理画面からアップロードした画像を管理することができる機能。管理されている画像の中から、挿入したい画像を選択できる。
③URLから挿入
基本的に、他のサイトに掲載されている画像を挿入する時に使う。使用の際は、そのサイトの利用規約等を十分確認する必要がある。

ここでは、①アップロード②メディアライブラリの画像挿入手順を説明します。

①アップロード
[アップロード]をクリックすると、パソコン内のフォルダ内容が表示されます。(どのフォルダの内容が表示されるかは、利用状況によって異なります)
挿入したい画像ファイルを選択して、[開く]をクリックします。

画像ファイルをアップロード 画像ファイルの選択

画像ファイルを挿入することができました。

画像ファイルをアップロードして挿入できた
画像ファイルをもっと簡単にアップロードするテクニック
画像ファイルをブロックエディタ上にドラッグ・アンド・ドロップすると、青い線が表示された場所に画像ブロックが追加されます。この方法だと、新しく画像ブロックを追加する作業が省けるので効率的です。

画像ファイルをドラッグ・アンド・ドロップして挿入できた

②メディアライブラリ
[メディアライブラリ]をクリックします。

メディアライブラリをクリック

すると、WordPressの管理画面を通じてアップロードした画像の一覧が表示されます。記事に挿入したい画像をクリックして、選択をクリックします。

メディアライブラリから画像を選択して記事に挿入

挿入した画像を編集する

画像ブロックでは、挿入した画像に対して次の設定・編集を行うことができます。

画像ブロックで利用できる主な編集機能
  • 配置を変更する
  • メディア編集機能を使う
  • Alt テキスト (代替テキスト)を設定する
  • 画像サイズを選択する
  • 画像の寸法を調整する
  • リンクを設定する

配置を変更する

ブロック内の画像の配置を、[左寄せ][中央寄せ][右寄せ][幅広][全幅]に変更することができます。

画像の配置を変更する

メディア編集機能を使う

[画像を編集]ボタンをクリックします。

[画像を編集]ボタンをクリック

先ほど説明した「メディアライブラリ」が開きます。編集したい画像が選択されていることを確認して、[画像を編集]をクリックします。

メディアライブラリ[画像を編集]リンクをクリック

メディアを編集」画面が開きます。ここでは、ファイル名の変更、画像のトリミング、回転、反転、縮尺の変更などを行うことができます。

[メディアを編集]画面

ここからは、ブロックエディタ画面右側の設定パネルでできることを説明します。

Alt テキスト (代替テキスト)を設定する

Alt テキストとは、何らかの原因で画像が表示できない時に、画像の代わりに表示させる文字列です。目の不自由な方などが利用する音声読み上げ機能で、読み上げられる文字にもなります。Alt テキストには、画像についての簡単な説明を入力します。

画像ブロック Alt テキスト

画像サイズを選択する

画像を挿入する前に設定しておきたいことでも説明したように、WordPressでは画像ファイルをアップロードすると、サイズが異なる複数のファイルを自動生成します。これらのサイズの中から、記事に挿入したい画像のサイズを選択することができます。

画像ブロック 画像サイズ

画像の寸法を調整する

で、任意の幅や高さを指定できます。
で、元のサイズに対する比率を指定して寸法を調整することができます。

画像ブロック 画像の寸法

リンクを設定する

画像をクリックしたときのリンク先を指定することができます。

画像ブロック リンク設定
メディアファイル
画像のリンクとして[メディアファイル]を設定すると、ページ上で画像をクリックしたときに拡大表示されます。
添付ファイルのページ
WordPressが自動生成する「画像ファイルを説明するためのページ」を開くことができます。

画像ブロック リンク先 添付ファイルのページ
添付ファイルのページ 表示例
カスタム URL
任意のURLにリンクを設定できます。リンク先に[カスタム URL]を選択すると、リンク URLに任意のURLを入力することができます。
リンク先を[新しいタブで開く]ときは、をオンの状態にします。

画像ブロック リンク先 カスタムURL

ブロックの種類を変更する

画像ブロックは、次のブロックに変換することができます。

  • ギャラリー
  • カバー
  • ファイル
  • メディアと文章
ブロックエディタでは、合計60種類以上のブロックを利用できます。しかし、ブロックタイプの変更機能は元のブロックと関連性があるものしか選択することができない仕様となっています。
ギャラリーブロックの表示例
ギャラリー
複数の画像を選択し、一覧形式で表示させることができます。
カバーブロックの表示例
カバー
画像を背景として、その上に文字を重ねることができます。
ファイルブロックの表示例
ファイル
画像ファイルをダウンロードするためのリンクが表示されます。
メディアと文章ブロックの表示例
メディアと文章
画像と文章を段組(2列)で表示します。並び順を逆にすることもできます。

画像ブロックを他のブロックに変更したい場合は、[ブロックタイプまたはスタイルを変更]ボタンをクリックします。

画像ブロックの種類を変更

この記事のまとめ

記事内に画像を挿入する前に設定しておきたいのが、アップロード時に自動生成される画像のサイズです。WordPress管理画面[設定]>[メディア]で変更することができます。

画像を挿入する方法には、[アップロードする][メディアライブラリから選択する][URLから挿入]の3つがあります。画像ファイルをアップロードするなら、ブロックエディタ上にドラッグ・アンド・ドロップするのが効率的です。

挿入した画像に対して、配置の変更、トリミング、回転、反転、サイズ調整、リンクの設定などを行うことができます。

画像ブロックは、「ギャラリー」ブロックや「カバー」ブロックなどへの変換が可能です。