モニターサイトコエタス【11月のモニター当選数14件!! 総額:71,824円 相当】

超・初心者がイチから始めるワードプレス│『Cocoon-コクーン-』でアイキャッチ画像を設定する。

ぱに子
こんにちわ!ぱに子です。

突然ですが皆さん。
記事にアイキャッチ画像、設定していますか??

設定していないなんてナンセンス!
アイキャッチ画像をいれるだけで、ワンランクupな記事・ブログになるんですっ

この記事では

  • アイキャッチ画像の設定方法
  • ぱに子が頭を抱えた画像設定後の問題&解決

の2つを説明しています。

それでは、PC・ワードプレス共に超・初心者なぱに子とアイキャッチ画像の設定の仕方をお勉強しましょう。

\ モニター始めるならコエタス /

アイキャッチ画像を設定する方法

まずは流れから…。
といっても、説明するほどでもないです。
3ステップです。

コクーンはとっても新設設計ですね。
無料テーマなのに絶賛されているだけあり、使いやすさも最高です。

アイキャッチ画像設定の流れ
  1. 記事を新規作成。
  2. 設定からアイキャッチ画像を見つける。
  3. アイキャッチ画像を設定をクリックしてファイルをアップロード。

では、具体的に画像と一緒に見ていきましょう。

1.記事を新規作成する。

記事作成画面を開きます。
ワードプレスの管理画面、ダッシュボードから【投稿】→【新規追加】をクリック。

2.設定からアイキャッチ画像を見つける。

記事作成の画面が開けたら、画面右側の設定をスクロールして下に行くと【アイキャッチ画像】という欄があります。

3.アイキャッチ画像を設定をクリック→ファイルをアップロード。

アイキャッチ画像をクリックすると、メディアライブラリが開きます。
アップロードしていない画像を使う時は左上のタブから【ファイルをアップロード】を選択し、アップロードしましょう。

※すでにアップロードしたことのある画像をまた使いたい!
という時はメディアライブラリから何度でも使用できるので、アップロードの必要はありません。

画像をアップロードするとメディアライブラリの左上に追加されます。

使用する画像を選択すると画面右側に選択した画像が表示されます。
間違いがなければ右下の【アイキャッチ画像を設定】を押します。

記事作成画面に戻され、右側の設定アイキャッチの画像部分に画像が入りました。

アイキャッチ画像は記事作成画面では表示されません。
画面右上の【下書き保存】後→【プレビュー】で確認しましょう!

アイキャッチ画像の設定方法の説明はおわりです。
簡単ですよね。


そう、アイキャッチ画像の設定は簡単、でも…
ここからはぱに子が頭を抱えた問題を書いていきます。

アイキャッチ画像の問題を解決

ぱに子
アイキャッチ画像は設定できたし、記事で見ると綺麗なんだけど…

TOPページで見るとなんかぼやけてる!!!
それに、なんか見切れてるのも…!!

なんで!?!?

ぱに子は初めてアイキャッチ画像を設定したら、こんな感じになってしまいました。
(左上のピンクのサムネイルに注目)

ぼやぼやです。

せっかくアイキャッチ画像でワンランク上を目指しても、ぼやぼやのアイキャッチ画像ではむしろださい。
使いこなせてない感がでますよね。
(実際使いこなせていない)

このぼやぼやを、ボタンひとつでクリアにできました!

文字を見るとよくわかりますが、一枚目と比べると全然違いますよね。
さっそく、ぼやぼやを退治しに行きましょう!!!!

アイキャッチ画像のぼやける問題の解決法はこれ。

管理画面のダッシュボードへと戻ります。

1.ダッシュボードから【Cocoon設定】。
2.たくさんのタブの中から画像を選択してください。

↑のページを下へスクロールしていくと【Retinaディスプレイ】という項目があります。
この項目のボックスにチェックを入れて、一番下にある【変更をまとめて保存】で保存します。

ぱに子はたったのこれだけで、画質が改善されてしまいました!
※設定を保存してからサイトに反映されるまで少し時間がかかります。

これ以外にも、画像がぼやけてしまう原因は画像サイズが合っていない等色々あるみたいです。
このやり方で治らない場合は初心者ぱに子にはわかりません…。
他の方のブログを見に行きましょう。

アイキャッチ画像の見切れる問題解決法はこれ。

ずばり、比率が悪いのです!

ぱに子が最初に作ったアイキャッチは1024px×768pxの4:3の比率です。
しかしこれでは、上下左右すべて見切れてしまいました。
Cocoonにぴったりなのは1200px×630pxの1.9:1です。

比率を直して画像を設定してみるとぴったりはまります。

ビフォー
アフター

おわりに

以上でアイキャッチ画像の設定方法と問題解決の説明はおわりです。


アイキャッチ画像は

  • 読者の興味を引く
  • 記事の内容がわかりやすい

など、閲覧率につながる要素となります。
閲覧率はブログ運営には欠かせないものです。


綺麗なアイキャッチ画像になるように設定、頑張ってくださいね!

Advertising