「AFFINGERでアイキャッチ画像を記事に自動挿入するにはどうすればいいですか？」
読者の目（Eye）をひきつける（Catch）ための画像である「アイキャッチ（Eye Catch）画像」。
記事の第一印象になる存在なので、非常に重要かつ悩みを持っている人も多いのではないでしょうか。
本記事では、AFFINGERのアイキャッチ画像に関するお悩みを解決します。
- AFFINGERのアイキャッチ画像で最適なサイズはいくつ？
- AFFINGERのアイキャッチ画像を設定する方法
- AFFINGERで記事上部にアイキャッチ画像を自動挿入する方法
- アイキャッチ画像の作成に役立つWebサイト・ツール
上記の記事内容でお伝えしていきます。
実際に使用しているからこそ、AFFINGERのアイキャッチ画像について悩みました。
しかし、現在では「アイキャッチ画像」に関する悩みはなく、記事の執筆に専念できています。
それでは、解説していきます。
目次
AFFINGERのアイキャッチ画像で最適なサイズはいくつ？
それでは、AFFINGERのアイキャッチ画像で最適なサイズはいくつなのでしょうか。
そもそもAFFINGERは、レスポンシブデザインでさまざまなレイアウトに対応しているテーマです。
そのため、原則として「最適なアイキャッチ画像のサイズ」はありません。
おすすめのアイキャッチ画像サイズをご紹介するまえに、「どこを意識してサイズを決めるべきか」について説明します。
ズバリ、アイキャッチ画像が使用されるサービスのアスペクト比を意識して決定するべきです。
| サービス名 | アスペクト比 |
| スマートフォンの写真 | 16：9 |
| YouTube | |
| 1.91:1 | |
| Twitterカードサイズ（大） | |
| Twitterカードサイズ（小） | 1：1 |
細かい説明は省きますが、「Twitterカードサイズ（小）」の正方形（1：1）は意識するべきではありません。
意識すべきは、「16：9」または「1.91：1」のアスペクト比です。
| アスペクト比 | 画像サイズ |
| 16：9 | 1200px × 675px |
| 1024px × 576px | |
| 768px × 432px | |
| 1.91：1 | 1200px × 630px |
| 600px × 315px |
16：9なら「1200px × 675px」、1.91：1なら「1200px × 630px」がおすすめです。
「1200px × 675px」と「1200px × 630px」は、読者に少しでもキレイな画像を見せるために、多くのサイトで採用されているアイキャッチ画像サイズです。
また、Googleは「Discoverとウェブサイト」にて横幅を1,200px以上にすることを推奨しています。以下、一部抜粋です。
魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。サイトのロゴを画像として使用しないでください。
Google Discoverに掲載されると、多くのアクセスを得られるので、十分に狙う価値はあります。
- 「1200px × 675px」（16：9）
- 「1200px × 630px」（1.91：1）
どちらを選んでも基本的に問題ありません。
特徴を挙げるとすると、「1200px × 675px」は縦に長いので記事中で見たときに印象に残りやすいです。
また、「1200px × 630px」はFacebookやTwitterでシェアされるときにキレイに表示されます。
それぞれの特徴からご自身で判断して選んでみてはいかがでしょうか。
AFFINGERでアイキャッチ画像を設定する手順【画像付き】
AFFINGERでアイキャッチ画像を設定する方法についてご紹介します。
- 「投稿」や「固定ページ」から「新規追加」をクリック
- 「アイキャッチ画像を設定」をクリック
- アップロードした画像の中から、アイキャッチ画像を選ぶ
- 右下にある「アイキャッチ画像を設定」をクリック
まず、「投稿」や「固定ページ」から「新規追加」をクリックし、記事の作成ページに移動しましょう。
文章を入力する欄の右側にあるメニューから「アイキャッチ画像を設定」をクリックしてください。
右側にある「アイキャッチ画像を設定」をクリックする
「アイキャッチ画像を設定」をクリックすると、下記のように画像を選択する画面に移ります。
アップロードした画像が並ぶ
アップロードした画像（メディア）が並びますので、アイキャッチ画像に設定したい画像を選びましょう。選んだ画像の右上にはチェックマークが表示されます。
アイキャッチ画像を選んだら、右下にある「アイキャッチ画像を設定」をクリックすれば設定完了です。
以上の手順で、記事一覧やスライドショーで設定したアイキャッチ画像が使用されます。
しかし、これだけでは記事上部にアイキャッチ画像は表示されません。
記事上部にアイキャッチ画像が自動挿入されるように設定する必要があります。
AFFINGERで記事上部にアイキャッチ画像を自動挿入する手順【画像付き】
AFFINGERで記事上部にアイキャッチ画像を自動挿入する手順は次のとおり。
- WordPress管理画面>「AFFINGER 管理」をクリック
- 「投稿・固定記事」をクリック
- 「アイキャッチ画像の表示を全ての記事で有効化する（デフォルトは上部）」にチェックを入れる
- 「アイキャッチ画像をタイトル下表示に変更する」にチェックを入れる
- 「Save」をクリック
まず、WordPress管理画面から「AFFINGER 管理」をクリックしてください。AFFINGERに関する設定項目がいくつも表示されます。
設定項目の中から「投稿・固定記事」をクリックしましょう。この設定項目では、記事に関する設定ができます。
「投稿・固定記事」をクリックして、下にスクロールすると、アイキャッチ画像を設定できる画面が表示されます。
上記画像のとおり、「アイキャッチ画像の表示を全ての記事で有効化する（デフォルトは上部）」と「アイキャッチ画像をタイトル下表示に変更する」にチェックを入れてください。
あとは、最下部にある「Save」をクリックすれば設定完了です。
記事の上部にアイキャッチ画像が自動挿入されていることを確認しましょう。
古いキャッシュをパージ（削除）して、もう一度アイキャッチ画像が自動挿入されていることを確認してください。
アイキャッチ画像の作成に役立つWebサイト・ツール
最後に、アイキャッチ画像の作成に役立つWebサイト・ツールをご紹介します。
Canva（キャンバ）
Canva（キャンバ）とは、オーストラリアの企業が提供しているインストール不要の画像編集ツールです。
無料で使用できるのに、フリー画像の種類やフォントの種類は豊富で、自由度の高い編集ができるのが魅力的です。
さらに、プレミアム機能を使用すれば、高品質なデザインのテンプレートを選べたり、高画質で画像を保存できたりします。
無料で十分に使用できるので、わざわざプレミアム機能を利用しなくても問題はありません。
時短や画像のクオリティを上げたい人だけプレミアム機能の利用をおすすめします。
O-DAN（オーダン）
O-DAN（オーダン）とは、著作権フリーの画像サイトを集約していて、まとめて画像検索できるWebサイトです。
開発者は日本人の方で、「ねこせんべい（＠nekosenbei）さん」です。
フリー画像サイトを1つ1つ探し回る必要がなくなるので、アイキャッチ画像作成の時短につながります。
- Unsplash
- Pixabay
- Pexels
- StockSnap
有名なフリー画像サイトなので知っている人も多いのではないでしょうか。
O-DANは商用利用や画像加工、クレジットの表記が不要の画像を集めるのに重宝します。
アイキャッチ画像作成に活用してみてはいかがでしょうか。