WordPressで記事を書くとき、文章だけではなく「画像」を入れることでぐっと見やすく、読者に伝わりやすい内容になります。
しかし、ただ画像をアップロードして挿入するだけでは不十分です。
サイズが大きすぎればページの表示が遅くなり、代替テキスト（ALT）が入っていなければSEOやアクセシビリティの面で不利になることもあります。
この記事では、初心者の方でもすぐ実践できる 画像の基本的な扱い方 をまとめました。
アップロード方法から最適なサイズ設定、代替テキストの書き方、配置の工夫までを解説しますので、記事作成にぜひ活かしてください。
スポンサーリンク
WordPressで画像を使う場面
WordPressで記事を書いていると、さまざまな場面で画像を活用することになります。
文章だけの記事よりも、画像を挿入することで内容がわかりやすくなり、読者にとって親切な記事になります。
画像は「見栄えをよくするため」だけでなく、読者の理解を助け、記事全体の品質を高める重要な要素 です。
よくある画像の使いどころ
- アイキャッチ画像（記事のトップ画像）
- 👉ブログ一覧やSNSシェアで目を引くために設定する画像。
- 記事本文内の説明用画像
- 実際の画面キャプチャやイラストを使って手順を説明すると理解しやすい。
- 商品やサービスの紹介画像
- 実物写真を掲載して信頼性を高める。
- 図解やグラフ
- データや比較をビジュアルで伝えることで説得力アップ。
最適な画像サイズ
大きな画像はページの読み込み速度を遅くします。
SEOや読者の快適さを考えると、最適化は欠かせません。
サイトで用意する画像は、あらかじめサイズも考えておきましょう。
サイズの目安
- 横幅：1200px前後（記事内の見出し画像として十分）
- 解像度：72dpi（Web用に適した解像度）
- ファイル形式：
- 写真は JPEG
- 図やイラストは PNG
- 軽量化に優れた WebP もおすすめ
当ブログでは以下の画像サイズで作成しています。
- ブログ記事挿入画像：800×533 px
- アイキャッチ：1200×675 px
圧縮のコツ
画像はそのままアップロードすると、1枚で 数MB になることがあります。
記事に何枚も入れると、ページの読み込みが遅くなり、読者が離脱する原因になります。
そこで重要なのが 圧縮（軽量化） です。
1. アップロード前に圧縮しておく
あらかじめ画像を圧縮しておけば、負荷を与えません。
目安として、200KB以下 に収まると快適です。
無料で使えるツールもあり、利用者も多いのは「TinyPNG」です。
TinypngはJPEG、PNG、Webp、に対応しており、操作も簡単なところが人気の理由です。
画像ファイルをドラッグ＆ドロップし、圧縮された画像はダウンロードできます。
-
-
TinyPNG – Compress WebP, PNG and JPEG images intelligently
Free online image optimizer for faster websites! Reduce the file size of your WEBP, JPEG and PNG Ima ...
tinypng.com
2. WordPressプラグインを使う
毎回手動で圧縮するのが大変な場合は、WordPressプラグインを利用できます。
人気なのが「EWWW Image Optimizer」で、アップロードする画像を圧縮してファイルサイズを自動で小さくしてくれるプラグインです。
「EWWW Image Optimizer」の導入や使い方については、こちらの記事を参考にしてください。
-
-
EWWW Image Optimizerの設定と使い方について - シルシクリエイト
EWWW Image OptimizerはWordPressの必須と言われるプラグインで、画像を圧縮しサイトの読み込み速度を向上させることができます。初心者にもわかりやすく設定手順と使い方について解説 ...
464factory.com
WordPressに画像を挿入する
WordPressでは、記事作成画面から簡単に画像を挿入できます。
画像は「ブロック」として扱われ、文章の中に自由に配置できます。
画像の追加方法
記事編集画面で「＋」ボタンをクリックし、「画像」ブロック を選択します。
すると以下のような画面表示になります。
以下の方法で画像を挿入できます。
| 項目 | 内容 |
|---|---|
| アップロード | PCから新しい画像を選ぶ |
| メディアライブラリ | 過去にアップロードした画像から選ぶ |
| URL挿入 | 外部URLの画像を呼び出す |
画像挿入後は、サイドバーでデザインの項目で調整できます。
テーマによってサイドバーの内容は変わります。
複数画像を並べたいとき
記事の中で複数の画像を並べて表示したい場合、WordPressでは カラムブロック や ギャラリーブロック を活用するときれいに整列できます。
1. カラムブロックを使う方法
画像を横並びに配置し、それぞれの下にテキスト（説明文やボタンなど）も入れられます。
商品写真＋説明を並べたいときや、比較画像を作りたい場合に便利です。
2. ギャラリーブロックを使う方法
複数の画像をまとめて一括挿入できる。シンプルに「写真一覧」を見せたいときに便利です。
イベントの写真一覧、作品ポートフォリオ、旅行記のまとめ写真などに最適です。
画像の文字情報入力｜代替テキスト・説明・キャプション
WordPressで画像を挿入すると、ただ表示させるだけでなく、文字情報 を付け加えることができます。
これにより、読者にとって内容がわかりやすくなり、SEOやアクセシビリティの面でも効果があります。
1. 代替テキスト（ALT）
画像が表示されないときに代わりに表示される文章なので、入力はしておきましょう。
スクリーンリーダーにも読み上げられるため、アクセシビリティに直結します。
書き方のコツ
画像の内容を「見なくても伝わる」ように簡潔に説明する。
- ❌「画像1」（何の画像かわからない）
- ❌「WordPress」（WordPressの何を指すのかわからない）
- ✅「夕焼けの海沿いを走る赤いスポーツカー」
2. 画像の説明（メディアライブラリ内の「説明」欄）
管理画面で画像を整理するための補足情報です。
公開ページに直接表示されることは少ないですが、画像検索やSEOの補助になる場合があります。
多くの初心者は入力を省略しがちですが、大量の画像を管理するサイトでは便利です。
3. キャプション（画像の下に表示される説明文）
上記画像のように、本文内で画像の意味を補足するテキスト（「パソコンで作業する人」の部分）で、画像下に文字表示がでます。
読者が「この画像は何を示しているのか」を理解しやすくなります。
入力すると記事本文に直接表示されるので、見た目にもわかりやすい効果があります。
書き方のコツ
- 図やグラフ → 数値や意味を補足
- 商品写真 → モデル名や特徴を記載
画像のツールバーでできること
挿入した画像は記事の中で位置や表示方法を調整できます。
挿入した画像をクリックすると、ツールバーが表示されます。
テーマによっては表示されないメニューがある場合もあります。
配置の種類
三角形のアイコンの左にあるのが、画像位置調整です。
- 左寄せ：文章の左に画像、右にテキストを回り込ませる
- 中央：記事の中で画像を目立たせる配置
- 右寄せ：文章の右に画像、左にテキストを回り込ませる
- 全幅：サイトで表示される、めいいっぱいの横幅
デュオトーン
三角形のアイコンは、デュオトーンで、デザイン的加工です。
元の画像を失わずに、ツートンカラー効果を作成します。
リンク
リンクアイコンをクリックすると、画像や添付ファイルページのリンクを設定ができます。
画像ファイルへのリンクを設定すると、画像をクリックすれば指定したURLページが開くようになります。
また、「クリックで拡大」を設定しておくと、画像をクリックしたとき拡大して表示されるようになります。
ギャラリーで写真などの画像を公開するときには、便利な設定になります。
切り抜き
リンクアイコンの右隣りのアイコンは、画像の切り抜きの設定ができます。
実際には、アップロード前にサイズ調整しておいたり、アップロードした時点で「画像を編集」で調整する方が作業がしやすいです。
画像上にテキストを追加
[A]と付いたアイコンをクリックすると、画像の上にテキスト入力できるようになります。
サイドバーではデザインの設定もできるようになります。
これはブロックでいう「カバー」になります。
キャプション
「画像上にテキストを追加」の隣はキャプションの挿入ボタンになります。
置換
「置換」は、表示した画像を差し替えるときに使います。
ライブラリを開いたり、アップロードを選択して差し替えます。
画像のURL情報の編集やコピーもここでできます。
まとめ｜WordPressで画像を正しく扱って記事を見やすくしよう
WordPressの記事に画像を入れると、文章だけでは伝わりにくい内容が一気にわかりやすくなります。
しかし、ただ挿入するだけではなく、いくつかの基本ポイントを意識することが大切です。
- アップロード：メディアライブラリを使って簡単に挿入できる
- サイズと圧縮：横幅1200px前後、200KB以下を目安に。軽量化して表示速度を改善
- 文字情報（ALT・説明・キャプション）：SEO・アクセシビリティ・読者理解に役立つ
- 配置：中央配置やキャプションで見やすく、記事の流れをスムーズに
- 複数画像：カラムやギャラリーを活用して、整ったレイアウトを実現
これらを実践するだけで、記事の見栄えや読みやすさは大きく向上します。
読者にとっても検索エンジンにとってもわかりやすい記事を目指して、画像の扱い方をしっかり身につけていきましょう。