WordPressブロックエディターにおけるカバー画像とアイキャッチ画像の違い（初心者向けガイド）

WordPressを使い始めた頃、アイキャッチ画像とカバー画像をよく混同していました。その結果、初期のブログ記事のいくつかは期待通りになりませんでした。重要なビジュアルが欠けていたり、画像が配置ミスでデザインが少しずれてしまったりしていました。

幸いなことに、これらの2種類の画像がそれぞれユニークで重要な役割を果たしていることをすぐに学びました。

カバー画像はコンテンツ内で使用され、トーンを設定し、読者を引きつけます。対照的に、アイキャッチ画像は視覚的な要約として機能し、投稿が開かれる前にそのエッセンスを示します。

このガイドでは、WordPressブロックエディターにおけるカバー画像とアイキャッチ画像について学んだことをすべて共有します。

このガイドで説明する内容の概要を以下に示します。

• カバー画像とは？
• アイキャッチ画像とは？
• WordPressブロックエディターにおけるカバー画像とアイキャッチ画像の比較
• WordPressでカバー画像を追加する方法
• How to Add a Featured Image in WordPress
• カバー画像とアイキャッチ画像に関するよくある質問
• WordPress画像の専門家向けガイド

カバー画像とは？

カバー画像は、投稿やページのコンテンツ内のどこにでも配置できる横長の画像です。

これは、長いテキストの区切りや、新しいセクションの視覚的な開始を作成するために使用される特定のブロックで、しばしばその上にテキストが書かれます。

これらは、旅行、ライフスタイル、ポートフォリオなど、ストーリーテリングやビジュアルコンテンツに大きく依存するウェブサイトで特に一般的です。

例えば、ブロガーはカバー画像を使用して長い記事の新しい章を紹介することができます。マーケターは、フル幅のコールトゥアクションバナーを作成するためにそれらを使用することが多く、写真家はケーススタディ内で見事なポートフォリオ作品を紹介するためにそれらを使用できます。

WordPressの「カバー」ブロックを使用すると、カバー画像を追加できます。画像にテキストやカラーオーバーレイを追加することもできます。

これらのオーバーレイは、サイトの色に合わせたり、さまざまなコンテンツセクションの雰囲気を設定したりするようにカスタマイズすることもできます。記事の後半で、このカスタマイズオプションについてさらに詳しく説明します。

最良の外観のためには、1920×1080ピクセルのカバー画像を使用することをお勧めします。このサイズにより、画像が高品質になり、投稿の上部エリアをきれいに埋めることができます。

アイキャッチ画像とは？

アイキャッチ画像は、ブログ記事の顔のようなもので、読者を引き付ける視覚的な表現を提供します。

ポストサムネイルとも呼ばれ、ホームページやブログアーカイブページに表示されます。記事が共有された際の ソーシャルメディアフィード にも表示されます。

これらの画像は視覚的に魅力的になるように作られており、読者があなたのWordPressブログやウェブサイトをクリックして探索することを奨励します。

例えば、WPBeginnerでは、私と私のチームは、ブランドの一貫したスタイルを維持しながら、各アイキャッチ画像がユニークであることを確認しています。

アイキャッチ画像は、使用しているWordPressテーマに依存することに注意してください。なぜなら、テーマがこれらの画像の最適なサイズを決定するからです。

これは、テーマにはホームページやアーカイブページでの投稿グリッドやリストのような定義済みのレイアウトがあり、クリーンでプロフェッショナルなデザインを維持するために一貫した画像サイズが必要だからです。

例えば、多くのテーマでは標準的な16:9のアスペクト比を採用しており、680×382ピクセルなどのサイズを使用しています。テーマによっては、アイキャッチ画像をヘッダー画像として使用し、1200×675ピクセルなどの寸法を使用する場合もあります。

より詳細な洞察が必要な場合は、この WordPress画像サイズに関する包括的なガイドをご覧ください。

WordPressブロックエディターにおけるカバー画像とアイキャッチ画像の比較

違いをさらに明確にするために、カバー画像とアイキャッチ画像の簡単な比較表を以下に示します。

機能	カバー画像	アイキャッチ画像
主な目的	投稿内の視覚的な区切りを作成し、セクションを強調する。	ホームページ、アーカイブ、ソーシャルメディアで記事全体を表す。
場所	投稿またはページのコンテンツ内のどこにでも。	テーマによって、投稿自体以外のページに表示されます。
追加方法	コンテンツエディターで「カバー」ブロックを使用します。	投稿サイドバーの「アイキャッチ画像」設定を使用します。
主な機能	テキストオーバーレイ、パララックス効果、フィルターを追加できます。	外観とサイズはWordPressテーマによって制御されます。

WordPressでカバー画像を追加する方法

Gutenbergとしても知られる WordPressブロックエディター を使用すると、便利なカバーブロックを使ってカバー画像を簡単に追加できます。

まず、投稿 » 新規追加に移動して新しい投稿を作成する必要があります。

既存のものを編集することもできます。投稿 » 全投稿に移動し、編集したい投稿を見つけて、投稿タイトルをクリックしてエディターで開きます。

投稿エディターで、「+」ボタンをクリックして新しいブロックを追加し、リストから「カバー」ブロックを選択します。

「カバー」ブロックは「メディア」タブの下にあります。または、ブロック検索フィールドに「/cover」と入力して簡単に見つけることもできます。

「カバー」ブロックを選択すると、コンテンツエディターに表示されます。これでカバー画像を追加する準備ができました。

お気に入りの画像または動画をブロックエリアにドラッグアンドドロップするだけです。または、「アップロード」ボタンを押してコンピューターからファイルを選択することもできます。

メディアライブラリにすでに素晴らしいものがある場合は、「メディアライブラリ」ボタンをクリックして、メディアギャラリーから画像を選択します。

投稿に画像を追加するには、「選択」ボタンをクリックしてください。

さて、カスタマイズの時間です。

画像をクリックするだけで、調整用のツールバーが表示されます。右側のパネルにはさらに多くのオプションがあります。

まずタイトルを追加しましょう。カバー画像の真ん中にある「タイトルを入力…」エリアをクリックして、テキストを入力してください。

テキストの上にカスタマイズ用の便利な書式設定オプションが表示されます。

次に、右側のパネルで追加の設定を確認します。

ここには、「設定」と「スタイル」の2つのタブが表示されます。

「設定」タブでは、レイアウトオプションをカスタマイズできます。デフォルトではレイアウトはフル幅に設定されているため、この設定はそのままにしておくことができます。

次に、デザインに合わせて固定または繰り返し背景のいずれかを選択します。固定背景は、パララックス効果を作成するのに最適で、画像にダイナミックな感覚を与えます。繰り返し背景は、タイル状の画像を使用する場合に役立ちます。

次に、画像のフォーカルポイントを調整して、重要な部分を強調します。解像度を設定して、画像の鮮明さをどの程度にしたいかを選択することもできます。

次に「スタイル」タブに移動し、 オーバーレイの不透明度を調整します。これは、画像上のカラーレイヤーの透明度を指します。

デフォルトでは50%の透明度に設定されていますが、投稿の雰囲気に合わせて調整できます。これにより、テキストが読みやすくなり、色の表示量を制御できます。

最後に、 フィルター を試して画像のスタイルを変更できます。最適なものを見つけるために、さまざまなフィルターを試してみてください。

クリエイティブな作業が好きな方は、詳細設定にアクセスしてカスタムCSSを追加し、カバー画像にユニークな雰囲気を与えましょう。

これで完了です！投稿にさらにカバー画像が必要な場合は、これらの手順を繰り返して追加してください。これにより、ダイナミックで魅力的な読書体験が生まれます。

完了したら、プレビューして投稿を公開し、フロントエンドで何も問題がないことを確認してください。

WordPressでアイキャッチ画像を追加する方法

WordPressの投稿にアイキャッチ画像を追加することは、投稿を目立たせる簡単な方法です。手順はカバー画像を追加するのとほぼ同じです。

ブログ初心者の方も、簡単な復習が必要な方も、やり方はこちらです。

まず、編集したい投稿を開きます。アイキャッチ画像のメタボックスは右側にあります。

まず「アイキャッチ画像を設定」オプションをクリックしてください。

それでは、アイキャッチ画像を追加しましょう。

ドラッグ＆ドロップアップローダーを使用するか、メディアライブラリから画像を選択して、新しい画像をアップロードできます。

その後、アイキャッチ画像にタイトルと代替テキスト（SEOやスクリーンリーダーを使用するユーザーにとって重要です）を追加し、「アイキャッチ画像を設定」ボタンをクリックします。これで、記事にアイキャッチ画像を正常に追加できました！

より詳細な手順については、WordPressでのアイキャッチ画像または投稿サムネイルの追加に関する初心者向けガイドをお読みください。WordPressでのアイキャッチ画像の追加。

アイキャッチ画像を追加した後、カスタマイズできます。ただし、カスタマイズオプションは使用しているWordPressテーマの種類によって異なります。

このステップでは、テーマカスタマイザーとフルサイトエディター（FSE）の2つの方法でアイキャッチ画像をカスタマイズする方法を探ります。

テーマカスタマイザーの使用

この方法は一般的にクラシックテーマで機能しますが、この記事ではSydneyテーマを使用します。Sydneyは、サイトの外観と雰囲気を簡単に改善できるユーザーフレンドリーなデザインオプションを提供しています。

まず、テーマをインストールして有効化する必要があります。ヘルプが必要な場合は、私のチームのWordPressテーマのインストール方法に関するガイドをお読みください。

次に、WordPressダッシュボードに移動し、外観 » カスタマイズに移動します。これにより、カスタム機能が開きます。

ここでは、アイキャッチ画像を含む、サイトのビジュアルプレゼンテーションの多くの側面を微調整できます。

カスタマイザー内では、「ヘッダー」のようなセクションを探索して、アイキャッチ画像に関連する設定にアクセスすることもできます。

ヘッダーのプリセットやモバイルレイアウトも調整できます。変更に満足したら、左上の「公開」をクリックして保存します。

詳細については、テーマカスタマイザーの使用方法に関するこのガイドをご覧ください。

フルサイトエディター（FSE）の使用

ブロックベースのテーマを使用している場合、フルサイトエディター（FSE）を使用すると、アイキャッチ画像をカスタマイズできます。以下の手順は、すべてのアイキャッチ画像のグローバルなサイト全体の設定を変更する方法を示しています。

これはグローバル設定であることを覚えておいてください。より具体的な調整については、「シングル投稿」テンプレートなどの個々のテンプレートを編集することもできます。

まず、WordPress管理パネルから外観 » エディターに移動します。これにより、サイトエディターが開きます。エディターに入ったら、ナビゲーション » スタイルに移動します。

次に、下にスクロールしてリストから「ブロック」を選択します。

これにより、エディター内でカスタマイズできるブロックのリストが開きます。

次に、「アイキャッチ画像」ブロックを探します。より速く見つけるには、検索バーに「アイキャッチ画像」と入力できます。

ここで、アイキャッチ画像のカスタマイズオプションが表示されます。寸法（パディングとマージン）の変更も含まれます。

画像の境界線、影、角丸を追加することもできます。これらの設定を自由に試して、アイキャッチ画像の見た目がどのように変化するかを確認してください。

変更に満足したら、公開する前にプレビューして確認してください。これにより、すべてのデバイスで完璧に見えるようになります。

詳細については、WordPressフルサイト編集の完全初心者向けガイドをご覧ください。

カバー画像とアイキャッチ画像に関するよくある質問

WordPress でカバー画像とアイキャッチ画像を使用することについて、チームがよく受ける質問への回答を以下に示します。

カバー画像とアイキャッチ画像に同じ画像を使用できますか？

はい、もちろんです。アイキャッチ画像を設定してから、その同じ画像を投稿の先頭にあるカバーブロックで使用するのは一般的な方法です。これにより、読者がリンクをクリックした瞬間から読み始める瞬間まで、一貫した視覚体験を提供できます。

カバー画像のテキストが読みにくいのはなぜですか？

これは通常、テキストの色と背景の画像とのコントラストが十分でないことが原因です。カバーブロックの設定でカラーオーバーレイを調整することで、これを修正できます。

暗いオーバーレイに明るいテキスト（またはその逆）を使用すると、読みやすさが大幅に向上します。

投稿にアイキャッチ画像を設定しなかった場合はどうなりますか？

アイキャッチ画像を設定しないと、ブログのホームページやアーカイブページに空白のスペースとして表示される場合があります。

記事がソーシャルメディアで共有された場合、プラットフォームはページからランダムな画像を取得するか、まったく画像を表示しない可能性があり、エンゲージメントに影響を与える可能性があります。

カバー画像に追加したテキストは SEO に影響しますか？

カバーブロックに配置したテキストは、Google によって通常の段落または見出しとして扱われるため、インデックスに登録され、投稿の SEO に貢献する可能性があります。ただし、メインのページタイトルと専用の見出し（H2、H3）の方がはるかに大きな影響を与えます。

投稿に複数のアイキャッチ画像を設定できますか？

デフォルトでは、WordPress は投稿ごとに 1 つのアイキャッチ画像しか許可しません。ただし、All in One SEO のようなプラグインを使用して、ソーシャルメディアプラットフォーム専用の別の画像を設定できます。

これにより、サイトの標準的なアイキャッチ画像と、Facebook や Twitter に最適化されたカスタム画像を持つことができます。

WordPress画像の専門家向けガイド

WordPressの画像をさらに良くするための便利なツールとヒントを以下に示します。

• WordPressの最適なアイキャッチ画像プラグインとツール（比較）
• WordPressの投稿サムネイルをトリミングおよび編集する方法
• WordPressで追加の画像サイズを作成する方法
• WordPressにヒーローイメージを追加する方法（すべてのテーマに対応）
• WordPressにおける画像Altテキストと画像タイトルの違いとは？
• 品質を損なわずにWebパフォーマンスのために画像を最適化する方法
• WordPressで画像の盗難を防ぐ方法

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。