≫ Amazon 5日間のBigSale ▶ブラックフライデ-&サイバーマンデ-

アイキャッチ未設定ページの【NO IMAGE】をオリジナル画像にする|Cocoon

cocoon-original-no-imageWordPress
この記事は約3分で読めます。
初心者
初心者

アイキャッチを設定していないページって「NO IMAGE」で表示されるけど、この画像って変更できるの?

アイキャッチを設定していないページは、サイトのエントリーカードの画像が共通で「NO IMAGE」になります。

NO_IMAGE画像の変更前

 

デフォルトのNO IMAGE画像だとちょっと味気ないし、サイトの不具合でこうなっているのかと読者に勘違いされると離脱率が上がる可能性もあり危険かも。

よしてっく
よしてっく

Cocoonテーマならこの「NO IMAGE」の画像を簡単に変更できます。

今回は、WordPressのCocoonテーマで「NO IMAGE」をオリジナル画像に変更する手順をご紹介します。

 

 

スポンサーリンク

NO IMAGE用オリジナル画像を用意する

NO_IMAGEのオリジナル画像を用意する

事前にNO IMAGE用のオリジナル画像を用意しましょう。

普段からアイキャッチを作成しているはずですので、Canva等で同じ要領で作成して下さい。

 

オリジナルNO IMAGE画像のデザイン

デザインは人それぞれですがNO IMAGEに使う画像のパターンとしては3つ、

  1. デフォルトに似たデザインのアレンジ型(NO IMAGE入り)
  2. キレイな画像素材を使う(NO IMAGE入り)
  3. サイト全体のテーマに合わせたイメージ(NO IMAGEなし)

どのパターンがベストというルールは無いので、自分のサイトコンセプトに合わせて作ってみてください。

NO IMAGEオリジナル画像例

私が用意したNO IMAGEオリジナル画像は下記のような感じ。

 

①デフォルトに似たデザインのアレンジ型(NO IMAGE入り)

NO IMAGE

 
②キレイな画像素材を使う(NO IMAGE入り)

NO IMAGE_SEA

 

③サイト全体のテーマに合わせたイメージ(NO IMAGEなし)

NO IMAGE_YOSHITECHBLOG

どれもけっこう適当にサクっと作りました。

 

オリジナルNO IMAGE画像のサイズ

NO IMAGEは、設定した画像を元に様々なサイズのサムネイル画像が生成されます。

参考記事 NO IMAGE画像を変更する方法|Cocoon公式サイト

 

あまり小さ過ぎる画像を設定すると、代替えサムネイルが生成されないとのことです。

生成されるNO IMAGEの代替サムネイルサイズ

  • 320px×180px
  • 160px×90px
  • 150px×150px

さらに、Cocoon設定のインデックスメニューでカードタイプを大きなカードに設定している場合は横幅が800px以上必要となります。

Cocoon設定_インデックスカードの大きさ

 

まとめると、NO IMAGEで使う画像は横幅が800px以上あればOK。

普段作成しているアイキャッチ画像のサイズが800px以上であれば、サイズを気にせず同じ様に作成しましょう。

私の場合は、アイキャッチ画像のサイズをずっと1280×720pxで作成しているので今回もそのままのサイズで作りました。

 

 

Cocoon:NO IMAGEの画像設定

NO_IMAGEのル画像設定

NO IMAGEに使う画像が用意できたら、Cocoon設定で変更します。

 

(1)WordPress管理画面(ダッシュボード)でCocoon設定をクリックします。

Cocoon設定

 

(2)タブメニューの画像をクリックします。

Cocoon設定の画像タブ

 

(3)一番下にスクロールしてNO IMAGE画像の項目に移動します。

Cocoon設定の画像のNO_IMAGE設定

 

(4)NO IMAGE画像の選択をクリックします。

NO_IMAGE設定の選択

 

(5)画像をアップロードします。

画像のアップロード

 

(6)代替えテキストを設定します。(NO IMAGEなど)

NO_IMAGE画像の代替テキスト設定

 

以上で、NO IMAGE画像の変更は完了です。

 

これで、デフォルトのNO IMAGE画像よりオリジナル感が出ますね。

NO_IMAGE画像の変更後

 

以上です、ありがとうございました。

コメント