WordPressの画像は、記事編集画面またはメディアライブラリから追加できます。アップロード前にファイル名、形式、容量を整えると、表示の遅さや管理の混乱を防げます。
アップロード前の準備
意味の分かる半角英数字のファイル名へ変更し、単語をハイフンで区切ります。スマートフォン写真のように極端に大きい画像は、掲載幅に合わせて縮小します。
画像形式を選ぶ
写真はJPEGやWebP、透過が必要な図はPNGが基本です。画質を保ちながら容量を小さくできる形式を選びます。
「画像形式を選ぶ」まで進めたら、最初より画面の意味が分かってきました。
でも、保存した後にどこを見れば成功なのか、まだ少し心配です。
その不安は自然だよ。
設定画面の保存表示だけで終わらせず、公開側で変化を一つ確認すれば判断しやすい。
一度に全部を確認しなくていいんですね。
今回変えた場所だけ見るなら、私も見落とさずに進められそうです。
そう。
変えた項目と確認する画面を一組にして進めれば、原因が分からなくなるのを防げるよ。
記事へ追加する
ブロックエディターで画像ブロックを追加し、「アップロード」または「メディアライブラリ」を選びます。追加後に代替テキストと表示サイズを確認します。
アップロードできない時
ファイル容量の上限、対応形式、通信状態を確認します。同じ操作を繰り返す前に、画像を縮小して別名で一枚だけ試すと原因を切り分けやすくなります。
最後に確認すること
- 変更前に、何を直す操作かを確認した
- 保存または更新が完了したことを確認した
- 公開画面をPCとスマートフォンで開いた
- 分からない項目を推測だけで変更していない
一度で完璧に覚える必要はありません。この記事の順番どおりに一項目ずつ操作し、結果を確認してから次へ進めば、初心者でも安全に設定できます。
結論:アップロード前に名前・形式・大きさを整える
画像は、内容が分かる半角英数字のファイル名へ変更し、用途に合う形式で、表示に必要な大きさまで縮小してからアップロードします。撮影時の
IMG_9384.JPG
や日本語名のまま大量に入れると、後で探しにくくなります。
アップロード前の判断表
| 確認 | 目安 | 例 |
|---|---|---|
| ファイル名 | 英小文字とハイフン | wordpress-dashboard-login.webp |
| 横幅 | 記事の表示幅に合わせる | 本文画像なら1200px前後から検討 |
| 形式 | 写真はWebP/JPEG、透過はPNG | 用途で選ぶ |
| 容量 | 画質を確認しながら圧縮 | 一律の数値より表示品質を優先 |
分かりやすいファイル名の付け方
- 画像が何を示すか英単語で2〜5語にします。
- 英小文字へ統一します。
- 単語を半角ハイフンで区切ります。
- 同じ名前がある場合は、意味のある違いを足します。
image1.jpg
より
permalink-post-name-setting.webp
のほうがメディアライブラリで見つけやすくなります。記事タイトル全部を長いローマ字にせず、画像固有の内容へ絞ります。アップロード後に添付ページのURLが作られる環境もあるため、名前はアップロード前に直します。
画像形式の選び方
- WebP: 写真や図を軽くしやすく、対応環境で基本候補
- JPEG: 写真向け。透過はできない
- PNG: 透過や輪郭の明瞭な図向け。写真では重くなりやすい
- GIF: 簡単なアニメーション向け。色や画質に制約がある
- SVG: ロゴ等に向くが、WordPress標準では安全上アップロードできない場合がある
拡張子だけを書き換えても形式変換にはなりません。画像編集ソフトの書き出し機能を使います。
投稿編集画面からアップロードする手順
- 投稿を開き、画像を入れたい位置で「+」を押します。
- 「画像」ブロックを選びます。
- 「アップロード」を押し、整えた画像を選びます。
- アップロード後に画像が表示されたことを確認します。
- 画像の代替テキストを、本文での役割に合わせて入力します。
- 表示サイズと配置を確認し、「更新」または「公開」を押します。
メディアライブラリへ先に追加する手順
- 「メディア」→「新しいメディアファイルを追加」を開きます。
- ファイルをドロップするか選択します。
- 処理完了後、「メディア」→「ライブラリ」で対象を開きます。
- ファイル名、寸法、代替テキストを確認します。
- 投稿では「メディアライブラリ」から選択します。
アップロードできない時の確認順
| 表示・症状 | 確認 | 対処 |
|---|---|---|
| アップロード上限を超えています | メディア追加画面の最大サイズ | 画像を縮小・圧縮。必要ならサーバー上限を確認 |
| 許可されていないファイルタイプ | 拡張子と実際の形式 | 標準対応形式へ正しく変換 |
| HTTPエラー | 通信、容量、画像寸法 | 再読み込み後、小さなテスト画像で切り分け |
| 画像が横向き | 撮影情報と書き出し | 画像編集ソフトで回転を確定して再書き出し |
| ぼやける | 元画像寸法 | 表示枠以上の元画像を用意 |
大きすぎる画像を入れた後の対処
投稿上で小さく表示するだけでは、元ファイルの容量が軽くなるとは限りません。元画像を適切な寸法へ縮小して再アップロードし、投稿の画像を差し替えます。使われている画像を確認せずメディアライブラリから削除すると、過去記事で画像切れになるため注意します。
公開後の確認
- PCとスマートフォンで画像の鮮明さを確認します。
- 本文幅からはみ出していないか確認します。
- 縦横比が崩れていないか確認します。
- ページの表示が極端に遅くないか確認します。
- 画像を使った記事で代替テキストが目的に合うか確認します。
成功の目印は、画像が鮮明に表示され、横スクロールを起こさず、メディアライブラリで名前から探せることです。
既存画像を整理する時の注意
「未添付」と表示されても、テーマ設定や商品カードで使われている場合があります。削除前に画像URLや公開ページを確認します。整理は、重い画像の差し替え、明らかな重複、テスト画像の順に一件ずつ行います。
1枚を公開する前の実務手順
- 元画像を複製し、編集用データを残します。
- 不要な余白や個人情報を切り取ります。
- 記事の表示幅に合わせて縮小します。
- WebPまたは用途に合う形式で書き出します。
- 英小文字の具体的なファイル名へ変更します。
- PCで画質を確認してからWordPressへアップロードします。
- 投稿内で代替テキストと表示位置を整えます。
- スマートフォンで文字や操作箇所が読めるか確認します。
スクリーンショットには、メールアドレス、契約ID、サイトURL、通知内容などが写り込むことがあります。圧縮より先に、公開してよい情報だけかを確認してください。ぼかしが弱いと文字を推測できるため、不要部分は切り取るか完全に覆います。
よくある質問
元画像はWordPressだけに保存すればよいですか?
編集前の元画像は手元にも保管してください。WordPress内の画像は掲載用として管理します。
画像を小さくするとぼやけませんか?
表示枠より少し大きい幅を保ち、圧縮しすぎなければ十分な画質を維持できます。公開画面で確認してください。