ワードプレス 画像ブロックで画像を挿入・加工する方法
ワードプレスのGuntenberg（ブロックエディター）の画像ブロックの使い方を解説します。
画像ブロックを使って画像を挿入する方法
画像ブロックの各機能と画像の加工方法
・他のブロックへの変換
・画像のスタイルの変更
・画像の配置の変更
・画像にリンクを貼る
・画像をトリミングする（ズーム・縦横比指定・回転）
・画像上にテキストを追加
・デュオトーンフィルターの適用
・画像の入れ替え方法
・画像の代替テキスト設定
・画像サイズの設定
画像を挿入する
画像ブロックを使って画像を挿入します。
手順概要
- 画像ブロックを挿入する
- 画像をアップロード（または選択）する
手順詳細
①画像ブロックを挿入する
①画面左上の+マークをクリックして、ブロック一覧を表示させます。
②ブロック一覧”メディア”のグループまで下へスクロールする
③”画像”をクリック
これで、画像ブロックが挿入されます。挿入直後の状態は以下の通りです。
本文入力欄には画像ブロックが表示され、ブロック内に画像の挿入方法の選択肢が３つ表示されます。
（アップロード・メディアライブラリ・URLから挿入）
画面右には、この画像ブロックの情報を編集できるパネルが表示されます。
※もし、画面右に情報パネルが表示されていない場合は、画面右上の歯車マーク（設定）をクリックして、表示・非表示を切り替えてください。
②画像をアップロード（または選択）する
画像の挿入方法は次の４通りの方法があります。
・画像ブロック内へ画像をドラッグ＆ドロップ
パソコンから直接画像ファイルをドラッグ＆ドロップで画像が挿入できます。
・アップロード
”アップロード”をクリックしてパソコン内の画像ファイルを選択します。
・メディアライブラリ
”メディアライブラリ”をクリックするとメディアライブラリが開き、すでにアップロード済の画像を選択することができます。また新規画像もメディアライブラリにドラッグ＆ドロップで追加することもできます。
・URLから挿入
インターネット上の画像ファイルを使う場合、”URLから挿入”をクリックして入力します。
このうち、”メディアライブラリ”を使って画像を挿入していきます。次の手順です。
１．”メディアライブラリ”をクリックする
２．メディアライブラリが開くので画像を選択して挿入
①画像を選択（またはアップロードしてから選択）
②必要ならば代替テキストやキャプションなどを入力
③”選択”をクリック
画像のアップロードについて
画像を新規アップロードするには、メディアライブラリにパソコンから直接ドラッグ＆ドロップします。
一度アップロードした画像はメディアライブラリに保管され、後から選択できるようになります。
代替テキストについて
代替テキストは、画像が何らかの理由で表示されなかった場合に代わりに表示されるテキストです。
Googleが推奨しているのでSEO上の観点からも入力しておきましょう。
以上で画像が記事本文に挿入されます。
画像挿入を”メディアライブラリ”からするメリット
直接ドラッグ＆ドロップしたり”アップロード”から画像ファイルを選択する方法でも、裏ではメディアライブラリに画像が登録されています。
しかしその場合、メディアライブラリで画像情報の入力（代替テキストなど）をする機会がなくなります。
”メディアライブラリ”から画像挿入することで、画像情報を入力しておけば同じ画像を他の場所へ挿入するときに再度入力する手間が省けるのがメリットです。
なのでメディアライブラリから画像を挿入するのがおすすめです。
画像ブロックの各機能
ブロック内ツールバー
画像ブロック内が選択されていると（カーソルが画像ブロックにあると）、ツールバーが表示されます。
ツールバーの各ボタンは次のようになっています。
順に説明していきます。
ブロックまたはスタイルの変更
他のブロックに変換したり、画像のスタイルを変更（デフォルトと角丸が選べる）します。
ブロックの変換は、主に画像に関連するブロックへの変換ができます。
以下は、各ブロックの概要と使い方の記事です。
カバーブロック
画像にテキストを重ねて表示することができます。
https://web-children.com/2019/09/13/cover-of-block-editor-in...カラムブロック
画像やテキストなどを段組みレイアウトで表示することができます。
メディアとテキストブロック
画像とテキストを横並びに表示することができます。
ブロックの移動
ブロックの移動は次の2通りです。
・ドラッグして移動
・上下方向ボタンで移動
上下それぞれを1回クリックするたびに1ブロック分移動します。
画像の配置を変更
画像の配置を”左寄せ”、”中央揃え”、”右寄せ”、”幅広”、”全幅”の５つから選べます。
ただし、”幅広”と”全幅”は、テーマによっては使用できない場合があります。
”左寄せ”を選ぶと画像の右側に、”右寄せ”を選ぶと画像の左側に、画像ブロックの下のブロックが回り込みます。（画像サイズが大きいと回り込みません。）
画像にリンクを挿入
入力欄にリンク先URLを入力してリターンマークをクリックすれば、画像にリンクを設定できます。
メディアファイルを選択した場合、webサイトで画像をクリックすると元画像が拡大表示されます。
添付ファイルのページは使うことはないでしょう。
（ワードプレスは画像ごとに自動的にページが作成されます。それが添付ファイルのページです。）
”切り抜き”でできる3通りのトリミング
”切り抜き”では、単なる画像のトリミングでなく、
・ズームしてトリミング
・縦横比を指定してトリミング
・画像を回転してトリミング
が設定できます。
”切り抜き”をクリックすると、画像にグリッド（縦横の線）が表示され、ツールバーにさらに切り抜き関連のボタンが追加表示されます。
追加表示されたボタンの機能は以下の通りです。
ズーム、縦横比、回転の設定とトリミングの確定・キャンセルをすることができます。
・”ズーム”をクリックするとズームするスライダーが開きます。最大300％まで拡大できます。
・”縦横比”をクリックすると縦：横の比率を選択できるようになります。
・”ズーム”も”回転”も当然画像は切り取られことになりますが、画像のどこを切り取るかはマウスで画像を移動して調整可能です。
・”回転”をクリックするとクリック1回ごとに90度回転します。
もう少し細かく回転設定できないのが残念です。
・”ズーム”、”縦横比”、”回転”はそれぞれ同時に設定することができます。
・トリミングの確定は”適用”をクリックします。
・”キャンセル”をクリックすると、”切り抜き”のボタン表示が消えます。
例えば以下のように、縦横比を9：16の縦長とし、ズームとマウスで東京タワーの部分を拡大表示させることも可能です。
”画像上にテキストを追加”でカバーブロックへ変換
”画像上にテキストを追加”をクリックするとカバーブロックへ変換されます。
ツールバーの一番左”ブロックの変換”からでもできますが、カバーブロックはよく使われるので専用ボタンとなっているようです。
デュオトーンフィルターを適用する
デュオトーンフィルターを適用すると画像を2色デザインのデュオトーン表示にすることができます。
デュオトーンフィルターはversion5.8から追加された比較的新しい機能なので、別記事で詳細を紹介しています。
”置換”で画像を入れ替える
一度ブロック内に挿入した画像を入れ替えたい場合は”置換”を使います。
”置換”をクリックすれば再びメディアライブラリを開くことができるので、新しい画像を選択して入れ替えをします。
オプション（3点メニュー）
ブロック内編集ツールの一番右の3点はメニューはオプションとなっています。
画像ブロックだけでなく他のブロックと共通の機能で、ブロックの複製や新しいブロックの挿入、ブロックの削除 などの設定が開きます。
特に、ブロックの削除 は、ショートカットのShit+Alt+Zも覚えておくと便利です。
このほかにも、HTMLとして編集 や、再利用ブロックに追加 などの機能も選べます。
再利用ブロックに追加 については、以下の記事を参照ください。非常に便利な機能です。
画像のサイズとキャプション
画像の大きさは、画面右の情報パネルでも変更可能ですが、カスタムサイズにしたい場合は、直接画像の辺の画像調整キーをマウスでドラッグして変更可能です（縦横比はキープされます）。
キャプションも画像の下に直接入力可能です。
情報パネルでの操作
画像関連の最後に、画面右の情報パネルについて触れておきましょう。
画像ブロック内にカーソルがあると、右の情報パネルが、画像専用のブロックタブに自動的に切り替わります。
パネルでできることは以下の通りです。
- 画像のスタイル（標準または角丸タイプ）
- 代替テキストの設定
- 画像サイズの設定
まとめ
以上、画像ブロックでの画像の挿入方法および画像ブロックでの各機能について解説してきました。
画像は、webサイトの中でもテキストと並ぶ重要なパーツですので、画像ブロックで何ができるのか知ることは非常に大切です。
また、画像関連ブロックとして、”カバー”や”メディアとテキスト”などの応用ブロックがあるので合わせて習得していくとワードプレスでできる幅が大きく広がります。
このほかにも、Gutenberg（ブロックエディター）にはクラシックエディターにはない多くの機能がたくさんありますので、ぜひ習得していきましょう。
