Cocoon｜（トップページ・カテゴリーページ）の調整：アイキャッチ画像の表示サイズ

今回は、「Cocoon」テーマを使って、アイキャッチ画像のサイズや比率を調整する方法を解説し、記事一覧ページでの視覚的な効果を高めるためのポイントを紹介します。

アイキャッチ画像の重要性

アイキャッチ画像は、記事の内容を視覚的に伝えると同時に、サイト全体の印象を決定づけます。特にブログやニュースサイトでは、タイトルとアイキャッチ画像が訪問者の注意を引く最初のポイントとなるため、適切な画像サイズや比率が非常に重要です。

アイキャッチ画像の主な役割：

• 記事内容の予告: 記事の内容やトピックを視覚的に表現します。
• ユーザーの興味を引く: 魅力的な画像は、訪問者の注意を引き、記事へのクリックを促進します。
• ブランドイメージの強化: 一貫したデザインのアイキャッチ画像は、サイト全体のブランドイメージを強化し、視覚的に整った印象を与えます。

アイキャッチ画像の表示サイズと比率を調整する理由

1. 視覚的な統一感を作る
   記事一覧に表示されるアイキャッチ画像のサイズや比率が統一されていないと、ページがごちゃごちゃして見え、ユーザーにとって不快な体験となる可能性があります。統一されたサイズと比率を設定することで、サイト全体が整然として見え、プロフェッショナルな印象を与えます。
2. クリック率の向上
   アイキャッチ画像は、記事をクリックさせるための強力な引き金です。適切なサイズで表示された画像は、視覚的に魅力的で、ユーザーがクリックしたくなる要素を引き出します。
3. レスポンシブデザインへの対応
   モバイル端末でもきれいに表示されるように、画像のサイズや比率はレスポンシブデザインに対応する必要があります。特に、スマートフォンやタブレットでの閲覧時にも、画像が崩れたり、切れたりしないように調整することが重要です。

Cocoonテーマでアイキャッチ画像の表示サイズ・比率を調整する方法

「Cocoon」テーマを使うことで、アイキャッチ画像のサイズや比率を簡単に調整することができます。以下の手順で、記事一覧ページに表示されるアイキャッチ画像の設定を変更できます。

1. WordPressダッシュボードにログイン

まず、WordPressの管理画面にログインします。

2. 「Cocoon設定」を開く

ダッシュボード左メニューから「Cocoon設定」を選択します。

3. 「デザイン設定」→「アイキャッチ画像設定」を選択

Cocoon設定の中で、「デザイン設定」をクリックし、その中の「アイキャッチ画像設定」を選びます。この設定画面では、アイキャッチ画像のサイズや表示比率に関する詳細な設定を変更できます。

4. アイキャッチ画像のサイズを設定

「アイキャッチ画像設定」内で、表示する画像のサイズを設定します。例えば、以下のような設定が可能です：

• 幅（横のサイズ）: アイキャッチ画像の横幅を設定します。幅が大きすぎると、画像が切れてしまうことがあるため、適切なサイズに調整しましょう。
• 高さ（縦のサイズ）: 高さも調整できます。適切な高さに設定することで、画像がバランスよく表示されます。

例えば、幅1200px × 高さ675px というサイズは、標準的なワイドな表示に適しています。

5. アイキャッチ画像の比率を調整

アイキャッチ画像の比率も重要です。横長（16:9）や正方形（1:1）、**縦長（9:16）**など、記事内容やサイトのデザインに合った比率を選ぶことができます。

• 横長の比率（16:9）は、特にブログやニュースサイトに適しており、視覚的に広がりを持たせることができます。
• 正方形の比率（1:1）は、SNSでのシェア時にも適しており、アイキャッチ画像が切り取られることなく表示されます。

Cocoonでは、記事一覧の表示レイアウトに応じて、アイキャッチ画像の比率を調整することができます。適切な比率を選択することで、各カード内の画像がきれいに表示され、サイト全体が整った印象を与えます。

6. 変更を保存

設定が完了したら、「変更を保存」ボタンをクリックして、設定内容を反映させます。

アイキャッチ画像の最適なサイズと比率

アイキャッチ画像を設定する際の最適なサイズや比率については、以下のポイントを参考にしてください。

1. PC用の推奨サイズ
   • 一般的なブログやニュースサイトの場合、アイキャッチ画像の横幅は1200px、縦幅は675px程度が理想的です。このサイズは、表示速度と画像のクオリティのバランスが良く、PCでもモバイルでも適切に表示されます。
2. モバイル用の推奨サイズ
   • モバイル端末では、画面幅に合わせて画像が自動的にリサイズされますが、600px × 338px程度のサイズに調整しておくと、読み込み速度が速く、視覚的にも問題がないサイズです。
3. 画像の比率
   • **横長比率（16:9）**が多くのサイトで標準的に使用されており、ブログ記事一覧やカテゴリーページでもよく見られます。
   • SNSへのシェアを重視する場合は、**正方形（1:1）**の比率を使用すると、画像が切り取られずにそのまま表示されやすくなります。

アイキャッチ画像を使ったデザインのポイント

1. 一貫性を保つ
   記事一覧のアイキャッチ画像のデザインにおいて、一貫性を持たせることが大切です。すべてのアイキャッチ画像が似たようなスタイル（カラーやフォント、構図など）で作られていると、サイト全体に統一感が生まれ、視覚的に魅力的になります。
2. 画像のクオリティを重視
   高品質な画像を使用しましょう。解像度が低かったり、ぼやけた画像は、サイト全体の印象を損ねる原因となります。高解像度の画像を使用し、圧縮して読み込み速度を保つようにしましょう。
3. 画像の余白を調整
   アイキャッチ画像の中に文字を含める場合、文字が画像の端に寄りすぎると見づらくなります。余白を適切に確保し、視認性を高めましょう。