【AFFINGER7】アイキャッチ画像を記事に自動表示する方法｜表示されないときの対処法も解説

AFFINGER7を使っていて、

「設定したアイキャッチ画像を記事の最初にも表示したい」

「毎回設定するのではなく、自動で表示させる方法はないの？」

と悩んでいませんか？

AFFINGER7では、AFFINGER管理から設定するだけで、アイキャッチ画像を記事に自動表示できます。

基本的な設定場所は、

AFFINGER管理 → 投稿・固定記事 → アイキャッチ設定

です。

一度設定しておけば、記事を作成するたびに表示設定を変更する必要はありません。

この記事では、

• アイキャッチ画像を記事に自動表示する方法
• アイキャッチ画像の表示位置やデザイン
• 記事ごとに設定を変更する方法
• アイキャッチ画像が表示されないときの確認ポイント
• アイキャッチ画像のおすすめサイズ

について、AFFINGER7初心者向けにわかりやすく解説します。

AFFINGER7を導入したばかりで、ほかの設定方法についても知りたい方は、AFFINGER7の使い方まとめも参考にしてください。

AFFINGER7のアイキャッチ画像とは？

アイキャッチ画像とは、その記事の内容をイメージしてもらうために設定する代表画像のことです。

ブログでは、

• 記事ページ
• 記事一覧
• 関連記事
• スライドショー
• SNSでシェアしたとき

など、さまざまな場所でアイキャッチ画像が利用されます。

ブログ全体のデザインを整えるためにも、基本的には各記事にアイキャッチ画像を設定しておくのがおすすめです。

まだWordPressでアイキャッチ画像を設定したことがない方は、先にWordPressでアイキャッチ画像を設定する方法を確認しておくとわかりやすいです。

アイキャッチ画像とサムネイル画像の違い

初心者の方が混同しやすいのが、「アイキャッチ画像」と「サムネイル画像」の違いです。

簡単に整理すると、

アイキャッチ画像→ 投稿そのものに設定する代表画像

サムネイル画像→ 記事一覧などでアイキャッチ画像を小さく表示したもの

と考えるとわかりやすいと思います。

そのため、「記事一覧には画像が表示されるのに、記事本文を開くとアイキャッチ画像が表示されない」ということもあります。

この場合は、これから紹介するアイキャッチ画像の表示設定を確認してみましょう。

AFFINGER7でアイキャッチ画像を記事に自動表示する方法

それでは、実際にAFFINGER7でアイキャッチ画像を自動表示してみましょう。

設定自体は難しくありません。

AFFINGER7のアイキャッチ画像の表示位置を変更する

アイキャッチ画像を表示できたら、次にサイトのデザインに合わせて表示方法を調整してみましょう。

タイトル上にアイキャッチ画像を表示する

サイトのデザインによっては、

アイキャッチ画像
↓
記事タイトル
↓
本文

という順番で表示したい場合があります。

画像を最初に大きく見せたいブログや、写真を印象的に見せたいサイトなどでは使いやすいレイアウトです。

タイトル下にアイキャッチ画像を表示する

ブログでは、

記事タイトル
↓
アイキャッチ画像
↓
本文

というレイアウトもよく利用されます。

最初に記事タイトルを読んでもらい、その下で記事内容をイメージする画像を見せる形です。

どちらが正解というわけではありません。

実際にパソコン・スマートフォンの両方で確認して、サイト全体のデザインに合った表示方法を選びましょう。

AFFINGER7のアイキャッチ画像のデザインを変更する

AFFINGER7では、画像の見せ方も変更できます。

サイトの雰囲気に合わせてデザインを選んでみましょう。

デフォルト

もっともシンプルな表示方法です。

余計な装飾を付けず、画像そのものを見せたい場合に向いています。

ブログをシンプルにまとめたい場合は、まずデフォルトから試してみるとよいでしょう。

ワイド

画像を横に大きく見せたい場合に使いやすいデザインです。

写真を大きく見せたい、

• 飲食店
• 旅行
• ホテル
• 美容
• 商品レビュー

などの記事とも相性がいいです。

ポラロイド風

写真のようなデザインで画像を表示したい場合に利用できます。

ただし、すべての記事で装飾を強くするとサイト全体がごちゃごちゃして見えることもあります。

特にこだわりがなければ、デフォルトまたはワイドから試してみるのがおすすめです。

AFFINGER7では通常の記事画像にも、デフォルト・角丸・シャドウ・ワイド・枠線・ポラロイド風などのスタイルが用意されています。

画像の挿入やデザインについて詳しく知りたい方は、AFFINGER7の画像挿入方法も参考にしてください。

記事ごとにアイキャッチ画像の表示を変更する方法

AFFINGER7では、サイト全体で一括設定するだけでなく、記事ごとにアイキャッチ関連の設定を変更することもできます。

例えば、

• 通常記事ではアイキャッチを表示する
• 特定の記事だけ表示方法を変更する
• LPではアイキャッチを表示しない

といった使い分けができます。

投稿編集画面を開く

WordPress管理画面から、

投稿 → 投稿一覧

を開きます。

設定したい記事の編集画面を開いてください。

「アイキャッチ関連」を確認する

投稿編集画面にあるAFFINGERの設定から、アイキャッチ関連を確認します。

ここから、その記事だけアイキャッチ関連の設定を変更できます。

「基本的には全記事でアイキャッチを表示したいけれど、このページだけ表示方法を変えたい」

という場合に便利です。

AFFINGER7でアイキャッチ画像が表示されないときの確認ポイント

設定したにもかかわらず、アイキャッチ画像が表示されない場合があります。

その場合は、次の項目を順番に確認してみましょう。

1．アイキャッチ画像自体が設定されているか確認する

まず確認したいのが、投稿にアイキャッチ画像が登録されているかどうかです。

投稿編集画面を開き、アイキャッチ画像を確認してください。

画像が設定されていなければ、記事にも表示されません。

アイキャッチ画像を設定するところから確認したい方は、WordPressでアイキャッチ画像を設定する方法も参考にしてください。

2．AFFINGER管理のアイキャッチ設定を確認する

次に、AFFINGER管理 → 投稿・固定記事 → アイキャッチ設定を確認します。

サイト全体でアイキャッチ画像を表示する設定が有効になっているか確認しましょう。

設定を変更したあとに保存を忘れていないかもチェックしてください。

3．記事ごとの設定を確認する

「ほかの記事には表示されるのに、この記事だけ表示されない」という場合は、記事ごとの設定を確認します。

AFFINGER7では投稿単位でアイキャッチ関連の設定を変更できるため、個別の記事側の設定が原因になっている可能性があります。

4．「記事ごとのヘッダーデザイン」を確認する

特に注意したいのが、記事ごとのヘッダーデザインです。

AFFINGER7では、記事タイトルやアイキャッチ画像を利用して記事上部のヘッダーをデザインできます。

記事ごとのヘッダー設定によっては、通常のアイキャッチ画像表示とは異なる表示になる場合があります。

そのため、「AFFINGER管理ではアイキャッチを表示する設定なのに画像が出ない」という場合は、記事ごとのヘッダーデザインも確認してみてください。

5．キャッシュを確認する

設定を変更しても見た目が変わらない場合は、キャッシュが影響している可能性もあります。

その場合は、

• ブラウザキャッシュ
• キャッシュ系プラグイン
• サーバー側のキャッシュ

などを確認してから、もう一度記事を表示してみましょう。

AFFINGER7 EXのアイキャッチ関連機能

AFFINGER7には通常版とEX版があり、EX版では通常版より利用できる機能が増えています。

そのため、「解説画面にある設定項目が、自分のAFFINGER7には表示されていない」という場合は、通常版・EX版の違いも確認してみてください。

代替テキスト（alt）も適切に設定しよう

アイキャッチ画像を設定するときは、画像の代替テキストについても意識しておきましょう。

代替テキストは、単純に記事タイトルを入れるためだけの項目ではありません。

基本的には、画像が何を表しているのか、画像にはどのような役割があるのかがわかる内容を設定します。

例えば「AFFINGER7のアイキャッチ設定画面」のスクリーンショットなら、「AFFINGER7の投稿・固定記事にあるアイキャッチ設定画面」のように、画像内容が伝わる表現にするとわかりやすいでしょう。

AFFINGER7のアイキャッチ画像におすすめのサイズは？

アイキャッチ画像を作るときは、サイト内で画像サイズや縦横比を統一しておくことをおすすめします。

ブログの場合は、横長の画像が使いやすいです。

例えば、

1200×630px

などの横長サイズで統一しておく方法があります。

ただし、重要なのは特定の数値だけではありません。

• サイト内で縦横比を揃える
• デザインを統一する
• 文字を詰め込みすぎない
• スマートフォンでも文字が読める
• ファイル容量を必要以上に大きくしない

といったポイントも意識しましょう。

アイキャッチ画像のサイズやデザインが記事ごとにバラバラだと、記事一覧を表示したときにサイト全体の統一感がなくなってしまいます。

できるだけ同じテンプレート・同じ比率で作成するのがおすすめです。

Canvaならアイキャッチ画像を初心者でも作りやすい

「アイキャッチ画像を自分で作りたいけれど、デザインが苦手……」という方は、Canvaを使う方法もあります。

Canvaにはテンプレートが用意されているため、デザイン経験が少ない方でも比較的簡単にブログ用画像を作成できます。

最初にブログ用のデザインを1つ作っておけば、

テンプレートを複製
↓
画像を変更
↓
タイトル文字を変更

という流れでアイキャッチ画像を増やせます。

毎回ゼロから作る必要がなく、ブログ全体のデザインも統一しやすくなります。

Canvaを使った具体的な作成手順については、Canvaでアイキャッチ画像を作る方法で詳しく紹介しています。

AFFINGER7のアイキャッチ画像についてよくある質問

アイキャッチ画像は必ず設定した方がいい？

必須ではありませんが、ブログでは基本的に設定しておくのがおすすめです。

アイキャッチ画像を設定すると記事内容を視覚的に伝えやすくなり、記事一覧のデザインにも統一感を出しやすくなります。

アイキャッチ画像と記事一覧のサムネイルは同じですか？

元になる画像として投稿のアイキャッチ画像が利用されることがありますが、表示する場所やデザイン設定は別です。

「記事本文のアイキャッチは表示したいけれど、記事一覧のサムネイルデザインは変えたい」といった設定もできます。

全記事でアイキャッチ画像を表示できますか？

できます。

AFFINGER管理の、

投稿・固定記事 → アイキャッチ設定

から一括設定できます。

サイト全体で同じ表示方法にしたい場合は、一括設定しておくと便利です。

特定の記事だけ設定を変更できますか？

できます。

投稿編集画面にある、アイキャッチ関連から記事ごとの設定を変更できます。

通常の記事では表示して、特定ページだけ表示方法を変更するといった使い方ができます。

設定したのにアイキャッチ画像が表示されません

まずは次の順番で確認してみましょう。

1. 投稿にアイキャッチ画像が設定されているか
2. AFFINGER管理のアイキャッチ設定が有効になっているか
3. 記事ごとの設定が変更されていないか
4. 記事ごとのヘッダーデザインを利用していないか
5. キャッシュが残っていないか

特に「ほかの記事では表示されているのに、特定の記事だけ表示されない」という場合は、記事ごとの設定を確認してみましょう。

まとめ｜AFFINGER7ならアイキャッチ画像を簡単に自動表示できる

今回は、AFFINGER7でアイキャッチ画像を記事に自動表示する方法を紹介しました。

基本的な設定場所は、

AFFINGER管理 → 投稿・固定記事 → アイキャッチ設定

です。

サイト全体で設定しておけば、アイキャッチ画像を設定した記事に自動表示できるため、記事を作成するたびに表示方法を設定する手間を減らせます。

また、AFFINGER7では、

• アイキャッチ画像の一括設定
• 記事ごとのアイキャッチ設定
• 表示方法の変更
• 記事ごとのヘッダーデザイン
• 記事一覧のサムネイル設定

なども利用できます。

「設定したのにアイキャッチ画像が表示されない」という場合は、AFFINGER管理だけでなく、記事ごとの設定やヘッダーデザインも確認してみてください。

AFFINGER7を使い始めたばかりで、まだ基本設定が終わっていない方は、AFFINGER7の初期設定ガイドを参考に、最初に必要な設定を済ませておくとスムーズです。

また、AFFINGER7にはアイキャッチ以外にも、記事作成やデザイン、収益化に役立つさまざまな機能があります。

ほかの機能も順番に覚えたい方は、AFFINGER7の使い方まとめから気になる機能を確認してみてください。