PR
当ブログ愛用のWordPressテーマ
＼初心者でもおしゃれなブログを作れる！／
／デザインや機能をチェック！＼
おすすめAIツール6選
- AI文字起こしツール「【Notta】／Notta Memo」
- AI録音・要約ツール「Plaud Note／Plaud NotePin」
- AI動画編集ツール「PowerDirector」
- AI写真編集ツール「PhotoDirector」
- AI画像編集ツール「Photoroom」
- AIメンタルケアツール「Awarefy」
【Cocoon】アイキャッチ画像の設定と非表示にする方法【かんたん解決！】
「アイキャッチ画像を設定したい」
「アイキャッチ画像が表示されない、どうして？」
「アイキャッチ画像を非表示にするには？」
この記事では、そんな方に向けて、Cocoonでアイキャッチ画像の設定方法をお話しします。
かめコンパスこんにちは、かめコンパスです！
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！
以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
あわせて読みたい
【Cocoon】使い方と初期設定を初心者向けに解説【WordPressテーマ】
WordPress利用者必見！ブログ初心者向けにCocoonの使い方と設定方法を運営歴・記事数別で紹介しています。この記事を読めば、記事の書き方やサイト設計・デザイン、収益化…
本記事はWordPressテーマ「SWELL」で作成しているので、デザインが抜群にオシャレです！
WordPressテーマ「SWELL」
- 初心者でもおしゃれなサイトを作りやすい！デザイン知識なしでも楽しく始めやすい
- 独自ブロックを多数搭載！プログラミング不要で記事作成をラクに進めやすい
- 記事装飾が豊富で読みやすい！回遊率アップを狙いやすく収益化しやすい
- 表示速度を意識した設計！SEO対策しながら快適に運営しやすい
- 買い切り型で複数サイトに使える！追加費用を気にせず長く使いやすい
＼初心者でもおしゃれなブログを作れる！／
／デザインや機能をチェック！＼
この記事を書いた人
かめコンパス
- 副業で210記事以上を公開し、月1万PVを達成したWordPressブロガー
- 記事品質が企業にも評価され、25社から掲載依頼を受託
- 利用歴1年以上のCocoonからSWELLへ移行し、オシャレなブログを実現
目次
アイキャッチ画像とは？
アイキャッチ画像とは、ユーザーの目をひきつけるための画像のことです。
Cocoonでアイキャッチ画像が使われる場所は、
- サムネイル（新着記事一覧やカテゴリー別記事一覧など）
- 各記事ページのタイトル下
- 検索結果のページタイトル右
です。
かめコンパス当ブログでも全記事にアイキャッチ画像を設定しているよ！
Cocoonアイキャッチ画像の設定方法
Cocoonでアイキャッチ画像を設定する方法は
の2つあります。
それぞれ詳しく解説します。
自動で設定する
アイキャッチ画像を自動で設定する方法は、下記の通りです。
STEP
WordPress管理画面で、Cocoon設定⇒画像の順にクリックする
STEP
STEP
変更をまとめて保存をクリックする
STEP
これでアイキャッチ画像の設定完了！
かめコンパス好きな画像をアイキャッチに設定したい場合は、次に紹介する「手動」のやり方で設定してね！
手動で設定する
アイキャッチ画像を手動で設定する方法は、下記の通りです。
STEP
記事投稿画面で、設定⇒投稿の順にクリックする
STEP
「アイキャッチ画像を設定」をクリックする
STEP
ファイルをアップロード⇒ファイルを選択の順にクリックする
STEP
アイキャッチに設定したい画像を選択し、開くをクリックする
STEP
アイキャッチ画像を設定をクリックする
STEP
これでアイキャッチ画像の設定完了！
アイキャッチ画像はリサイズして設定する
Cocoonで設定するアイキャッチ画像は必ず推奨サイズにリサイズしましょう。
推奨サイズより小さいサイズを使用すると、画像が引き延ばされてしまい、画質が粗くなります。
推奨サイズより大きいサイズでは、画像の容量が大きくなってしまい、サイトが重くなってしまう。
つまり、サイトの表示スピードが遅くなってしまいます。
ですので、アイキャッチ画像は推奨サイズにリサイズして設定してください。
かめコンパス記事中に挿入する画像とアイキャッチ画像の推奨サイズは違うよ
Cocoonでアイキャッチ画像の推奨サイズとリサイズ方法については、下の記事で紹介してます。
関連記事
【Cocoon】アイキャッチ画像の推奨サイズは？統一感のあるブログにしよう【Wordpress】
WordPress/Cocoon利用者必見！アイキャッチ画像の推奨サイズや画像のサイズを変更する方法、画像が切れる場合の対処法を紹介しています。アイキャッチ画像のサイズを統一し…
Cocoonでアイキャッチを非表示にする方法
Cocoonでアイキャッチの
を非表示にする方法を、それぞれ詳しく解説します。
本文中の画像を非表示にする
本文中のアイキャッチ画像を非表示にする方法は、下記の通りです。
STEP
WordPress管理画面で、Cocoon設定⇒画像の順にクリックする
STEP
STEP
変更をまとめて保存をクリックする
STEP
これで本文中のアイキャッチ画像を非表示にできた！
プレビューでの確認方法
- プレビューをクリック
- 新しいタブでプレビューをクリック
カテゴリーラベルを非表示にする
アイキャッチ画像のカテゴリーラベルを非表示にする方法は、下記の通りです。
STEP
WordPress管理画面で、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設定⇒高速化の順にクリックする
STEP
Lazy Loadを有効にするの✔を外す
STEP
変更を保存をクリックする
これでLazy Loadを無効に設定完了！
EWWW Image OptimizerでLazy Loadを無効にする
プラグイン「EWWW Image Optimizer」でLazy Loadを無効に設定する方法は、下記の通りです。
STEP
WordPress投稿画面で、設定⇒EWWW Image Optimizerの順にクリックする
STEP
基本をクリックする
STEP
画像が表示領域に入った (または入ろうとしている) 時にだけ読み込まれるため、読み込み速度を改善しますの✔を外す
STEP
変更を保存をクリックする
これでLazy Loadを無効に設定できました！
ConoHa WINGでLazy Loadを無効にする
レンタルサーバー「ConoHa WING」でLazy Loadを無効に設定する方法は、下記の通りです。
STEP
ConoHa WINGコントロール画面で、サイト管理をクリックする
STEP
高速化⇒WEXALの順にクリックし、WEXALが「ON」になっていたらファーストビュー高速化をクリックする
かめコンパスWEXALが「OFF」になっていたら、Lazy Loadは無効になってるよ
STEP
Lazy Load(画像)を無効に変更する
これでLazy Loadを無効に設定できました！
かめコンパスLazy Loadを無効にしたら、アイキャッチ画像が表示されているか確認してみてね！
Cocoonでアイキャッチ画像を設定するメリット
Cocoonでアイキャッチ画像を設定するメリットを、私なりにざっと書いてみました。
それぞれ詳しく解説します。
ページの滞在時間UP！
ブログ記事に訪れたときに、最初の一画面で見るのがタイトルとリード文になります。
そこにアイキャッチ画像がないと文章だけになり、記事に何が書かれているのか、ぱっと見分からず
本文を読まれずにページから離脱されやすくなります。
アイキャッチがあれば画像でユーザーの目を引くと同時に、何が書かれているか認識でき、本文を読まれやすくなります。
つまりページの滞在時間がUPします。
かめコンパス「人」で考えると分かりやすく、第一印象って大事だよね！ブログも同じです
ブログ内の回遊率UP！
ブログ記事に書かれている文章はすべて読まれず、流し読みされる場合がほとんどです。
文字のみの内部リンクだと本文に埋もれてしまい、クリックされにくくなります。
一方画像つきの内部リンクだと画像に目がとまり、クリック率が高まり、ブログ内の回遊率もUPします。
かめコンパス自分だとどっちをクリックするか考えれば一目瞭然だね！
SNSからの流入率UP！
X(旧Twitter)を例に考えてみます。
毎分毎秒ツイートが流れてくる中で、自分のツイートを読まれることはあまり多くありません。
少しでもユーザーの目を引くために画像があった方が、自分のツイートを読んでもらえる確率は上がります。
そこで興味のある内容であれば、アイキャッチ画像をクリックしてもらうことで
自分のブログに流入させることができます。
かめコンパスユーザーの目を引くために、魅力的なアイキャッチ画像にデザインすることが必要だね！
まとめ：アイキャッチ画像を設定して記事を読んでもらおう
今回は、Cocoonでアイキャッチ画像の設定方法や表示されない場合の対処法を紹介しました。
以下の記事では、アイキャッチ画像以外のカスタマイズ方法も紹介しています。
あわせて読みたい
【Cocoon】カスタマイズ方法｜おしゃれなブログに様変わり【CSS不要】
WordPress利用者必見！CocoonでCSSを使わず、おしゃれにカスタマイズする方法を紹介しています。この記事に書いてある内容を行えば、ユーザビリティーの向上はもちろん、感…
また当ブログでは、Cocoonに関する記事をいくつか書いてます。
下のページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“𝕏フォロー”や“ブックマーク”してくれると嬉しいです！
本記事はWordPressテーマ「SWELL」で作成しているので、デザインが抜群にオシャレです！
WordPressテーマ「SWELL」
- 初心者でもおしゃれなサイトを作りやすい！デザイン知識なしでも楽しく始めやすい
- 独自ブロックを多数搭載！プログラミング不要で記事作成をラクに進めやすい
- 記事装飾が豊富で読みやすい！回遊率アップを狙いやすく収益化しやすい
- 表示速度を意識した設計！SEO対策しながら快適に運営しやすい
- 買い切り型で複数サイトに使える！追加費用を気にせず長く使いやすい
＼初心者でもおしゃれなブログを作れる！／
／デザインや機能をチェック！＼
コメント
コメント一覧 （2件）
消えてしまったアイキャッチ画像が表示されました！
色々調べましたが、こちらのサイトが初心者の私にも1番分かりやすかったです。有益なサイトをありがとうございます。
フクシマさん
コメントありがとうございます！
お役に立てて嬉しいです😊