【AFFINGER5】アイキャッチ画像のサイズはいくつがベスト？

こんな悩みを解決します！

アイキャッチ画像の適切サイズは悩みますよね....

自分も、調べるだけで3時間かかってしまいました。

私のように、悩む方が減ると良いなと思って書きました。ぜひ参考にしてください！

おススメのアイキャッチ画像サイズ

アイキャッチ画像のおすすめサイズは「横1200ピクセル×縦630ピクセル」です。

他のサイトでも、推奨されている比率です。AFFINGER5でも、そのまま適用できます。

「Google砲」というGoogle Chromeのオススメ記事として載るための条件のひとつでもあるため、1200ピクセル以上が最適なのです。

 

アイキャッチ画像が見切れる場合の対処法

上図のように、トップページに表示されるアイキャッチ画像が見切れてしまう問題を解決する方法をお伝えします！

せっかくなので、0からアイキャッチ画像作成の流れとともに解説しますね！

見切れる問題だけを解決したい人はコチラをクリック

使用するサイトはCanva（画像編集用）、Odan（画像収集用）です。

作成の手順は以下の通り。

1. 画像収集（Odan）
2. Canvaでサイズ設定←1200×630pxの画像を作成
3. 文字挿入←見切れる問題を解決
4. ダウンロード

画像収集

まず、無料画像が取得できるODAN(オーダン)というサイトに移動します。

ほしい画像に関連するキーワードを検索窓に入力。

画像を見つけたらダウンロードします。この際、サイズも選ぶことが可能です。

Canvaでサイズ設定

次にCanvaというサイトを活用し、画像を編集していきます。

まず、「デザインを作成」ー＞「画像を選択」をクリックし、画像を選択します。

画像がアップロードできたら

1. デザインに使用する
2. カスタムデザイン
3. 1200px×630pxに設定
4. 入力新しいデザインを作成

というように進みましょう。

以上で画像サイズの自動変更は終わりです。

これで全部無料なので、Canvaめちゃくちゃ便利ですよね♪

文字挿入

ここで見切れる問題に対処します！

まず、「素材」の中から正方形の図形を選択。

等倍のまま、正方形を拡大します。

正方形を少し透かしたり、色を変えてみたりして調節します。

タイトルを挿入すれば完成です！（正方形は消しても構いません。）

ダウンロード

あとはダウンロードするだけです。png形式がおススメです。

デフォルトがpngになっていると思うのでそのままで！

これで、見切れる問題は解決です！

記事トップにアイキャッチ画像を表示させる方法

トップページにアイキャッチ画像が表示されない

トップページにアイキャッチ画像を表示させると下図のようになります。

記事のトップページにアイキャッチ画像を表示させた方が、見栄えが良いです。

2つのパターンの設定方法を紹介します！

• 記事によってアイキャッチ画像表示を分ける方法
• 全てのページでアイキャッチ画像を表示する方法

記事によってアイキャッチ画像表示を分ける

記事ごとにアイキャッチ画像の表示を分けたい方は、毎回手動で設定しましょう！

記事の編集画面の右側で操作します。（ブロックエディタを使用）

設定の下の方にある「アイキャッチ関連」の「設定に関わらずアイキャッチ挿入」をクリックしてください。

これでアイキャッチ画像を挿入できます！

全てのページでアイキャッチ画像を表示

「AFFINGER5管理画面」に移動します。

「投稿・固定記事」ー＞「アイキャッチ設定」を選択

「アイキャッチ画像の表示を全ての記事で有効化する」に✔を入れる。

最後に一番下の「Save」をクリックすることを忘れずに！

ですがこのままだと、タイトルがアイキャッチ画像の下に来てしまいます。

タイトルをアイキャッチ画像の上に表示したい場合は、先ほどの設定と同様に、「アイキャッチ画像をタイトル下表示に変更する」に✔を入れてください。

これで、上側に表示させることができました。

まとめ

多少文字がはみ出ていても、記事を閲覧する上では問題ありません。

ですが、トップページなどで一覧表示された際に、アイキャッチ画像が切れていては見栄えが悪いです。

読者のサイト回遊率にも影響するので、適切なアイキャッチ画像を作成しましょう！