![](https://www.kamecompass.com/wp-content/uploads/2023/10/0-6.png)
「アイキャッチ画像を設定したい」
「アイキャッチ画像が表示されない、どうして?」
「アイキャッチ画像を非表示にするには?」
この記事では、そんな方に向けて、Cocoonでアイキャッチ画像の設定方法をお話しします。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
こんにちは、かめコンパスです!
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-2.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-2.jpg)
さっそく本題に入りましょう。
当ブログ愛用のWordPressテーマ
\もっと早く乗り換えればよかった…/
使い心地バツグン、高機能でオシャレ!
アイキャッチ画像とは?
アイキャッチ画像とは、ユーザーの目をひきつけるための画像のことです。
![アイキャッチ画像の画像説明](https://www.kamecompass.com/wp-content/uploads/2023/10/1-7.png)
![アイキャッチ画像の画像説明](https://www.kamecompass.com/wp-content/uploads/2023/10/1-7.png)
Cocoonでアイキャッチ画像が使われる場所は、
- サムネイル(新着記事一覧やカテゴリー別記事一覧など)
- 各記事ページのタイトル下
- 検索結果のページタイトル右
です。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
当ブログでも全記事にアイキャッチ画像を設定しているよ!
Cocoonアイキャッチ画像の設定方法
Cocoonでアイキャッチ画像を設定する方法は
の2つあります。
それぞれ詳しく解説します。
自動で設定する
アイキャッチ画像を自動で設定する方法は、下記の通りです。
WordPress管理画面で、Cocoon設定⇒画像の順にクリックする
![「Cocoon設定」、「画像」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-1-6.png)
![「Cocoon設定」、「画像」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-1-6.png)
変更をまとめて保存をクリックする
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-3-5.png)
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-3-5.png)
これでアイキャッチ画像の設定完了!
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
好きな画像をアイキャッチに設定したい場合は、次に紹介する「手動」のやり方で設定してね!
手動で設定する
アイキャッチ画像を手動で設定する方法は、下記の通りです。
記事投稿画面で、設定⇒投稿の順にクリックする
![「設定」、「投稿」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/3-1-5.png)
![「設定」、「投稿」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/3-1-5.png)
「アイキャッチ画像を設定」をクリックする
![「アイキャッチ画像を設定」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/3-2-5.png)
![「アイキャッチ画像を設定」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/3-2-5.png)
ファイルをアップロード⇒ファイルを選択の順にクリックする
![「ファイルをアップロード」、「ファイルを選択」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/3-3-5.png)
![「ファイルをアップロード」、「ファイルを選択」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/3-3-5.png)
アイキャッチに設定したい画像を選択し、開くをクリックする
![アイキャッチに設定したい画像を選択している様子と、「開く」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/3-4-2.png)
![アイキャッチに設定したい画像を選択している様子と、「開く」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/3-4-2.png)
アイキャッチ画像を設定をクリックする
![「アイキャッチ画像を設定」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/3-5-2.png)
![「アイキャッチ画像を設定」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/3-5-2.png)
これでアイキャッチ画像の設定完了!
![アイキャッチ画像を設定し終えた様子](https://www.kamecompass.com/wp-content/uploads/2023/10/3-6-1.png)
![アイキャッチ画像を設定し終えた様子](https://www.kamecompass.com/wp-content/uploads/2023/10/3-6-1.png)
アイキャッチ画像はリサイズして設定する
Cocoonで設定するアイキャッチ画像は必ず推奨サイズにリサイズしましょう。
推奨サイズより小さいサイズを使用すると、画像が引き延ばされてしまい、画質が粗くなります。
推奨サイズより大きいサイズでは、画像の容量が大きくなってしまい、サイトが重くなってしまう。
つまり、サイトの表示スピードが遅くなってしまいます。
ですので、アイキャッチ画像は推奨サイズにリサイズして設定してください。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
記事中に挿入する画像とアイキャッチ画像の推奨サイズは違うよ
Cocoonでアイキャッチ画像の推奨サイズとリサイズ方法については、下の記事で紹介してます。
![](https://www.kamecompass.com/wp-content/uploads/2023/11/a98b1120712ae2558c294773114e59b3.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2023/11/a98b1120712ae2558c294773114e59b3.jpg)
Cocoonでアイキャッチを非表示にする方法
Cocoonでアイキャッチの
を非表示にする方法を、それぞれ詳しく解説します。
本文中の画像を非表示にする
本文中のアイキャッチ画像を非表示にする方法は、下記の通りです。
WordPress管理画面で、Cocoon設定⇒画像の順にクリックする
![「Cocoon設定」、「画像」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-1-6.png)
![「Cocoon設定」、「画像」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-1-6.png)
変更をまとめて保存をクリックする
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-3-5.png)
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-3-5.png)
これで本文中のアイキャッチ画像を非表示にできた!
![「プレビュー」、「新しいタブでプレビュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/7-2-1.png)
![「プレビュー」、「新しいタブでプレビュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/7-2-1.png)
- プレビューをクリック
- 新しいタブでプレビューをクリック
カテゴリーラベルを非表示にする
アイキャッチ画像のカテゴリーラベルを非表示にする方法は、下記の通りです。
WordPress管理画面で、Cocoon設定⇒画像の順にクリックする
![「Cocoon設定」、「画像」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-1-6.png)
![「Cocoon設定」、「画像」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-1-6.png)
変更をまとめて保存をクリックする
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-3-5.png)
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-3-5.png)
これでアイキャッチ画像のカテゴリーラベルを非表示にできた!
Cocoonでアイキャッチ画像が表示されない場合の対処法
Cocoonでアイキャッチ画像が表示されない原因は、
- Lazy Loadの機能が2重で働いている
ことが考えられます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
私の場合、Lazy Loadの設定を無効にしたらアイキャッチ画像が表示されるようになったよ!
私の場合、Lazy Loadの機能は
の3項目ありました。
それぞれの項目でLazy Loadを無効に設定する方法を詳しく解説します。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
自分が使っている項目だけ確認してみてね!
CocoonでLazy Loadを無効にする
WordPressテーマ「Cocoon」でLazy Loadを無効に設定する方法は、下記の通りです。
WordPress投稿画面で、Cocoon設定⇒高速化の順にクリックする
![「Cocoon設定」、「高速化」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/4-1-6.png)
![「Cocoon設定」、「高速化」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/4-1-6.png)
Lazy Loadを有効にするの✔を外す
![「Lazy Loadを有効にする」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/4-2-5.png)
![「Lazy Loadを有効にする」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/4-2-5.png)
変更を保存をクリックする
![「変更を保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/4-3-4.png)
![「変更を保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/4-3-4.png)
これでLazy Loadを無効に設定完了!
EWWW Image OptimizerでLazy Loadを無効にする
プラグイン「EWWW Image Optimizer」でLazy Loadを無効に設定する方法は、下記の通りです。
WordPress投稿画面で、設定⇒EWWW Image Optimizerの順にクリックする
![「設定」、「EWWW Image Optimizer」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/5-1-5.png)
![「設定」、「EWWW Image Optimizer」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/5-1-5.png)
基本をクリックする
![「基本」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/5-2-4.png)
![「基本」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/5-2-4.png)
画像が表示領域に入った (または入ろうとしている) 時にだけ読み込まれるため、読み込み速度を改善しますの✔を外す
![「画像が表示領域に入った (または入ろうとしている) 時にだけ読み込まれるため、読み込み速度を改善します」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/5-3-2.png)
![「画像が表示領域に入った (または入ろうとしている) 時にだけ読み込まれるため、読み込み速度を改善します」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/5-3-2.png)
変更を保存をクリックする
![「変更を保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/5-4.png)
![「変更を保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/5-4.png)
これでLazy Loadを無効に設定できました!
ConoHa WINGでLazy Loadを無効にする
レンタルサーバー「ConoHa WING」でLazy Loadを無効に設定する方法は、下記の通りです。
ConoHa WINGコントロール画面で、サイト管理をクリックする
![「サイト管理」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/6-1-4.png)
![「サイト管理」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/6-1-4.png)
高速化⇒WEXALの順にクリックし、WEXALが「ON」になっていたらファーストビュー高速化をクリックする
![「高速化」、「WEXAL」、「ファーストビュー高速化」がある場所と、WEXALが「ON」になっているか確認している様子](https://www.kamecompass.com/wp-content/uploads/2023/10/6-2-3.png)
![「高速化」、「WEXAL」、「ファーストビュー高速化」がある場所と、WEXALが「ON」になっているか確認している様子](https://www.kamecompass.com/wp-content/uploads/2023/10/6-2-3.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
WEXALが「OFF」になっていたら、Lazy Loadは無効になってるよ
Lazy Load(画像)を無効に変更する
![Lazy Load(画像)を無効に変更している様子](https://www.kamecompass.com/wp-content/uploads/2023/10/6-3-2.png)
![Lazy Load(画像)を無効に変更している様子](https://www.kamecompass.com/wp-content/uploads/2023/10/6-3-2.png)
これでLazy Loadを無効に設定できました!
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
Lazy Loadを無効にしたら、アイキャッチ画像が表示されているか確認してみてね!
Cocoonでアイキャッチ画像を設定するメリット
Cocoonでアイキャッチ画像を設定するメリットを、私なりにざっと書いてみました。
- ページの滞在時間UP!
- ブログ内の回遊率UP!
- SNSからの流入率UP!
それぞれ詳しく解説します。
ページの滞在時間UP!
![アイキャッチ画像がある場合とない場合のページ滞在時間の比較](https://www.kamecompass.com/wp-content/uploads/2023/10/9-1-1.png)
![アイキャッチ画像がある場合とない場合のページ滞在時間の比較](https://www.kamecompass.com/wp-content/uploads/2023/10/9-1-1.png)
ブログ記事に訪れたときに、最初の一画面で見るのがタイトルとリード文になります。
そこにアイキャッチ画像がないと文章だけになり、記事に何が書かれているのか、ぱっと見分からず
本文を読まれずにページから離脱されやすくなります。
アイキャッチがあれば画像でユーザーの目を引くと同時に、何が書かれているか認識でき、本文を読まれやすくなります。
つまりページの滞在時間がUPします。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
「人」で考えると分かりやすく、第一印象って大事だよね!ブログも同じです
ブログ内の回遊率UP!
![アイキャッチ画像がある場合とない場合のブログ内回遊率の比較](https://www.kamecompass.com/wp-content/uploads/2023/10/9-2-1.png)
![アイキャッチ画像がある場合とない場合のブログ内回遊率の比較](https://www.kamecompass.com/wp-content/uploads/2023/10/9-2-1.png)
ブログ記事に書かれている文章はすべて読まれず、流し読みされる場合がほとんどです。
文字のみの内部リンクだと本文に埋もれてしまい、クリックされにくくなります。
一方画像つきの内部リンクだと画像に目がとまり、クリック率が高まり、ブログ内の回遊率もUPします。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
自分だとどっちをクリックするか考えれば一目瞭然だね!
SNSからの流入率UP!
![アイキャッチ画像がある場合とない場合のSNS流入率の比較](https://www.kamecompass.com/wp-content/uploads/2023/10/9-3.png)
![アイキャッチ画像がある場合とない場合のSNS流入率の比較](https://www.kamecompass.com/wp-content/uploads/2023/10/9-3.png)
X(旧Twitter)を例に考えてみます。
毎分毎秒ツイートが流れてくる中で、自分のツイートを読まれることはあまり多くありません。
少しでもユーザーの目を引くために画像があった方が、自分のツイートを読んでもらえる確率は上がります。
そこで興味のある内容であれば、アイキャッチ画像をクリックしてもらうことで
自分のブログに流入させることができます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
ユーザーの目を引くために、魅力的なアイキャッチ画像にデザインすることが必要だね!
まとめ:アイキャッチ画像を設定して記事を読んでもらおう
今回は、Cocoonでアイキャッチ画像の設定方法や表示されない場合の対処法を紹介しました。
以下の記事では、アイキャッチ画像以外のカスタマイズ方法も紹介しています。
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-1.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-1.jpg)
また当ブログでは、Cocoonに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
ためになったという人は“コメント”してくれると嬉しいです!
コメント
コメント一覧 (2件)
消えてしまったアイキャッチ画像が表示されました!
色々調べましたが、こちらのサイトが初心者の私にも1番分かりやすかったです。有益なサイトをありがとうございます。
フクシマさん
コメントありがとうございます!
お役に立てて嬉しいです😊