2026年9月21日

2026年9月21日

WordPressで記事に画像を挿入する方法|ブロックエディターの手順と代替テキスト・サイズの設定

WordPress の記事に画像を入れるには、ブロックエディターで「画像」ブロックを追加し、画像をアップロードするかメディアライブラリから選ぶだけです。この記事では、その基本手順に加えて、代替テキスト・サイズ・リンク・配置の設定、アップロード前の準備、うまく入らないときの確認ポイントまでを説明します。読み終えると、見た目と表示速度の両方に配慮した画像の入れ方ができるようになります。

画像を挿入する前の準備

画像はアップロードする前に整えておくと、後の手間とページの重さを減らせます。

  • 横幅を必要な大きさに縮める: スマートフォンで撮った写真は横幅が4,000ピクセルを超えることもあります。記事の本文幅に対して大きすぎる画像は、表示が重くなるだけです。WordPress は横幅または高さが 2,560 ピクセルを超える画像を自動で縮小した版を作りますが(WordPress 5.3 以降の標準動作)、元から適切な大きさにしておくほうが扱いやすくなります。
  • ファイル形式を選ぶ: 写真は JPEG か WebP、図や画面キャプチャのように色数が少なく輪郭がはっきりしたものは PNG か WebP が向いています。WebP は WordPress 5.8、AVIF は WordPress 6.5 からアップロードに対応しています。ただし、サーバーの画像処理ライブラリが対応していないと縮小版が作られないことがあります。
  • ファイル名をわかりやすくする: IMG_0123.jpg より wordpress-image-block.jpg のような名前のほうが、メディアライブラリで探しやすくなります。日本語のファイル名は環境によって扱いが変わるため、半角英数字とハイフンにしておくと無難です。
  • 写り込みを確認する: 画面キャプチャに個人情報やメールアドレスが写っていないか、写真に位置情報などのメタデータが残っていないかを確認します。

ブロックエディターで画像を挿入する手順

基本の流れは次のとおりです。ボタンの名前や位置は WordPress のバージョンによって多少変わります。以下は執筆時点の画面を想定した説明です(2026年10月現在)。

  1. 画像を入れたい位置で、ブロック追加ボタン(「+」)を押して「画像」を選びます。空の段落で /画像 または /image と入力しても呼び出せます。
  2. 表示された画像ブロックで、次のどれかを選びます。

- アップロード: パソコン内のファイルを選んでアップロードします。 - メディアライブラリ: すでにアップロード済みの画像から選びます。 - URL から挿入: 外部の画像 URL を指定します。外部の画像は相手のサーバー次第で消えたり差し替わったりするため、自分の画像はアップロードして使うのが基本です。

  1. 画像が表示されたら、右側の設定パネル(ブロック設定)で代替テキストやサイズを整えます。
  2. 必要に応じて画像の下にキャプションを入力します。

ファイルをエディターの画面に直接ドラッグ&ドロップしても画像ブロックが作られます。クリップボードにコピーした画像を貼り付けた場合も、多くの環境では自動でアップロードされます。

クラシックエディターを使っている場合は、本文の上にある「メディアを追加」から同じようにアップロード・選択して挿入します。

挿入後に設定しておきたい項目

代替テキスト(alt)

代替テキストは、画像が表示できないときや、スクリーンリーダーで読み上げるときに使われる説明文です。検索エンジンが画像の内容を理解する手がかりにもなります。

  • 画像が伝えている内容を、一文程度で具体的に書きます(例: 「画像ブロックの設定パネルで代替テキストを入力している画面」)。
  • 「画像」「写真」だけの説明や、キーワードの羅列は避けます。
  • 本文で十分に説明されている飾りの画像は、空欄のままにする選択肢もあります。

代替テキストは画像ごとに保存されるのではなく、挿入したブロックごとに設定されます。メディアライブラリで入力した内容は、挿入時の初期値として使われます。

画像サイズと解像度

WordPress はアップロード時に「サムネイル」「中」「大」などの縮小版を自動で作ります。ブロック設定の解像度(画像サイズ)で、どの版を使うかを選べます。本文の幅に合う版を選ぶと、不要に大きな画像を読み込まずに済みます。

また、WordPress は画像に srcset 属性を付けて、画面の大きさに合わせてブラウザが適切な版を選べるようにしています。表示サイズを小さくしたいだけなら、元画像を差し替える必要はありません。

リンクと配置

  • リンク: 画像をクリックしたときに、拡大画像やほかのページへ移動させられます。拡大表示(ライトボックス)の設定があるバージョンもあります。
  • 配置: 左寄せ・中央・右寄せのほか、テーマが対応していれば幅広・全幅を選べます。

アイキャッチ画像との違い

本文中の画像とは別に、記事の一覧や SNS で使われる「アイキャッチ画像」があります。こちらは画像ブロックではなく、投稿の設定パネルで指定します。本文の最初の画像が自動でアイキャッチになるわけではないので、別途設定してください。

複数の画像をまとめて見せる

手順の説明で画像を何枚も並べたいときは、「ギャラリー」ブロックを使うと、複数の画像を格子状に並べられます。画像1枚ごとに説明が必要なら、画像ブロックを並べて、それぞれにキャプションを付けたほうが読みやすくなります。

表示速度への配慮

画像は記事の中でもっとも容量が大きくなりやすい要素です。

  • WordPress は本文中の画像に loading="lazy" を自動で付け、画面外の画像の読み込みを後回しにします(WordPress 5.5 以降)。ただし、記事冒頭の大きな画像は遅延させないほうが表示が速くなるため、WordPress 6.3 以降は冒頭付近の画像に遅延読み込みを付けない調整も入っています。
  • 画像の圧縮や WebP への変換は、画像最適化プラグインでアップロード時に自動化できます。プラグインを入れる前にはバックアップを取り、画質が許容範囲かを確認してから本番で使ってください。

画像がうまく挿入できないとき

よくある原因を、起きやすい順に挙げます。

  1. ファイルサイズが上限を超えている: メディアの「新規追加」画面に、アップロードできる最大サイズが表示されます。超えている場合は画像を縮小するか、サーバー会社の管理画面で PHP の upload_max_filesize と post_max_size を見直します。
  2. 対応していない形式: HEIC など、そのままではアップロードできない形式があります。JPEG や WebP に変換してからアップロードします。
  3. 「HTTP エラー」が出る: 大きな画像の縮小処理でサーバーのメモリや処理時間が足りないことがあります。画像を小さくして再度試し、それでも出る場合はサーバー会社に相談します。
  4. アップロード先に書き込めない: wp-content/uploads の権限や所有者が正しくないと保存できません。権限を変更する前に、サーバー会社の推奨設定を確認してください。

まとめ

  • 記事に画像を入れるには、画像ブロックを追加してアップロードするか、メディアライブラリから選びます。
  • アップロード前に横幅とファイル形式を整え、写り込みを確認しておきます。
  • 代替テキストは画像の内容を具体的に書き、サイズは本文幅に合う版を選びます。
  • アイキャッチ画像は本文中の画像とは別に、投稿の設定で指定します。
  • うまく入らないときは、容量の上限・形式・サーバーの処理能力・書き込み権限の順に確認します。

お気軽にご相談ください

お見積りへ お問い合わせへ
▲