WordPress画像ブロック使い方を紹介します。画像のアップロードやリンクの挿入、サイズ変更やトリミングなど、画像ブロックでできる設定や編集について説明します。

この記事をお読みいただく前に

この記事では、画像ブロックの使い方を解説するために、スクリーンショット画像を掲載しています。ご利用環境(WordPressのバージョンや使用テーマ、パソコンOSなど)によっては、実際の画面と異なる場合があります。

画像ブロックの基本

WordPressのブロックエディタで、画像を挿入することができるブロックは複数あります。中でも「画像」ブロックは、最も基本となるブロックです。

画像ブロックの中には、画像ファイルを1つだけ挿入することができます。挿入した画像は、「ブロックツールバー」や「パネル」を使って、設定や編集をすることができます。

画像ブロックの「ブロックツールバー」と「パネル」
1つのブロックに複数の画像を挿入して横並びで表示するには「ギャラリー」ブロックを、画像と文章を横並びで表示するには「メディアとテキスト」ブロックを使います。詳しくは、記事に画像を挿入する方法をお読みください。

画像ブロックの使い方

ブロックエディタでの初期画面では、タイトル入力欄と段落ブロックしか用意されていません。画像ブロックを使うためには、新たに追加する必要があります。

画像ブロックを追加する

画像ブロックを追加する方法について、以下の2つをご紹介します。

  • ブロック追加の標準機能[+]を使う
  • 画像をドラッグ・アンド・ドロップする

ブロック追加の標準機能[+]を使う

ブロックを追加する5つの方法では、画像ブロックに限らず、さまざまな新しいブロックの追加方法をご紹介しています。その5つの方法のうち、画像ブロックの追加に適しているのは以下の3つです。

  1. ブロックエディタ画面左上の[+]をクリック
  2. 空白ブロック右側の[+]をクリック
  3. ブロック間の[+]をクリック

方法1. ブロックエディタ画面左上の[+]をクリック

ブロックエディタ画面左上の[+]をクリック

方法2. 空白ブロック右側の[+]をクリック

空白ブロック右側の[+]をクリック

方法3. ブロック間の[+]をクリック

2つのブロックの間に表示される[+]をクリック

それぞれの方法で画像ブロックを追加すると、以下の画面が表示されます。

画像を挿入できるブロック追加後の表示
アップロード パソコンなどに保存されている画像ファイルを転送できる
メディアライブラリ すでにアップロードしている画像ファイルから選択できる
URL から挿入 他サイトに掲載されている画像ファイルのURLを指定できる

新しい画像を挿入する場合はアップロードをクリックします。その後、下の画面で画像を選択して、開くをクリックします。

画像を選択して、開くをクリック
画像をアップロードできない

画像をアップロードできない場合は、画像をアップロードできない理由と解決策|記事に画像を挿入する方法を参考にしてください。

メディアライブラリとは

WordPressでは、画像や動画ファイルのことを「メディア」とよびます。管理画面からアップロードされたメディアは、自動的に「メディアライブラリ」に保存されます。

管理画面[メディア]→[ライブラリ]をクリックすると、メディアライブラリ画面が開き、過去にアップロードした画像などが一覧表示されます。一覧にあるファイルを選択すると、画像の編集や設定をすることができます。

画像をドラッグ・アンド・ドロップする

新しい画像を挿入する場合、画像をドラッグ・アンド・ドロップすることによって、画像ブロックを追加できます。

ブロックエディタ上に画像ファイルをドラッグすると、横線が表示されます。ブロックを追加したい場所に横線が表示されたら、マウスのボタンを離してみましょう。その場所に、画像ブロックを追加することができます。

ブロックエディタ上に画像ファイルをドラッグ
画像をドラッグ・アンド・ドロップして画像ブロックを追加

画像ブロックを追加し、画像ファイルを挿入できたら、「ブロックツールバー」と「パネル」を使って設定や編集をします。

ブロックツールバーで設定できること

画像ブロックのブロックツールバーで設定できること
  1. 配置(左寄せ・中央寄せ・右寄せ)を変更する
  2. リンクを挿入する
  3. 切り抜き(トリミング)/回転する
  4. 画像の上にテキストを追加する
  5. デュオトーンフィルターを適用する
  6. 他の画像に置換する

配置(左寄せ・中央寄せ・右寄せ)を変更する

画像の配置を指定できます。初期状態は「左寄せ」です。

画像ブロックの配置(左寄せ・中央寄せ・右寄せ)を変更する

リンクを挿入する

画像にリンクを設定することができます。リンク先の指定方法は、以下の3つから選択できます。

画像ブロックにリンクを挿入する
  • (1)URLをペーストまたは入力して検索
  • (2)メディアファイル
  • (3)添付ファイルのページ
(1)URLをペーストまたは入力して検索

リンク先のURLを貼り付けて、[適用]ボタンをクリックします。

リンク先のURLを貼り付け

内部リンク(サイト内ページへのリンク)を設定したい場合は、記事タイトルを入力して、投稿や固定ページを選択することもできます。

公開済みの記事タイトルを入力
(2)メディアファイル

リンク先に「メディアファイル」を指定すると、画像をクリックしたときに、画面上に画像ファイルのみを表示します。

(3)添付ファイルのページ

リンク先に「添付ファイルのページ」を指定すると、画像をクリックしたときに、WordPressが自動生成する「画像ファイルを説明するためのページ」を開きます。

リンク先を新しいタブで開く場合

リンク設定]をクリックし、[新しいタブで開く]をオンにします。

[リンク設定]をクリックし[新しいタブで開く]をオン
リンクの設定については、リンクの貼り方|WordPressでリンクを貼る方法とURLの埋め込みもあわせてお読みください。

切り抜き(トリミング)/回転する

画像の切り抜き(トリミング)ができます。

画像ブロックの切り抜き

ズーム]ボタンをクリックすると、100~300%の間で拡大率を調整できます。

[ズーム]をクリックすると100~300%の間で拡大率を調整できる

縦横比]ボタンをクリックすると、切り抜く縦横の比を変更できます。

[縦横比]をクリックするとアスペクト比を変更できる

画像をドラッグすると、切り抜く範囲を変更できます。

画像をドラッグすると切り抜く範囲を変更できる

回転]ボタンを1回クリックするたびに、時計回りに90°ずつ回転します。

[回転]ボタンを1回クリックするたびに時計回りに90°ずつ回転

編集ができたら、[適用]をクリックします。

編集ができたら[適用]をクリック
編集前の画像、編集後の画像ともに、メディアライブラリに保存されます。

画像の上にテキストを追加する

画像の上にテキスト(文字)を追加することができます。

画像の上にテキストを追加する

画像の上に新しく「段落」ブロックが追加されます。段落ブロックの使い方でご紹介しているような、文字の装飾リンクの挿入などの設定をすることができます。この段落ブロックを他のブロックに変更することや、さらに新しいブロックを追加することも可能です。

画像の上のテキストの使用例
「画像」ブロックから「カバー」ブロックに自動変換されている

[画像上にテキストを追加]の操作をすることにより、「画像」ブロックから「カバー」ブロックへ自動的に変換されています。ブロックツールバーやパネルも、「カバー」ブロック専用のものに切り替わっています。

「画像」ブロックから「カバー」ブロックに自動変換

デュオトーンフィルターを適用する

「デュオトーン」とは、2つの色を組み合わせたデザインのことです。あらかじめ用意された配色の候補から選択できるほか……

デュオトーンフィルターを適用する

任意の色を選択したり、カラーコードを入力したりすることもできます。

デュオトーンフィルターで任意の色を選択やカラーコードの入力ができる
カラーコードとは、Webページで表示する色を指定するためのコードです。「カラーコード 一覧」などで検索すると、さまざまな色見本とそれに対応するカラーコードを確認できるサイトが見つかります。

他の画像に置換する

他の画像に置き換えることができます。画像を挿入するときと同様に、[メディアライブラリ][アップロード][URL]から選択することができます。

画像ブロックで他の画像に置換する

パネルで設定できること

画像ブロックのパネルで設定できること
  1. スタイルを変更する
  2. Alt テキスト (代替テキスト)を設定する
  3. 画像サイズを変更する
  4. タイトル属性を設定する
  5. HTML アンカーを設定する
  6. 追加CSSクラスを設定する

スタイルを変更する

画像のスタイルを変更できます。選択できるスタイルは、使用しているテーマによって異なる場合があります。

画像ブロック・スタイルの変更「Twenty Twenty」の場合
テーマ「Twenty Twenty」の場合
画像ブロック・スタイルの変更「Twenty Twenty-One」の場合
テーマ「Twenty Twenty-One」の場合

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

Altテキストとは、何らかの理由で画像が表示されなかった場合に、画像の代わりに表示するための文字列です。そのため、基本的にはWebページ上に表示されません。

また、視覚に障害がある人などが利用する「スクリーンリーダー」で画像を音声に変換するときにも使われます。

Altテキストには、画像の内容を簡潔に説明するテキストを入力しておきましょう。

画像ブロックのパネルでAlt テキスト (代替テキスト)を設定する

画像サイズを変更する

画像サイズ]のプルダウンメニューで

  • サムネイル
  • フルサイズ

から選べるほか、[画像の寸法]では任意のサイズを数値で指定することができます。

画像ブロックのパネルで画像サイズを変更する

「サムネイル」「中」「大」それぞれの画像サイズは、WordPress管理画面[設定]→[メディア]で指定できます。

また、画像をドラッグすることによって、幅や高さを変更することもできます。

画像をドラッグしてサイズを変更できる

タイトル属性を設定する

タイトル属性を設定しておくと……

画像ブロックのパネルでタイトル属性を設定する

画像にマウスをあわせたときに、入力した内容が表示される場合があります。

マウスオーバーでタイトル属性の入力内容が表示される場合がある
以下のHTMLアンカーを設定する追加CSSクラスを設定するについては、HTMLやCSSの知識が必要です。初心者さん向けに、簡単な使用例をご紹介します。

HTMLアンカーを設定する

HTMLアンカーは、主にそのブロックを「ページ内リンクの移動先」に指定する時に使います。

通常のリンクをクリックするとページの先頭部分に移動しますが、ページ内に「目印」をつけることでページ内の任意の場所にリンクを設定することができます。[HTML アンカー]には、この「目印」となる文字列を入力します。
ページ内リンクの設定手順

手順1
段落ブロックの[HTML アンカー]に、「目印」となる文字列を半角英数字で入力します。このとき、スペースを含まないように注意してください。今回は、「link」と入力しました。

画像ブロックの[HTML アンカー]に目印となる文字列を半角英数字で入力

手順2
他のブロックで、ページ内リンクを設定したいテキストを選択し、[リンク]ボタンをクリックします。リンク先に「#link」と入力し、[送信]ボタンをクリックすると、ページ内リンクの設定が完了します。

ページ内リンクの設定でリンク先に「#+HTML アンカー」を入力
手順③の#(ハッシュ)は半角で入力

ページ内リンクの設定方法については、リンクの貼り方 – ページ内リンクの貼り方で詳しくご紹介しています。

追加CSSクラスを設定する

特定のCSSクラスを割り当てることができます。ツールバーやパネルでは設定できない装飾やレイアウトなどを適用したい時に使います。

画像ブロックのパネルで追加CSSクラスを設定する

追加CSSクラスを使った設定

追加CSSクラスの簡単な使用例をご紹介します。今回は、画像にシンプルな枠をつけてみましょう。

画像に枠をつける

手順1
画像ブロックの[追加 CSS クラス]に、クラス名を半角英数字で入力します。今回は、「simple-frame」と入力しました。

画像ブロックの[追加 CSS クラス]にクラス名を半角英数字で入力

手順2
使用しているテーマのCSSファイルを開きます。WordPress管理画面上でCSSを編集する場合は、[外観]→[カスタマイズ]をクリックします。

*画像
テーマカスタマイザーの開き方

手順3
追加CSS]をクリックします。

「追加CSS」をクリック

手順4
下記コードを記述し、公開をクリックします。

..simple-frame{
 border: 2px solid black;
 padding: 5px;
}
[追加CSS]にコードを記述し公開をクリック

プレビューを確認すると、追加CSSクラスを指定した画像に枠がついています。

画像ブロックの追加CSSクラスを使った設定でプレビューを確認

キャプションを入力する

画像の下にある「キャプションを追加」をクリックすると、画像についての説明文を入力することができます。

画像の下にある「キャプションを追加」をクリック

キャプションは、ただ文章を入力するだけでなく、段落ブロックの使い方でご紹介しているような、文字の装飾リンクの挿入などの設定をすることができます。

キャプションには装飾やリンクの挿入などが設定できる

画像ブロックを削除する

ブロックを削除するには、ブロックツールバーの[オプション]→[ブロックを削除]の順にクリックします。

画像ブロックを削除する

ブロックタイプまたはスタイルを変更する

ブロックツールバー左端にあるボタンをクリックすると、ブロックの種類や表示スタイルを変更することができます。

画像ブロックのブロックタイプまたはスタイルを変更する
ギャラリー 複数の画像を指定したカラム(列)数で並べて表示できる
グループ 複数(または1つ)のブロックをグループ化できる
カラム さまざまなブロックを横並びに表示できる
メディアとテキスト 画像とテキストを並べて表示できる
カバー 画像の上にテキストを追加できる
ファイル ファイルのダウンロードリンクを挿入できる

まとめ

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

画像ブロックに挿入した画像ファイルの設定や編集をするには、ブロックツールバーやパネルを使います。リンクの挿入や切り抜き(トリミング)、テキストの追加やサイズ変更など、さまざまな設定が可能です。

複数の画像を横並びで表示したい場合は「ギャラリー」ブロックを、画像とテキストを横並びで表示したい場合は「メディアとテキスト」ブロックを使います。画像ブロックで「ブロックタイプまたはスタイルの変更」機能を使えば、これらのブロックに簡単に変換することができます。