広告
はじめに：画像は「読者の目を休ませる」おもてなしです
前回記事では、吹き出しやボックスなど、Cocoonの便利な装飾ブロックを体験しました。
文字に色がつくことで、一気にブログらしくなりましたね。
しかし、文字だけのページは、どんなに内容が良くても「本」や「新聞」のように見えてしまい、スマホで読む読者は途中で疲れて閉じてしまうことがあります。
そこで重要になるのが「画像」です。
今回は、エックスサーバー10日間無料体験の総仕上げとして、
- 本文の中に入れる画像
- 説明を助ける
- アイキャッチ画像
- 記事の顔、表紙
この2つの扱い方をマスターしましょう。
これができれば、あなたはもう「一人前のブロガー」として、いつでも世界に記事を送り出せる状態になります！
なぜ画像が必要？ブログにおける「2つの役割」
WordPressでは、画像を主に2つの目的で使い分けます。
| 種類 | 役割 | 配置場所 |
| 本文画像 | 解説の補助、文章の「区切り」として目を休ませる | 記事の途中の適切な場所 |
| アイキャッチ画像 | 読者の興味を引く「表紙」。SNSや記事一覧で表示される | 記事の冒頭（設定はサイドバー） |
特にアイキャッチ画像は、「クリックされるかどうか」を決める最重要ポイントです。
それぞれ役割が違うため、順番に解説していきます。
本文に画像を入れる手順
本文画像は、
- 説明を補足する
- 文章ばかりで疲れるのを防ぐ
- 記事の流れに区切りをつける
といった目的で使われます。
今回は、体験なので複数枚の画像を 入れていきます。
画像を入れる
＋ をクリック
① メディアブロックの「画像」ブロックを選択
② 画像ブロックが表示されます
③ サイドバー（投稿やブロックなど）が表示されていなければクリック
④ サイドバーのブロックを選択
① アップロード をクリック
② ファイル選択ダイアログが開くので、画像を選択
③ 「開く」をクリック
画像の解像度変更
① 本文に画像が表示されます
② 解像度はサムネイルを選択（画面のサイズが小さくなる）
同じ操作を繰り返して、解像度「サムネイル」「中」「大」の3枚の画像を作成
画像のスタイル変更
① 画像を選択
② スタイルをクリック
③ 角丸を選択（画像が角丸になる）
同じ操作を繰り返して、スタイル「デフォルト」「角丸」「Mono」の3枚の画像を作成
【SEOで差がつく！】画像を入れた後にすべき3つの設定
画像を貼っただけで満足してはいけません。
検索順位を上げるために、右側の設定パネルから以下の3点をチェックしましょう。
- 代替テキスト（Alt属性）：
- 「何が写っているか」を文字で入力します
- 例：「Cocoonの設定画面のスクリーンショット」
- 理由： 目が不自由な方の音声読み上げや、Googleが画像を理解するために必須です。
- 「何が写っているか」を文字で入力します
- 解像度（サイズ）：
- 必要以上に大きな画像は、ページの表示速度を遅くします
- 最初は 「大」 または 「中」 を選び、画面からはみ出さないようにしましょう
- 必要以上に大きな画像は、ページの表示速度を遅くします
- スタイル：
- Cocoon独自の機能で、画像の角を丸くしたり（角丸）、影をつけたりできます
- お好みのものを選んでみてください
「アイキャッチ画像」で記事に命を吹き込む
アイキャッチ画像とは？
アイキャッチ画像は、
- 記事一覧
- トップページ
- SNSでシェアされたとき
に表示される、記事の代表画像 です。
いわば、記事の「顔」です。
アイキャッチ画像は必須？
結論から言うと、
- 設定しなくても記事は公開できる
- ただし、設定したほうが分かりやすい
という位置づけです。
今回は、「一度設定してみる」ことを目的 に進めます。
どんな画像を選べばいい？
最初は、次の考え方で十分です。
- 記事内容と大きくズレていない
- 文字が入っていなくてもOK
- 自分が「これでいいかな」と思える
- 推奨サイズは、横1200px × 縦630px
正解はありません。
ホームページ（アイキャッチ画像が未設定）
記事にアイキャッチ画像を設定
「アイキャッチ画像を設定」をクリック
① 「ファイルをアップロード」を選択
②「ファイルを選択」をクリック
① ファイル選択ダイアログが開くので、画像を選択
② 「開く」をクリック
アイキャッチ画像を設定 をクリック
保存 をクリック
同じ操作を繰り返して、他の2つの記事もアイキャッチ画像を設定
ホームページ完成！
３つの記事に対して、アイキャッチ画像を設定したことで一気にブログ記事らしくなりました。
はじめてのブログ記事｜Cocoonの文章表現力（装飾）
はじめてのブログ記事｜Cocoonの独自ブロック
はじめてのブログ記事｜画像
画像を設定してみて感じたこと
本文画像とアイキャッチ画像を設定すると、
- 記事が一気にブログらしくなる
- 記事ごとの区別がつきやすくなる
- 「ちゃんとブログを作った感覚」が出てくる
と感じられるはずです。
【要注意】画像による「ブログの鈍重化」を防ぐために
「ファイルサイズ」はブログの天敵です。
初心者がやりがちな失敗：
最新のスマホで撮った綺麗な写真を、そのまま10枚も20枚も載せてしまう
結果：
ページが重くなりすぎて、読者が開くのを諦めてしまいます
対策
- WebP（ウェッピー）形式：
- 2026年現在、画像はJPGやPNGよりも軽量な「WebP」で保存するのがおすすめです
- プラグインの活用：
- 第3回で設定したような画像圧縮プラグイン（EWWW Image Optimizerなど）を活用する
無料体験としては、ここまでで十分
これまでの7回を通して、真っ白な画面から始まり、文字を書き、色をつけ、そして画像を載せるところまで来ました。
アイキャッチ画像を設定して、自分のブログのトップページを見てみてください。
「ああ、自分は本当にブログを作ったんだな」 という実感が、じわじわと湧いてくるはずです。
無料体験の期間内にここまでの工程を自力でこなせたなら、あなたはブログを続ける才能が十分にあります！
まとめ｜無料体験の目的は120%達成です
今回は、
- 本文画像の挿入
- アイキャッチ画像による「記事の顔」作り
を体験しました。
これで、ブログ開設から公開までの全スキルがあなたの手の中にあります。
本当にお疲れ様でした。
エックスサーバーの10日間無料体験も、いよいよ最終局面です。
次回予告：運命の10日目。お試しを「一生の資産」へ
次回は最終回。
「この無料お試しブログを、消さずに本契約して残す方法」 について解説します。
せっかく育てたこの「1記事目」を、ただの練習で終わらせるか、これから何年も続くあなたの資産にするか。
その手続きを、最後に見守らせてください。
エックスサーバー10日間無料体験記：全8回ロードマップ
「いきなりお金を払うのは不安……」という方へ。
エックスサーバーの10日間無料体験を活用して、リスクゼロで「お試しブログ」を完成させる全工程をまとめました。
