WordPressのカバー画像と注目画像の違い

WordPress 5.0がGutenbergエディターを導入したとき、WordPressにいくつかの新機能ももたらしました。 それらの機能のいくつかは、ブロックの形で見られます。 それらのブロックの1つはCoverと呼ばれ、投稿またはページのコンテンツ内にいくつかのカスタマイズ可能な機能を備えたカバーされた画像を配置します。

もちろん、WordPressには、ページや投稿の注目画像を指定するオプションがまだ含まれています。 これはいくつかの疑問を提起します。 カバー画像と注目画像は同じですか？ そうでない場合、それらは何であり、どのように使用されますか？ 違いは何ですか？ この記事では、WordPressのカバー画像と注目画像について説明し、これらの各質問に答えます。

カバーされた画像

表紙画像は、通常、ページまたは投稿の上部に配置される大きな写真です。 ヘッダー画像とも呼ばれます。 それらはコンテンツを表します。 これは、読者がコンテンツを表示するときに最初に目にするものです。 それは、読者が何を期待するかについての考えを持っているように、気分を設定したり、記事を視覚的に説明したりするのに役立ちます。 また、ページ全体または投稿全体で使用して、次のセクションの紹介に役立てることもできます。

カバー画像はグーテンベルクのコンテンツに簡単に追加でき、注目の画像ではネイティブに利用できないスタイリング機能がいくつか含まれています。

グーテンベルクには、投稿やページのカバー画像を作成できるCoverという新しいブロックが含まれています。 ブロックは、ブロックリストの[共通ブロック]タブにあります。

Coverブロックを使用すると、オーバーレイとテキストを使用して画像を追加できます。 画像をアップロードするか、メディアライブラリから画像を選択してください。 必要に応じて、テキストとオーバーレイの背後で再生されるビデオを使用することもできます。 これは、人目を引くヘッダーを作成するのに最適です。 これは、サードパーティのプラグインを使用せずに注目の画像では実行できないことです。

画像またはビデオを追加すると、テキスト、固定背景設定、およびオーバーレイの機能が表示されます。 画像の上にいくつかの配置設定があります。

タイトルを追加するには、「タイトルを書く…」と書かれた場所にカーソルを置き、入力を開始します。 また、太字、斜体、リンクの追加、またはテキストの取り消し線を使用するオプションもあります。 画像の上の設定で、テキストを揃えることができます。

固定背景は、画像の視差機能を追加します。 テキストがスクロールしている間、画像はそのまま残ります。 この機能は動画では利用できませんが、他のすべての設定は利用できます。

選択肢から必要な色を選択してオーバーレイ色を追加するか、マルチカラーの円を選択してカスタム色を選択します。

カスタムカラーには、スライダー付きのカラーピッカーが含まれており、色の値が16進数またはRGBで表示されます。

背景の不透明度は、オーバーレイの不透明度の量を変更し、画像をより多く表示してオーバーレイの色をより少なく表​​示するか、オーバーレイをより多く表示して画像をより少なく表​​示するかを選択できるようにします。 この例では、不透明度を80に設定しました。そこに画像があることはわかりますが、詳細はあまりわかりません。

この例では、不透明度を20に設定しました。より多くの画像を見ることができますが、それでもオーバーレイの色が少し表示されます。

画像の上部の設定には、全幅オプションもあります。 これは、画像やビデオのヘッダーを作成したり、美しいセクションの紹介を作成したりするのに最適です。

カバーブロックは、テキスト、オーバーレイ、視差を含む画像を追加する機能を提供することにより、多くのデザインの可能性を開きます。 画像/ビデオ、テキスト、色、視差は、記事の雰囲気を設定し、対象読者にアピールするのに役立ちます。 コンテンツ全体で複数のカバーブロックを使用して、新しいセクション（通常はヘッダーテキストで識別されます）を導入したり、ページのリンクや製品に視覚的な魅力を追加したりできます。

注目の画像

注目の画像は投稿のサムネイルを提供します。 これらのサムネイルは、ブログ投稿を表示するホームページ、ブログアーカイブページ、単一の投稿など、注目の画像を表示する場所に表示されます。 注目の画像は記事自体を表しています。 それらは、興味を刺激し、記事の種類や目的について読者に知らせるために使用されます。

上記の例に示すように、Yoastなどのプラグインを使用して手動で画像を上書きしない限り、コンテンツがソーシャルメディアで共有されるときに表示されるデフォルトの画像としても使用されます。

注目の画像は、投稿またはページの設定に追加されます。 [注目の画像を設定]をクリックして、画像を選択するか、メディアライブラリにアップロードします。

Twenty Nineteenなどのテーマには、注目の画像のオーバーレイが含まれています。 テーマカスタマイザの[色]で色を選択できます。 デフォルトの色は青ですが、スライダーを使用してほぼすべての色を選択できます。

DiviやExtraなどのページビルダーを使用するときに、注目の画像オーバーレイを調整することもできます。 この例では、ブログモジュールの注目の画像オーバーレイアイコンとホバーオーバーレイの色を調整しています。

カバー画像とフィーチャー画像を一緒に使用する

表紙画像と注目画像を同じページまたは投稿で一緒に使用できます。 この例では、両方を記事内に表示しています。 理想的には、このように隣り合って座ってはいけませんが、これは投稿内に表示できることを示すためだけのものです。 ただし、カバー画像を注目画像として使用したい場合があります。

表紙の画像と同じ注目の画像を使用すると、画像はコンテンツ内に2回表示されます。 実際には、注目の画像と表紙の画像の2つの異なるものが表示されていますが、両方に同じ画像を選択しました。

幸い、画像が2回表示されることなく、両方に同じ画像を使用するためにできることがいくつかあります。 Diviや他の多くのテーマなど、一部のテーマでは、注目の画像をコンテンツから除外できます。

DiviまたはExtraを使用している場合は、ダッシュボードメニューでDivi （またはExtra ）>テーマオプション>レイアウトに移動し、[単一投稿レイアウト]タブで[投稿に親指を配置]を無効にします。 このオプションは[単一ページレイアウト]タブでも使用できるため、必要に応じて設定をカスタマイズできます。

この例では、注目の画像は表紙の画像と同じです。 ホバーオーバーレイを追加しました。これは、右側の投稿にカーソルを合わせて示しています。

投稿自体は表紙の画像のみを表示します。 注目の画像は投稿のコンテンツ内に表示されません。

Extraには、投稿の注目画像を個別に非表示にするオプションが含まれています。 これにより、WordPressが投稿やページの注目の画像を処理する方法をより細かく制御できます。 投稿の設定で、[投稿の注目画像を非表示]をクリックします。

WordPressリポジトリの無料プラグインであるHideFeatured Imageなどのプラグインを使用して、投稿の注目画像を非表示にすることもできます。 投稿またはページのすべての注目画像を非表示にするか、ページおよび投稿自体で個別に非表示にするかを選択します。 私がプラグインをテストしたとき、それはTwenty Nineteenと互換性がありませんでしたが、TwentySeventeenなどではうまく機能しました。

注目の画像を非表示にするオプションをページと投稿に追加します。 これは、注目の画像をデフォルトで表示したいが、カバー画像を使用するページや投稿では非表示にする場合に最適です。 これにより、注目の画像を表示するためのデザインをより細かく制御できます。

終わりの考え

これが、WordPressのカバー画像と注目画像の比較です。 最初は同じか似ているように見えますが、実際には非常に異なります。

注目の画像は読者を記事に引き付けます。 記事のサイトには注目の画像が1つだけあり、投稿のサムネイルを表示する場所ならどこにでも表示されますが、Yoastなどのプラグインを使用してソーシャルメディアに表示する別の画像に置き換えることができます。 Twenty Nineteenなどの一部のテーマ、およびDiviなどのビルダーには、注目の画像のカスタマイズが含まれています。

表紙の画像は実際には記事の一部であり、投稿とのエンゲージメントを向上させるのに役立ちます。 記事には、コンテンツ全体に複数のカバー画像またはビデオを含めることができます。 ヘッダーテキストだけでなく画像を使用する場合は、視覚的なデザインを提供したり、記事のセクションを分離したりするのに最適です。 カバー画像は、WordPressに組み込まれている全幅、テキスト、視差、オーバーレイのオプションがあるため、特に興味深いものです。 ビデオを表示できるのが大好きです。 グーテンベルクまで、これらの機能を使用するにはプラグインまたはページビルダーが必要でした。

カバー画像と注目画像は、コンテンツにビジュアルデザインを追加するのに最適です。 それらには異なるオプションと目的があり、別々にまたは一緒に使用できます。

我々はあなたから聞きたい。 WordPressでカバーされた画像と注目の画像をどのように使用しますか？ コメントで教えてください。

karnoff /shutterstock.com経由の注目の画像