WordPress画像挿入完全ガイド!基本操作、応用設定、編集、プラグインなど徹底解説!

WordPress 画像挿入

ブログを書いていて、こんな悩みはありませんか?

「記事にぴったりのサイズで画像を挿入したいけど、どう操作すればいいの?」
「アップロードはできるけど、思った場所に表示されなくてイライラ……」
「画像にリンクを付けたいのに、設定方法がよくわからない!」
「トリミングや差し替えをしたいけど、いちいち再アップロードするのが手間……」

これらはすべて、WordPressで画像を扱う際に多くの初心者が直面するお悩みです。

しかし、基本を押さえれば──

  • ブロックエディタとクラシックエディタの違いを理解し、
  • 目的に応じたブロック選択やレイアウト調整を覚え、
  • AltテキストやキャプションでSEO・アクセシビリティを強化し、
  • プラグインで圧縮・リサイズ・ギャラリー作成を一括管理すれば、

ほとんどの操作がスムーズにこなせるようになります!

本記事では、画像の基本挿入から応用設定、編集、トラブル対応、さらに便利なプラグイン活用まで、完全網羅で解説します。

これを読めば、あなたのブログがもっと魅力的に、もっと快適に運営できるようになるはずです🎉

目次

WordPressへの画像追加手順

ブロックエディタでの画像配置

「画像」ブロックを追加する方法

  1. 記事編集画面で+ボタンをクリック
  2. 「画像」ブロックを選択 📷
  3. ブロック内の 「アップロード」 または 「メディアライブラリ」 をクリック
  4. 挿入したい画像を選んで 「挿入」 を押す

ポイント:

  • アップロード後にサイドパネルで 代替テキスト(alt)キャプション を入力できます。
  • スマホから操作するときは、ブロック上部の メニューからもブロック追加が可能です。

URLから直接挿入する手順

  1. 「画像」ブロックを選択
  2. 「URLから挿入」 をクリック 🔗
  3. 外部サーバー上にある画像のURLをペースト
  4. Enter で画像が表示されたら完了

注意:

  • 他サイトの画像を使う際は、著作権や表示速度を確認しましょう。
  • 表示が崩れる場合は、画像の横幅がコンテンツ領域を超えていないかチェックしてください。

クラシックエディタでの挿入方法

  1. ツールバーの 「メディアを追加」 ボタンをクリック
  2. ダイアログから 「ファイルをアップロード」 タブを選択
  3. 画像をドラッグ&ドロップまたは「ファイルを選択」でアップロード
  4. 右側の設定項目で リンク先表示サイズ を選び、「投稿に挿入」 をクリック

Tip:

  • サイズ設定は「フルサイズ」「中サイズ」「サムネイル」などから選べます。
  • 後から編集したい場合は、画像上でクリックして「編集」アイコンを押してください ✏️。

メディアライブラリから選択して挿入

  1. 記事編集画面で 「メディアライブラリ」 を開く
  2. 既にアップ済みの画像一覧が表示される
  3. 挿入したい画像をクリックして選択 ✅
  4. 右下の 「投稿に挿入」 をクリック
スクロールできます
比較ポイント新規アップロードメディアライブラリから選択
利便性その場で画像追加が可能既存画像を再利用できる
適用シーン新しい素材を使いたいとき過去に使った画像を再度使いたいとき
注意点大容量ファイルは時間がかかる場合ありゴミ箱に入れた画像は表示されない

ワンポイント:

  • カテゴリやタグで画像を管理すると、目的の素材がすぐに見つかります 🎯。
  • 画像の一覧表示を「リスト表示/グリッド表示」で切り替えて探しやすさを調整しましょう。

画像の見栄えを整える設定

サイズと配置のコントロール

左寄せ・中央揃え・右寄せを切り替える

ブロック選択時に表示されるツールバーのアイコンから、左寄せ(Align Left)中央揃え(Center)右寄せ(Align Right)をワンクリックで切り替えられます。

  • 左寄せ:テキストが右回り込み
  • 中央揃え:画像のみがセンター配置
  • 右寄せ:テキストが左回り込み

Tip: 周囲の余白(パディング)を調整したいときは、サイドパネルの「幅」や「高さ」で細かく指定できます。

カラム/ギャラリーブロックで横並びにする

  • カラムブロックを使う場合:
    1. +ボタンで「カラム」を選択
    2. 列数を設定(例:2列、3列など)
    3. 各カラムに「画像」ブロックを配置
  • ギャラリーブロックを使う場合:
    1. +ボタンで「ギャラリー」を選択
    2. 複数の画像をアップロードまたはライブラリから選択
    3. サイドパネルで「列数」を指定
スクロールできます
方法メリット注意点
カラムブロックブロックごとに個別設定が可能画像間のスペースは手動で調整が必要
ギャラリーブロック自動的に均等配置・キャプション対応レイアウトの微調整がやや制限される

Altテキスト・キャプションの設定

  • 代替テキスト(Alt)
    • サイドパネルの「代替テキスト」欄に、画像内容を端的に記述
    • SEOアクセシビリティ向上に必須 ✨
  • キャプション
    • 画像下の入力欄に説明文を追加
    • ページデザインに合わせて、省略または装飾が可能

ワンポイント: Altは「何が写っているか」を、キャプションは「なぜその画像を掲載したか」を意識するとわかりやすくなります。

画像にリンクを付ける方法

新しいタブで開く外部リンク設定

  1. 画像を選択してツールバーのリンクアイコン🔗をクリック
  2. URL欄にコピーした外部サイトのアドレスをペースト
  3. 歯車アイコンを開き、「新しいタブで開く」をオン

サイト内ページへのリンク

  1. リンクアイコンをクリック
  2. 検索欄に自サイト内のページタイトルを入力・選択
  3. 「適用」を押して完了
スクロールできます
リンク種別設定手順利用シーン
外部リンク(新タブ)URL貼り付け+「新しいタブで開く」ON関連情報サイトや資料への誘導
内部リンクページ名検索+選択サイト内コンテンツ同士の回遊促進

注意点:

  • 外部リンクはnoopener noreferrerを自動付与し、セキュリティとパフォーマンスを確保します。
  • 内部リンクは相対パスで設定されるため、URL変更時に自動更新されます。

挿入後の画像編集

トリミング・切り抜き機能の使い方

  1. 画像をクリックして、ブロック上部に表示される 鉛筆アイコン(編集) をクリック ✏️
  2. エディタ画面で 「トリミング」 ボタンを選択
  3. ドラッグして切り取り範囲を指定し、✓(適用) を押す
  4. 必要に応じて 縦横比 を固定/解除して調整

ポイント:

  • 切り抜き後でも「元に戻す」ボタンで何度でもリセット可能。
  • 細かい位置調整はズーム機能を併用すると便利です🔍

画像サイズの再調整

  • サイドパネルの「固定幅/高さ」欄にピクセル数を直接入力
  • ドラッグで幅を変更すると、自動的に縦横比を維持(比率を固定する→ON/OFF可能)
  • あらかじめ用意された プリセット(サムネイル・中サイズ・フルサイズ) も選択可
スクロールできます
方法メリット注意点
手動入力ピクセル単位で正確に調整できる数値間違いに注意
プリセット選択簡単・手早く設定可能デザイン幅に合わない場合あり

画像の置き換え・差し替え

  1. 画像を選択し、ブロック上部の 「置き換え」 ボタンをクリック 🔄
  2. 「アップロード」 または 「メディアライブラリ」 から新しい画像を選択
  3. Altテキストやキャプションなどの設定はそのまま引き継がれる

ワンポイント:

  • 差し替え前と同じリンク設定やレイアウトを保持したまま更新可能🎯
  • 大量差し替え時はプラグイン利用で一括対応も検討すると効率的です。

挿入した画像の削除手順

  1. 画像ブロックをクリックして選択
  2. ブロックの左に表示される ︙(オプション) メニューを開く
  3. 「ブロックを削除」 または Delete キー で削除 🗑️
  4. 完全にライブラリから消したい場合は「メディアライブラリ」→該当画像 → 「削除」

注意:

  • ブロック削除だけではライブラリには残るため、ディスク容量を節約したい場合はライブラリ側での削除も忘れずに!

画像が追加できない・表示されないときの対策

アップロードエラーの原因別チェック

管理画面から再ログイン

  • 原因:セッション切れや権限エラー
  • 対策
    1. 管理バー右上のユーザー名をクリック
    2. 「ログアウト」を選択
    3. 再度ログインしてからアップロードを試す

ポイント:

  • ログイン直後はキャッシュやクッキーの影響を受けにくく、権限周りの問題が解消しやすいです 🔑

ブラウザキャッシュのクリア

  • 原因:古いスクリプトやスタイルシートが残っている
  • 対策
    • Windows:Ctrl + F5
    • Mac:⌘ + Shift + R
    • ブラウザ設定から「閲覧履歴データを消去」を実行

注意:

  • キャッシュクリア後は再ログインやプラグイン表示設定がリセットされる場合があるので、再確認しましょう。

ネット回線状況の確認

  • 原因:通信が不安定・遅延が発生
  • 対策
    1. 他サイトへの接続や動画ストリーミングで速度をテスト 📶
    2. Wi‑Fiルーターの再起動や、有線接続への切り替え
    3. スマホテザリングで試して問題の切り分け

ワンポイント:

  • 大きな画像(5MB以上)は特にアップロードに時間がかかるため、一度小さくリサイズして試すと成功しやすくなります。

ファイル形式・容量の見直し

  • 原因:許可されていない拡張子、またはサイズ超過
  • 対策
スクロールできます
チェック項目対策例
形式(拡張子)JPG/PNG/GIF/WebP に変換
容量2MB以下に圧縮(オンラインツール活用)
画像の縦横比異常に細長くないか確認

おすすめ:

  • 無料のオンライン圧縮サイトを使うと手軽に容量ダウンできます 🎨

プラグイン競合の一時停止

  • 原因:セキュリティや最適化系プラグインが干渉
  • 対策
    1. 管理画面の「プラグイン」→「インストール済みプラグイン」
    2. 直近で追加・更新したものから 「停止」 を実行
    3. 問題が解消したら、1つずつ再有効化して原因を特定

ポイント:

  • 一度に複数停止すると原因特定が難しいので、順番にひとつずつ試してください。

管理者やホスティング会社への問い合わせ

  • 社内システム管理者
    • アクセス権限やサーバー設定(PHPバージョン、アップロード上限)を確認
  • ホスティング会社
    • サーバーディスク容量の上限
    • セキュリティ制限(ModSecurityやファイアウォール)
    • エラーログの共有依頼

助けを借りるときのコツ

  • 発生日時、画面キャプチャ、エラーメッセージをまとめて伝えると、対応がスムーズです 📋
  • 連絡先情報は契約書類やサポートページに記載されています。

プラグインで画像管理を効率化

画像圧縮・最適化ツール

  • EWWW Image Optimizer
    • アップロード時に自動でファイルサイズを縮小
    • WebP 形式への変換にも対応✨
  • Smush
    • バルク圧縮機能で既存画像も一括最適化
    • 無料版でもロスレス圧縮が利用可能🔧

ポイント:

  • 圧縮率を上げすぎると画質劣化のリスクあり。サンプルを確認しながら調整を。
  • バックアップ機能があると、元画像に戻せるので安心です。

自動リサイズ系プラグイン

  • Imsanity
    • アップロード時に幅・高さを自動調整(例:横幅を1200pxに統一)
    • 一括変換機能で過去画像もリサイズ可能
  • Resize Image After Upload
    • 設定した最大値を超えた画像のみを縮小
    • 元サイズ保持のオン/オフ切り替え可🎛️
スクロールできます
プラグイン名主な機能メリット
Imsanity一括リサイズ、自動リサイズ手間なく統一感ある画像サイズを実現
Resize Image After Upload最大値超過時のみリサイズ高画質を保ちつつ不要サイズを抑制

スライドショー/ギャラリー作成プラグイン

  • Meta Slider
    • ドラッグ&ドロップでスライドショーを簡単作成
    • レスポンシブ対応でスマホでも美しく表示📱
  • FooGallery
    • 豊富なギャラリーテンプレートを選択可能
    • ライトボックス機能で拡大表示をサポート
  • Envira Gallery
    • ドラッグ操作でギャラリー構築
    • アルバム機能やスライダー連携が充実
スクロールできます
プラグイン名特徴利用シーン
Meta Sliderシンプルなスライダー作成新着情報やバナー表示
FooGalleryカスタマイズ豊富なグリッドギャラリーポートフォリオ・作品一覧
Envira Galleryアルバム管理・動的フィルタリング対応大量画像をカテゴリ別に整理したい時

ワンポイント:

  • テンプレート選択後にCSS調整すると、サイトデザインにぴったり合わせられます🎨
  • プラグインを多用すると管理画面が重くなることもあるので、不要機能は無効化しておきましょう。

上記プラグインを組み合わせることで、容量削減・画質維持・魅力的な見せ方を同時に実現できます。

まとめ

本ガイドでは、以下のステップを順番にご紹介しました。

  1. 基本操作:ブロックエディタ/クラシックエディタでの画像挿入
  2. 応用設定:サイズ調整・配置、Altテキスト・キャプション、リンク付与
  3. 編集機能:トリミング、リサイズ、差し替え、削除
  4. トラブル対策:ログイン再確認、キャッシュクリア、ファイル形式・容量チェック、プラグイン競合の切り分け
  5. プラグイン活用:画像圧縮・自動リサイズ・スライドショー/ギャラリー作成

これらを実践すれば、記事の見栄え向上だけでなく、表示速度の最適化SEO対策にもつながります。

まずは一つひとつ試しながら、操作に慣れていきましょう。

今日からあなたのブログに“映える”画像をどんどん追加して、読者の目を引くコンテンツを作り上げてください!

目次