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