【Cocoon】アイキャッチ画像の設定と非表示にする方法【かんたん解決!】

「アイキャッチ画像を設定したい」

「アイキャッチ画像が表示されない、どうして?」

「アイキャッチ画像を非表示にするには?」

この記事では、そんな方に向けて、Cocoonでアイキャッチ画像の設定方法をお話しします。

かめコンパス

こんにちは、かめコンパスです!

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

目次

アイキャッチ画像とは?

アイキャッチ画像とは、ユーザーの目をひきつけるための画像のことです。

アイキャッチ画像の画像説明

Cocoonでアイキャッチ画像が使われる場所は、

  • サムネイル(新着記事一覧やカテゴリー別記事一覧など)
  • 各記事ページのタイトル下
  • 検索結果のページタイトル右

です。

かめコンパス

当ブログでも全記事にアイキャッチ画像を設定しているよ!

Cocoonアイキャッチ画像の設定方法

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

2つあります。

それぞれ詳しく解説します。

自動で設定する

アイキャッチ画像を自動で設定する方法は、下記の通りです。

STEP

WordPress管理画面で、Cocoon設定画像の順にクリックする

「Cocoon設定」、「画像」がある場所
STEP

「アイキャッチ自動設定を有効にする」に✔を入れる

「アイキャッチ自動設定を有効にする」がある場所

設定する項目が変更できない場合は、スキン制御されているのが原因です。

スキン制御されている場合の表示のされ方

スキン制御の対処法は、下の記事を参考にしてください。

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所
STEP

これでアイキャッチ画像の設定完了!

本文中にある最初の画像がアイキャッチ画像になります。ですので、本文中に画像を1枚も使っていないと表示されないです。

かめコンパス

好きな画像をアイキャッチに設定したい場合は、次に紹介する「手動」のやり方で設定してね!

手動で設定する

アイキャッチ画像を手動で設定する方法は、下記の通りです。

STEP

記事投稿画面で、設定投稿の順にクリックする

「設定」、「投稿」がある場所
STEP

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

「アイキャッチ画像を設定」がある場所
STEP

ファイルをアップロードファイルを選択の順にクリックする

「ファイルをアップロード」、「ファイルを選択」がある場所
STEP

アイキャッチに設定したい画像を選択し、開くをクリックする

アイキャッチに設定したい画像を選択している様子と、「開く」がある場所
STEP

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

「アイキャッチ画像を設定」がある場所
STEP

これでアイキャッチ画像の設定完了!

アイキャッチ画像を設定し終えた様子

アイキャッチ画像はリサイズして設定する

Cocoonで設定するアイキャッチ画像は必ず推奨サイズにリサイズしましょう。

推奨サイズより小さいサイズを使用すると、画像が引き延ばされてしまい、画質が粗くなります。

推奨サイズより大きいサイズでは、画像の容量が大きくなってしまい、サイトが重くなってしまう。

つまり、サイトの表示スピードが遅くなってしまいます。

ですので、アイキャッチ画像は推奨サイズにリサイズして設定してください。

かめコンパス

記事中に挿入する画像とアイキャッチ画像の推奨サイズは違うよ

Cocoonでアイキャッチ画像の推奨サイズとリサイズ方法については、下の記事で紹介してます。

Cocoonでアイキャッチを非表示にする方法

Cocoonでアイキャッチの

を非表示にする方法を、それぞれ詳しく解説します。

本文中の画像を非表示にする

本文中のアイキャッチ画像を非表示にする方法は、下記の通りです。

STEP

WordPress管理画面で、Cocoon設定画像の順にクリックする

「Cocoon設定」、「画像」がある場所
STEP

「本文上にアイキャッチを表示する」の✔を外す

「本文上にアイキャッチを表示する」がある場所

 スキン制御により設定を変更できない場合はこちら

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所
STEP

これで本文中のアイキャッチ画像を非表示にできた!

本文中のアイキャッチ画像が非表示になったかどうかは、プレビューで確認してみましょう。

プレビューでの確認方法
「プレビュー」、「新しいタブでプレビュー」がある場所
  1. プレビューをクリック
  2. 新しいタブでプレビューをクリック

カテゴリーラベルを非表示にする

アイキャッチ画像のカテゴリーラベルを非表示にする方法は、下記の通りです。

STEP

WordPress管理画面で、Cocoon設定画像の順にクリックする

「Cocoon設定」、「画像」がある場所
STEP

アイキャッチラベルを表示するの✔を外す

「アイキャッチラベルを表示する」がある場所

 スキン制御により設定を変更できない場合はこちら

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所
STEP

これでアイキャッチ画像のカテゴリーラベルを非表示にできた!

Cocoonでアイキャッチ画像が表示されない場合の対処法

Cocoonでアイキャッチ画像が表示されない原因は、

  • Lazy Loadの機能が2重で働いている

ことが考えられます。

かめコンパス

私の場合、Lazy Loadの設定を無効にしたらアイキャッチ画像が表示されるようになったよ!

私の場合、Lazy Loadの機能は

の3項目ありました。

それぞれの項目でLazy Loadを無効に設定する方法を詳しく解説します。

かめコンパス

自分が使っている項目だけ確認してみてね!

CocoonでLazy Loadを無効にする

WordPressテーマ「Cocoon」でLazy Loadを無効に設定する方法は、下記の通りです。

STEP

WordPress投稿画面で、Cocoon設定高速化の順にクリックする

「Cocoon設定」、「高速化」がある場所
STEP

Lazy Loadを有効にするの✔を外す

「Lazy Loadを有効にする」がある場所
STEP

変更を保存をクリックする

「変更を保存」がある場所

これでLazy Loadを無効に設定完了!

EWWW Image OptimizerでLazy Loadを無効にする

プラグイン「EWWW Image Optimizer」でLazy Loadを無効に設定する方法は、下記の通りです。

STEP

WordPress投稿画面で、設定EWWW Image Optimizerの順にクリックする

「設定」、「EWWW Image Optimizer」がある場所
STEP

基本をクリックする

「基本」がある場所
STEP

画像が表示領域に入った (または入ろうとしている) 時にだけ読み込まれるため、読み込み速度を改善しますの✔を外す

「画像が表示領域に入った (または入ろうとしている) 時にだけ読み込まれるため、読み込み速度を改善します」がある場所
STEP

変更を保存をクリックする

「変更を保存」がある場所

これでLazy Loadを無効に設定できました!

ConoHa WINGでLazy Loadを無効にする

レンタルサーバー「ConoHa WING」でLazy Loadを無効に設定する方法は、下記の通りです。

STEP

ConoHa WINGコントロール画面で、サイト管理をクリックする

「サイト管理」がある場所
STEP

高速化WEXALの順にクリックし、WEXALが「ON」になっていたらファーストビュー高速化をクリックする

「高速化」、「WEXAL」、「ファーストビュー高速化」がある場所と、WEXALが「ON」になっているか確認している様子
かめコンパス

WEXALが「OFF」になっていたら、Lazy Loadは無効になってるよ

STEP

Lazy Load(画像)を無効に変更する

Lazy Load(画像)を無効に変更している様子

これでLazy Loadを無効に設定できました!

かめコンパス

Lazy Loadを無効にしたら、アイキャッチ画像が表示されているか確認してみてね!

Cocoonでアイキャッチ画像を設定するメリット

Cocoonでアイキャッチ画像を設定するメリットを、私なりにざっと書いてみました。

メリット
  • ページの滞在時間UP!
  • ブログ内の回遊率UP!
  • SNSからの流入率UP!

それぞれ詳しく解説します。

ページの滞在時間UP!

アイキャッチ画像がある場合とない場合のページ滞在時間の比較

ブログ記事に訪れたときに、最初の一画面で見るのがタイトルとリード文になります。

そこにアイキャッチ画像がないと文章だけになり、記事に何が書かれているのか、ぱっと見分からず

本文を読まれずにページから離脱されやすくなります。

アイキャッチがあれば画像でユーザーの目を引くと同時に、何が書かれているか認識でき、本文を読まれやすくなります。

つまりページの滞在時間がUPします。

かめコンパス

「人」で考えると分かりやすく、第一印象って大事だよね!ブログも同じです

ブログ内の回遊率UP!

アイキャッチ画像がある場合とない場合のブログ内回遊率の比較

ブログ記事に書かれている文章はすべて読まれず、流し読みされる場合がほとんどです。

文字のみの内部リンクだと本文に埋もれてしまい、クリックされにくくなります。

一方画像つきの内部リンクだと画像に目がとまり、クリック率が高まり、ブログ内の回遊率もUPします。

かめコンパス

自分だとどっちをクリックするか考えれば一目瞭然だね!

SNSからの流入率UP!

アイキャッチ画像がある場合とない場合のSNS流入率の比較

X(旧Twitter)を例に考えてみます。

毎分毎秒ツイートが流れてくる中で、自分のツイートを読まれることはあまり多くありません。

少しでもユーザーの目を引くために画像があった方が、自分のツイートを読んでもらえる確率は上がります。

そこで興味のある内容であれば、アイキャッチ画像をクリックしてもらうことで

自分のブログに流入させることができます。

かめコンパス

ユーザーの目を引くために、魅力的なアイキャッチ画像にデザインすることが必要だね!

まとめ:アイキャッチ画像を設定して記事を読んでもらおう

今回は、Cocoonでアイキャッチ画像の設定方法や表示されない場合の対処法を紹介しました。

以下の記事では、アイキャッチ画像以外のカスタマイズ方法も紹介しています。

また当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonでアイキャッチ画像を設定する方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • 消えてしまったアイキャッチ画像が表示されました!
    色々調べましたが、こちらのサイトが初心者の私にも1番分かりやすかったです。有益なサイトをありがとうございます。

コメントする

目次