WordPressの記事に画像を入れる作業は、ファイルをアップロードするだけなら難しくありません。ただし、挿入位置、表示サイズ、配置、スマートフォンでの見え方、リンク先まで考えずに操作すると、「画像が大きすぎる」「文章との間隔が不自然」「公開したら横にはみ出した」といった問題が起こります。
この記事では、ブロックエディターを使って画像を挿入し、記事の流れに合わせて配置する基本手順を初心者向けに解説します。画像そのものの推奨ピクセル数や圧縮方法、alt属性の詳しい書き分けは別のテーマとして扱い、ここでは編集画面で迷いやすい操作と、崩れにくい整え方に集中します。
画像を挿入する前に確認しておくこと
最初に、挿入する画像が記事内で何を伝えるためのものかを決めます。操作手順を示す画像、完成イメージを見せる画像、文章だけでは理解しにくい関係を補う図など、役割が明確なら配置場所も自然に決まります。
反対に、文章と関係の薄い画像を空白埋めとして置くと、読者の視線が途切れます。画像を入れる前に「この画像を見た読者は何を理解できるか」を一文で言える状態にしておくと、必要な画像だけを選びやすくなります。
画像ファイルを準備する
パソコンやクラウドから使う画像を選び、内容が分かるファイル名に変更しておきます。「IMG_1234.jpg」のような名前でもアップロードできますが、後からメディアライブラリで探しにくくなります。「wordpress-image-block.jpg」のように、画像の内容を短い英単語で表す名前が実務では扱いやすいです。
同じ画像の修正版を何度もアップロードすると、どれが最新か分からなくなります。公開前の段階でトリミングや文字の誤りを確認し、使うファイルを一つに絞ってからアップロードしましょう。
利用する権利を確認する
自分で撮影・作成した画像以外を使う場合は、利用規約とライセンスを確認します。検索結果に表示された画像を、そのまま保存して記事へ掲載してよいとは限りません。商用利用の可否、加工の可否、クレジット表記の要否を確認し、確認できない画像は使わないのが安全です。
個人情報や機密情報を見直す
画面のスクリーンショットには、ユーザー名、メールアドレス、顧客名、アクセス解析の数値、管理画面のURLなどが映り込むことがあります。アップロード前に画像全体を拡大して確認し、必要な箇所は切り抜きやぼかしで隠します。非公開情報は、公開後に気づいて画像を差し替えるより、挿入前に除く方が確実です。
ブロックエディターで画像を挿入する手順
WordPressの公式ドキュメントでは、投稿や固定ページへ画像を追加するために「画像」ブロックを使用する方法が案内されています。管理画面やテーマによってボタンの位置や表示名が多少異なる場合がありますが、基本の考え方は同じです。
- 管理画面で編集する投稿または固定ページを開きます。
- 画像を置きたい段落の末尾でEnterキーを押し、新しいブロックを作ります。
- ブロック追加の「＋」を押し、「画像」を検索して選びます。
- 新しいファイルなら「アップロード」、登録済みなら「メディアライブラリ」を選びます。
- 画像を選択し、記事内に挿入されたことを確認します。
- 配置、表示解像度、キャプション、リンク先を必要に応じて整えます。
画像ブロックは「/image」と入力して呼び出すこともできます。ショートカットに慣れていないうちは「＋」から選び、操作の流れを覚えてから使うと迷いません。
アップロードを選ぶ場合
パソコン内の新しい画像を使うときは「アップロード」を選びます。ファイル選択画面から画像を指定すると、WordPressのメディアライブラリへ保存され、同時に記事内へ挿入されます。編集画面へ直接ドラッグして追加できる環境もありますが、狙った位置に入ったか必ず確認してください。
アップロード中に画面を閉じたり、通信が切れたりすると、画像が正しく登録されないことがあります。サムネイルが表示され、保存操作が完了するまでは別ページへ移動しないようにします。
メディアライブラリを選ぶ場合
以前にアップロードした画像を再利用するときは「メディアライブラリ」を選びます。似た画像が多い場合は、検索欄やアップロード日による絞り込みを使います。WordPressのメディアライブラリには、アップロード済みの画像を表示・編集・検索する機能があります。
同じファイルを記事ごとに再アップロードすると、サーバー容量を余分に使い、後の管理も複雑になります。同じ画像をそのまま使うなら、既存の画像を選ぶ方が整理しやすいです。ただし、古い画像を差し替えると複数の記事に影響する可能性があるため、既存ファイル自体を編集する操作は慎重に行います。
コピーした画像を貼り付ける場合
環境によっては、クリップボードにコピーした画像を編集画面へ貼り付けることもできます。手早い方法ですが、意図しないファイル名になったり、必要以上に大きな画像が登録されたりしやすいため、挿入後にメディア情報と表示状態を確認します。
画像を置く位置の決め方
画像は、関連する説明の直前か直後に置くのが基本です。操作結果を見せる画像なら手順の後、これから説明する画面全体を示す画像なら説明の前に置くと、読者が文章と画像を対応させやすくなります。
見出しのすぐ下に置く場合
その章の全体像を示す画像は、見出しのすぐ下に置くと役割が伝わります。ただし、すべての見出し直下に装飾目的の画像を置く必要はありません。見出しを読めば内容が分かり、画像が新しい情報を足さない場合は省いて構いません。
手順の途中に置く場合
操作手順では、説明文と対応する画面画像を近くに置きます。一つの画像で多くの操作を説明しようとすると、読者が見る場所を判断できません。操作が複数の画面にまたがる場合は、重要な区切りごとに画像を分け、各画像の前後に何を見るべきかを書きます。
文章の途中へ無理に回り込ませない
パソコンでは画像の横に文章を回り込ませるレイアウトがきれいに見えることがあります。しかし、スマートフォンでは表示幅が狭くなり、文章が数文字ずつ縦長に並んだり、画像との間隔が詰まったりすることがあります。初心者のうちは、画像を独立したブロックとして段落の間に置く方が崩れにくいです。
画像の配置を整える基本操作
画像ブロックを選択すると、ブロック上部のツールバーや右側の設定欄に配置関連の項目が表示されます。表示される項目はテーマやWordPressのバージョンによって異なることがあります。
左寄せ・中央寄せ・右寄せ
本文中で単独表示する画像は、中央寄せが無難です。画像の左右に余白があっても視線が安定し、画面幅が変わっても意図が伝わりやすいからです。左寄せや右寄せは、画像の幅が小さいときや、サイト全体のデザインルールが決まっているときに使います。
同じ記事内で配置ルールがばらばらだと、読者は内容よりレイアウトの揺れを意識します。「本文画像は中央」「小さな補足画像は左」など、自分のサイトで簡単なルールを決めると、記事ごとの品質が安定します。
幅広と全幅の違い
テーマが対応している場合、通常の配置に加えて「幅広」や「全幅」を選べます。幅広は本文の通常幅より少し広く表示し、全幅は画面に近い幅まで広げる配置です。どちらも写真や大きな図には効果的ですが、テーマの本文幅やサイドバー構成によって見え方が大きく変わります。
操作画面の小さな文字を見せたいからといって、すべての画像を全幅にすると、記事のリズムが崩れます。まず通常幅で確認し、情報が読めない場合に幅広を検討します。全幅は公開前にパソコンとスマートフォンの両方で確認できる場合に限って使うと安全です。
配置変更と画像そのものの編集を分ける
中央寄せや幅広は、記事上での見せ方を変える操作です。一方、切り抜き、回転、縦横比の変更は画像自体の見える範囲に関わります。目的を分けずに操作すると、配置だけ変えたいのに画像の一部を切ってしまうことがあります。
まず記事内での位置と幅を決め、それでも不要な余白や見せたい範囲の問題が残る場合だけトリミングを検討します。WordPressの画像ブロックで編集した画像は、元画像とは別の画像ファイルとして保存される場合があるため、メディアライブラリに似た画像が増える点にも注意します。
表示サイズと解像度を選ぶ考え方
画像ブロックの設定では、「フルサイズ」「大」「中」「サムネイル」などの解像度を選べる場合があります。選択肢は元画像の大きさやテーマの設定によって変わります。
ここで重要なのは、画面上で画像ブロックを小さく見せることと、読み込む画像ファイルの大きさは同じではないという点です。大きなファイルを読み込み、表示だけ小さくすると、見た目に比べて通信量が大きくなることがあります。
本文幅に合う候補を選ぶ
まず「大」など本文幅に近い候補を選び、プレビューで鮮明さを確認します。文字を含む図や操作画面は、小さすぎる解像度を選ぶと読みにくくなります。逆に、単純なイメージ写真で必要以上にフルサイズを選ぶ理由はありません。
ドラッグでの拡大を頼りすぎない
画像のハンドルをドラッグして表示幅を変えられる場合でも、小さな元画像を大きく引き伸ばせば鮮明になるわけではありません。ぼやけた場合は、無理に拡大するのではなく、元画像の大きさと選択した解像度を見直します。
縦横比を統一する場面
複数の画像を並べる場合は、縦横比がそろっていると整って見えます。ただし、一枚ずつ独立して説明に使う画像まで同じ比率に切りそろえる必要はありません。情報が欠けないことを優先し、一覧性が必要なギャラリーや比較部分だけ統一します。
キャプションを付ける判断
キャプションは画像の下に表示する短い説明です。画像だけでは何を示しているか分かりにくい場合、出典や撮影条件を示す必要がある場合、操作画面の注目箇所を補足したい場合に役立ちます。
本文ですでに同じ内容を説明しているなら、キャプションで繰り返す必要はありません。キャプションは画像の意味を補うために使い、長い説明は本文へ戻します。テーマによって文字サイズや色が異なるため、公開前プレビューで読めるか確認します。
画像にリンクを設定する場合の注意点
画像ブロックには、リンクなし、メディアファイル、添付ファイルページ、任意のURLなどを選べる場合があります。説明用画像で拡大表示が不要なら、リンクなしが分かりやすい選択です。
メディアファイルへリンクする
細かい操作画面や図を原寸に近い状態で見せたい場合は、画像ファイルへリンクする方法があります。ただし、クリック後に画像だけの画面へ移動すると、記事へ戻りにくく感じる読者もいます。サイトに拡大表示の仕組みがある場合は、その動作も含めて確認します。
外部ページへリンクする
バナーや案内画像から外部ページへ移動させる場合は、画像だけに頼らず、リンク先が分かる文章も近くに置きます。画像が読み込まれない場合や、画像だと認識しにくい読者にも目的を伝えられます。リンク先が未公開なら、公開されるまでCTAとして設置しません。
複数画像を並べる方法
複数の画像を横に並べたい場合は、画像ブロックを無理に小さくして横へ置くより、「ギャラリー」ブロックや「カラム」ブロックを使う方が管理しやすいです。
ギャラリーブロックが向くケース
同じ種類の写真を一覧で見せる、完成例を複数並べる、手順の前後を比較するといった用途に向いています。列数を増やしすぎるとスマートフォンで一枚が小さくなるため、画像内の細部を読む必要がある場合は一列表示も検討します。
カラムブロックが向くケース
画像と短い説明を左右に配置したい場合や、二つの選択肢を比較したい場合に使えます。ただし、カラム内へ長い文章を入れると、スマートフォンで読む順序が分かりにくくなることがあります。編集画面だけで判断せず、狭い画面で縦に並んだときの順番を確認します。
スマートフォンで崩れない配置にする
編集作業をパソコンで行っていても、多くの読者はスマートフォンで記事を読みます。画像配置は、横幅が狭くなったときに問題が出やすいため、公開前の確認が欠かせません。
横にはみ出していないか確認する
画像の幅を固定値で指定したり、カスタムCSSを加えたりすると、画面幅より大きくなる場合があります。標準の画像ブロック設定だけを使っている場合でも、テーマ側のスタイルとの組み合わせで崩れることがあります。プレビューをスマートフォン幅に切り替え、左右へスクロールしないと見えない状態になっていないか確認します。
画像内の文字が読めるか確認する
パソコンで読める小さな文字も、スマートフォンではつぶれて見えることがあります。操作画面をそのまま縮小するのではなく、必要な部分を切り出す、重要箇所を分ける、本文でも説明するなど、画像だけに情報を閉じ込めない工夫が必要です。
余白が詰まりすぎていないか確認する
画像の上下に段落が密着すると、どの説明に対応する画像か分かりにくくなります。空行を何個も入力して余白を作るのではなく、テーマやブロックの余白設定を使います。空の段落は編集の途中で増減しやすく、端末ごとに見え方も安定しません。
画像を差し替える安全な手順
誤字や古い画面が見つかったときは、画像ブロックを選び、「置換」から新しい画像を指定します。ブロック全体を削除して作り直す方法もありますが、設定した配置、キャプション、リンク先まで消える可能性があります。
- 現在の配置、キャプション、リンク先を確認します。
- 新しい画像ファイルの内容と権利を確認します。
- 画像ブロックの置換機能で新しい画像を選びます。
- 表示解像度と縦横比を見直します。
- キャプションや代替テキストなど、画像固有の情報を再確認します。
- プレビューでパソコンとスマートフォンの表示を確認します。
既存のメディアファイル自体を上書きする操作は、別の記事で同じ画像を使っている場合に影響範囲が広がります。記事内の一枚だけを変えたいなら、新しいファイルを登録してブロック側で差し替える方法が分かりやすいです。
画像を削除するときの違いを理解する
記事から画像ブロックを削除しても、通常はメディアライブラリ内のファイルまで自動で消えるわけではありません。逆に、メディアライブラリからファイルを完全に削除すると、その画像を使っている他の記事でも表示されなくなる可能性があります。
記事上から外したいだけならブロックを削除し、サーバー上のファイルも不要だと確実に判断できた場合だけメディアライブラリで削除します。「未添付」と表示される画像でも、テーマ設定や手動リンクなどで使われていることがあるため、表示だけを根拠に一括削除しないようにします。
よくあるトラブルと確認順
画像を選んでも挿入されない
まず通信状態を確認し、アップロードが完了するまで待ちます。ファイル形式や容量がサイト側の制限に合っているかも確認します。別の小さな画像で試すと、特定ファイルの問題か、サイト全体の問題かを切り分けやすくなります。
エラーメッセージが出ている場合は、表示内容を記録します。繰り返し同じファイルをアップロードすると、失敗した添付ファイルが増えることがあるため、原因を確認してから再試行します。
画像が大きすぎる
画像ブロックの配置が全幅になっていないか、表示解像度がフルサイズになっていないか、幅の設定が意図しない値になっていないかを確認します。テーマの本文幅を超える設定が原因なら、通常幅や「大」などへ戻して比較します。
画像が小さくて読めない
選択している解像度を確認し、元画像に十分な大きさがあるかを見直します。小さな元画像を引き伸ばすのではなく、必要部分を切り出した画像を用意する方が読みやすくなります。細部が重要なら、画像の近くに文章で補足することも有効です。
画像の横に文章が入り込む
左寄せや右寄せによる回り込みが設定されていないか確認します。回り込みを意図していないなら中央寄せや通常配置へ戻し、画像の前後を別の段落にします。過去のクラシックエディター由来のHTMLや追加CSSが影響している場合は、ブロック設定だけでは直らないこともあります。
公開画面だけ配置が崩れる
編集画面と公開画面では、テーマのCSSが異なるため見え方に差が出ることがあります。キャッシュを更新し、別のブラウザやシークレットウィンドウでも確認します。プラグインによる画像最適化や遅延読み込みを使っている場合は、それらを一時的に切り分けて原因を探します。ただし、本番サイトの設定変更はバックアップと影響範囲を確認してから行います。
画像をクリックすると意図しないページへ移動する
画像ブロックを選び、リンク設定を確認します。過去に設定したメディアファイルや添付ファイルページへのリンクが残っていることがあります。クリックさせる必要がなければリンクを外し、外部リンクならURLと開き方を再確認します。
公開前に確認するチェックポイント
- 画像が説明内容と対応する位置にある
- 同じ記事内で配置ルールがそろっている
- 表示解像度が本文幅と用途に合っている
- 画像内の文字がスマートフォンでも読める
- 左右にはみ出さず、横スクロールが発生しない
- キャプションが必要な画像にだけ付いている
- 画像リンクの有無とリンク先が意図どおりである
- 個人情報や機密情報が映り込んでいない
- 利用条件やクレジット表記を確認している
- 差し替え後の画像情報を再確認している
一度にすべてを完璧に覚える必要はありません。まずは「関連する文章の近くに置く」「通常幅か中央寄せを基本にする」「スマートフォンで確認する」の三つを習慣にすると、大きな配置ミスを減らせます。
記事の種類に合わせた配置例
画像の正しい位置は一つではありません。記事の目的に合わせて、読者が次に知りたいことを予測しながら置くと、画像が単なる飾りではなく理解を助ける要素になります。
操作手順の記事
操作手順では、「何をするか」を文章で先に伝え、その直後に操作対象が分かる画像を置く流れが基本です。画像の後には、操作が成功したときの状態や次に進む条件を書きます。こうすると、読者は文章で目的を理解し、画像で場所を確認し、結果を文章で判断できます。
一つの画面に矢印や囲みを大量に加えるより、迷いやすい操作だけを別の画像に分ける方が読みやすい場合があります。画像の加工で説明を増やしすぎず、更新で画面が変わっても修正しやすい構成を意識します。
比較記事
二つの見た目や結果を比較する記事では、画像の大きさと縦横比をそろえると違いを判断しやすくなります。左右に並べる場合は、どちらが何を示すかを画像の近くに文章で明記します。色だけで区別すると見分けにくい読者がいるため、「変更前」「変更後」など意味が伝わる説明も添えます。
スマートフォンでは左右の画像が縦に並ぶことがあります。上から読んだときにも説明の順番が成立するか、プレビューで確認してください。
事例や完成例を見せる記事
完成例を見せる場合は、最初に全体像を示し、その後に注目してほしい部分を拡大して説明します。細部の画像だけを先に並べると、読者はそれが全体のどこにあるのか分かりません。全体から部分へ進む順番にすると理解しやすくなります。
長い解説記事
文章量が多い記事では、画像の数を機械的に増やすのではなく、理解が止まりやすい箇所に絞って置きます。同じ意味の写真が続くと、重要な図まで流し読みされやすくなります。各画像に「説明の補助」「比較」「証拠」「操作場所」のどの役割があるかを確認し、役割がない画像は削る判断も必要です。
画像配置のルールをサイト内でそろえる
記事を増やしていくと、書き手や作成時期によって画像の置き方が変わりやすくなります。簡単なルールを決めておくと、毎回ゼロから迷わずに済み、公開前確認も短くできます。
- 本文中の単独画像は原則として中央寄せにする
- 画像の前に何を見る画像かを一文で説明する
- キャプションは補足や出典が必要な場合だけ使う
- クリックが不要な画像にはリンクを付けない
- 複数画像はギャラリーまたはカラムで管理する
- 公開前にスマートフォン幅で全画像を確認する
ルールは細かくしすぎると運用できません。まずは頻繁に迷う項目だけを決め、実際の記事で問題が起きたときに追加します。テーマを変更した場合は本文幅や全幅表示の動作が変わる可能性があるため、代表的な記事を使ってルールを見直します。
編集担当者へ引き継ぐときの記録
複数人で記事を作る場合は、元画像の保存場所、利用条件、加工の有無、差し替え理由を記録しておくと安全です。WordPress上の画像だけでは、誰がどこから入手し、どの編集をしたか分からなくなることがあります。
画像のファイル名と記事内の使用箇所を対応させ、公開前の確認担当者が元データまでたどれる状態にします。外部素材を使う場合は、素材ページのURLや利用規約を確認した日も管理します。記事本文には不要な管理情報ですが、更新や権利確認の際に役立ちます。
画像挿入と配置を効率よく進める流れ
記事を書きながら一枚ずつ画像を探すと、文章作成と画像編集が頻繁に切り替わり、作業が止まりやすくなります。先に文章の骨組みを作り、「ここに操作画面」「ここに完成例」と仮のメモを置いてから、必要な画像をまとめて準備すると効率的です。
画像を挿入した後は、記事の上から順に配置を整えます。最後にプレビューで全体のリズムを見て、画像が連続しすぎている箇所や、説明と離れている箇所を調整します。個別の画像だけでなく、記事全体を通して見ることが読みやすさにつながります。
まとめ
WordPressで画像を挿入する基本は、画像ブロックを追加し、アップロードまたはメディアライブラリからファイルを選ぶことです。その後、記事内での役割に合わせて位置、配置、表示解像度、キャプション、リンク先を整えます。
初心者が特に意識したいのは、画像を関連する説明の近くに置くこと、文章の回り込みを使いすぎないこと、公開前にスマートフォン表示を確認することです。見た目だけでなく、読者が文章と画像を迷わず対応させられるかを基準にすると、崩れにくく伝わりやすい記事になります。
