WordPressで画像を挿入する方法｜ブロックエディタ完全ガイド

画像の挿入は毎日やる操作なので、1回あたり10秒の差が効いてきます。ここではブロックエディタでの入れ方を、入口ごとに整理します。

先に結論だけ。最速はスラッシュコマンドです。本文の空行で /画像 と打ってEnter。プラスボタンからブロック一覧を辿るより速い。PCにファイルがあるなら、本文へ直接ドラッグ&ドロップするだけでアップロードと挿入が同時に終わります。

画像ブロックの3つの入口

画像ブロックを置くと、3つの選択肢が出ます。どれを使うかで後の扱いが変わります。

1. アップロード

PCやスマホの中にあるファイルを選んで送ります。この時点でメディアライブラリにも登録されるので、後から別の記事で使い回せます。最も一般的な入口です。

2. メディアライブラリ

既にサイトへ送ってある画像から選びます。同じ画像を複数の記事で使う場合、毎回アップロードすると同じファイルが重複して溜まっていくので、ライブラリから選ぶのが正解です。

3. URLから挿入

外部サイトの画像URLを直接指定します。手軽ですが、自サイトにファイルが保存されないため、リンク先が消えると画像も消えます。相手のサーバー帯域を使うことにもなるので、他人のサイトの画像に対しては基本的に使わないでください。自分が管理する別ドメインやCDN上の画像を指す場合に限って使うのが安全です。

画像ブロック以外の選択肢

ブロック	用途	使いどころ
画像	1枚を本文の流れに置く	基本。迷ったらこれ
ギャラリー	複数枚を格子状に並べる	写真をまとめて見せる
カバー	画像を背景にして上に文字を載せる	セクションの見出し、ヒーロー領域
メディアと文章	画像と文章を左右に並べる	商品説明、プロフィール
カラム＋画像	任意の枚数を横並びにする	サイズを個別調整したい横並び

横並びのレイアウトはやり方が複数あって迷いやすいので、比較を WordPressで画像を横並びにする5つの方法 に分けて書いてあります。

挿入した後に設定すること

代替テキスト（alt）

右サイドバーの「代替テキスト」に、画像の内容を短い文で書きます。スクリーンリーダーが読み上げる唯一の情報で、画像が読み込めなかった時に代わりに表示されるテキストでもあります。検索エンジンが画像を理解する手がかりにもなる。

「写真1」「IMG_2938」のようなファイル名の代用は意味がありません。何が写っているかを書いてください。純粋な装飾目的の画像であれば、空のままで構いません。

配置

なし／左寄せ／中央／右寄せ／幅広／全幅から選びます。「幅広」「全幅」はテーマがワイド幅に対応している場合のみ正しく効きます。非対応テーマで使うとレイアウトがはみ出すので、崩れたらまず「なし」に戻して切り分けてください。

サイズ

サムネイル／中／大／フルサイズ、または任意のピクセル指定。WordPressはアップロード時に複数サイズを自動生成しているので、表示枠に合ったものを選べば無駄な転送量を減らせます。400px幅の枠に1600pxの画像を読ませているケースは実際によくあります。

リンク先

なし／メディアファイル／添付ファイルのページ／カスタムURL。クリックで拡大表示したい場合は「メディアファイル」を選び、テーマまたはプラグインのライトボックスと組み合わせます。既定では「なし」なので、拡大できない場合はここを確認してください。

クラシックエディタの場合

1. エディタ上部の「メディアを追加」ボタンを押す
2. 「ファイルをアップロード」または「メディアライブラリ」タブを選ぶ
3. 右側の「添付ファイルの表示設定」で配置・リンク先・サイズを指定
4. 「投稿に挿入」を押す

クラシックエディタでは、挿入時に決めた配置とサイズが直接HTMLに書き込まれます。後から変えるにはテキストモードでHTMLを触ることになるので、挿入前に設定を決めておく方が手戻りがありません。

うまくいかない時

• そもそもアップロードが失敗する — HEIC形式、ファイルサイズ上限、PHPメモリ、権限など原因が分かれます。画像がアップロードできない原因8つと対処法に切り分け手順をまとめました
• アップロードは通るが画像が表示されない — パーミッション、URLの不一致（httpとhttpsの混在）、キャッシュが主な原因です
• 画像サイズを変更できない — テーマのCSSが優先されている可能性があります。画像サイズを変更できない時の原因と解決法を参照してください
• スマホだと操作しづらい — ブロックエディタはモバイルでも動きますが、当たり判定が小さい。写真は先にメディアライブラリへ送っておき、編集時は選ぶだけにするのが現実的です

枚数が多い時の考え方

10枚、20枚と挿入する記事では、1枚ずつアップロードしていると時間がかかります。手順を分けるのが定石です。

1. 先に全部の画像をメディアライブラリへ送っておく
2. 記事編集では「メディアライブラリ」から選ぶだけにする

この「先に送っておく」工程は、PCならフォルダごとドラッグで済みます。問題はスマホで、標準の管理画面から複数枚を送るのは手間がかかる。SnapPressはiPhoneから最大20枚をまとめてメディアライブラリへ直接送れるので、この工程だけを数秒に短縮できます。記事の執筆はPCで、写真の投入はスマホで、という分業がやりやすくなります。

メディアライブラリ側の整理や運用は ワードプレス メディアライブラリ完全ガイド、画像を軽くする話は WordPressの画像圧縮 にまとめてあります。