【よく使うブロック】画像ブロックの使い方

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

画像ブロックの使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像ブロックで利用できる主な編集機能

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

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

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

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

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

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

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

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

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

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

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