はじめに｜画像があるだけで、ブログはぐっと伝わりやすくなる
ブログに 1枚画像が入るだけで、
- 読者の目がとまりやすくなる
- 文章のイメージが伝わりやすくなる
- 「ちゃんと作ってあるブログだな」と安心してもらえる
という良さがあります。
この記事では、
WordPressのブロックエディターで、画像ブロックを選んでアップロードする方法
を、初心者さん向けにゆっくり解説します。
Cocoonテーマを使っている方も、同じ手順でOKです。
この記事でできるようになること
- 画像を載せたい場所に「画像ブロック」を追加できる
- パソコン内にある画像を「アップロード」して記事に表示できる
- 画像のサイズや位置を、かんたんに調整できる
「WordPressはむずかしそう…」と思っている方も、
一度やってみると“次からは同じことのくり返し” なので安心してくださいね。
STEP1｜画像を入れたい記事の編集画面を開く
- WordPressの管理画面にログインする
- 左メニューから
- 新しく書く場合：「投稿」→「新規追加」
- すでにある記事を直す場合：「投稿」→「投稿一覧」→編集したい記事の「編集」
- ブロックエディター（本文を入力する画面）を開く
画像を入れたい記事の画面が開けたら、準備OKです。
STEP2｜画像を入れたい位置をクリックして「画像ブロック」を選ぶ
- 画像を挿入したい場所（段落の下など）をクリックします。
- 左側か、画面内に小さな 「＋（ブロックを追加）」ボタン が表示されるのでクリックします。
- ブロックの一覧が開くので、
上部の検索欄に 「画像」 と入力するか、
「メディア」カテゴリの中から 「画像」ブロック を選びます。
すると、本文の中に 「画像」ブロック が挿入されます。
STEP3｜「アップロード」から画像ファイルを選ぶ
画像ブロックを追加すると、
- 「アップロード」
- 「メディアライブラリ」
- 「URLから挿入」
という3つくらいのボタンが出てきます。
ここでは、パソコンに保存してある画像を使いたいので、
「アップロード」 をクリックします。
- 「アップロード」を押す
- パソコンのフォルダが開くので、ブログに載せたい画像ファイルを選ぶ
- 「開く」をクリックすると、画像が記事の中に読み込まれます
これで、画像が記事の中に表示されました！
STEP4｜画像のサイズや位置をかんたん調整する
画像が挿入できたら、見た目を少し整えてあげましょう。
① 画像の位置（左・中央・右）
画像をクリックすると、上に小さなメニューが出てきます。
- 左寄せ
- 中央揃え
- 右寄せ
などのアイコンがあるので、
「中央揃え」 を選ぶと、きれいに真ん中に表示されます。
② 画像のサイズ
画像の四隅をドラッグして縮小・拡大するか、
右側の設定欄（サイドバー）で「幅」「高さ」を数字で調整できます。
最初は、
- 幅：600〜800px 前後
くらいにしておくと、PCでもスマホでも見やすい大きさになります。
③ 代替テキスト（alt）も軽く入れておく
右側の設定に「代替テキスト（alt）」という項目があります。
ここには、
「Xserverの申込み画面のスクリーンショット」
「ブログ全体ロードマップの図」
のように、画像の内容をそのまま一言で書く とOKです。
- 画像が表示されないときの代わりの説明
- 検索エンジンへのアピール
にもなるので、時間のあるときに少しずつ入れていきましょう。
STEP5｜複数の画像を入れるときも手順は同じ
2枚目以降の画像も、やることはまったく同じです。
- 入れたい場所をクリック
- 「＋」ボタン → 「画像」ブロックを追加
- 「アップロード」から画像を選ぶ
- 位置やサイズを整える
一度覚えたら、あとはくり返すだけなので、
何度かやってみるうちにサクサク入れられるようになります。
よくあるつまずきポイントと対処法
Q1：画像が大きすぎて、画面からはみ出してしまう
→ 画像をクリックして、四隅をドラッグして少し小さくしましょう。
右側の「幅」の数字を小さくしてもOKです。
Q2：画像を消してしまった…どうしよう？
→ 1つ前の状態に戻したいときは、
画面左上の 「元に戻す（←）」ボタン を押せば安心です。
Q3：同じ画像を別の記事にも使いたい
→ 2回目以降は「アップロード」ではなく 「メディアライブラリ」 から選ぶと、
一度アップした画像をまた使えます。
まとめ｜画像は「＋ → 画像 → アップロード」の3ステップだけ
最後に、今日の手順をもう一度まとめます。
- 記事の編集画面を開く
- 画像を入れたい場所をクリックして「＋」ボタンを押す
- 「画像」ブロックを選ぶ
- 「アップロード」からパソコン内の画像を選ぶ
- 位置・サイズ・代替テキストを軽く調整する
この 3〜5ステップさえ覚えておけば大丈夫 です。
