【第6回(最終回)】XServer10日間無料体験!Cocoonで画像を実際に使ってみよう|本文画像とアイキャッチ画像をやさしく解説

目次

はじめに(前回記事からの続き)

前回の記事では、Cocoonの装飾ブロックとして、

  • 囲み枠(ボックス)
  • 吹き出し
  • 表(テーブル)

を実際に触りながら体験しました。

文章だけでも記事は書けますが、画像が入ることで「ブログらしさ」は一気に高まります。

今回は、XServer10日間無料体験の最後のステップ として、

  • 本文の中に入れる画像
  • 記事の顔となるアイキャッチ画像

この2つを、実際に触りながら体験していきます。

ここまでできれば、「ブログ記事を一通り作れる状態」 になっています。


今回のゴール(無料体験の最終ゴール)

この記事のゴールは、次の3つです。

  • 画像を記事に入れる操作を体験する
  • アイキャッチ画像の役割を知る
  • 「ブログを公開できる形」が完成したと実感する

完璧に作る必要はありません。
「一連の流れを体験できた」ことが、今回の最大の成果 です。


ブログ記事で使う2種類の画像

WordPressのブログでは、主に次の2種類の画像を使います。

  • 本文の途中に入れる画像
  • アイキャッチ画像(記事の代表画像)

それぞれ役割が違うため、順番に解説していきます。


本文に入れる画像を使ってみよう

本文画像は、

  • 説明を補足する
  • 文章ばかりで疲れるのを防ぐ
  • 記事の流れに区切りをつける

といった目的で使われます。

今回は、体験なので複数枚の画像を 入れていきます。

画像を入れる

をクリック

① メディアブロックの「画像」を選択
② 画像ボックスが表示される
③ サイドバー(投稿やブロックなど)が表示されていなければクリック
④ サイドバーのブロックを選択

アップロード をクリック
② ファイル選択ダイアログが開くので、画像を選択
「開く」をクリック

画像の解像度変更

① 本文に画像が表示される
② 解像度はサムネイルを選択(画面のサイズが小さくなる)

同じ操作を繰り返して、解像度「サムネイル」「中」「大」の3枚の画像を作成

画像のスタイル変更

① 画像を選択
スタイルをクリック
角丸を選択(画像が角丸になる)

同じ操作を繰り返して、スタイル「デフォルト」「角丸」「Mono」の3枚の画像を作成


アイキャッチ画像を設定してみよう

アイキャッチ画像とは?

アイキャッチ画像は、

  • 記事一覧
  • トップページ
  • SNSでシェアされたとき

に表示される、記事の代表画像 です。

いわば、この記事の「表紙」 のような役割を持っています。


アイキャッチ画像は必須?

結論から言うと、

  • 設定しなくても記事は公開できる
  • ただし、設定したほうが分かりやすい

という位置づけです。

今回は、「一度設定してみる」ことを目的 に進めます。

どんな画像を選べばいい?

最初は、次の考え方で十分です。

  • 記事内容と大きくズレていない
  • 文字が入っていなくてもOK
  • 自分が「これでいいかな」と思える
  • 推奨サイズは、横1280px × 縦720px

正解はありません。

ホームページ(アイキャッチ画像が未設定)


記事にアイキャッチ画像を設定

「アイキャッチ画像を設定」をクリック

「ファイルをアップロード」を選択
「ファイルを選択」をクリック

① ファイル選択ダイアログが開くので、画像を選択
「開く」をクリック

アイキャッチ画像を設定 をクリック

保存 をクリック

同じ操作を繰り返して、他の2つの記事もアイキャッチ画像を設定

ホームページ完成版(アイキャッチ画像を設定)

はじめてのブログ記事|Cocoonの文章表現力(装飾)

はじめてのブログ記事|Cocoonの独自ブロック

はじめてのブログ記事|画像


画像を設定してみて感じたこと

本文画像とアイキャッチ画像を設定すると、

  • 記事一覧が一気にブログらしくなる
  • 記事ごとの区別がつきやすくなる
  • 「ちゃんとブログを作った感覚」が出てくる

と感じられるはずです。


無料体験としては、ここまでで十分

ここまでの6回で、

  • サーバー契約(無料体験)
  • WordPressの初期設定
  • 記事を書く
  • 装飾を使う
  • 画像とアイキャッチを設定する

という、ブログ開設から記事作成までの一連の流れ を体験しました。

無料体験としては、これ以上やらなくても問題ありません。


まとめ|ブログ開設の体験はここで一区切り

今回は、

  • 本文画像の挿入
  • アイキャッチ画像の設定

を体験し、「ブログ記事が完成するところまで」 を確認しました。

これで、

「自分にもブログは作れそう」

と感じられたなら、XServer10日間無料体験の目的は十分に達成できています。


次回予告|ここからは「続けたい人向け」の内容になります

次回からは、ブログ運営を本格的に続けたい方向け に、

  • XServerの本契約の仕方
  • 独自ドメインの取得方法

を、ひとつずつ解説していく予定です。

独自ドメインを取得すると、本格的なブログ運営のスタート になります。

「もう少し続けてみようかな」
そう思えた方だけ、次へ進んでみてください。

目次