WordPress【affinger5】でアイキャッチのおすすめなサイズは？【最適なサイズのアイキャッチを作成】

悩む人

WordPressのアイキャッチ画像って，結局どのサイズが最適なのかが知りたいです。

そんな疑問に答えます。

ヒロシ

affinger5はデフォルトですと記事一覧のサムネイルが正方形になっていて，サムネイルに表示されるのは中央の部分のみで，画像にタイトルや見出しを入れている場合に左右が見切れてしまい、タイトルや見出しが綺麗に表示されいケースがあります。

そこで今回は，画像編集ツールの「Canva」を使ってこのサムネイルの部分を綺麗に中央の部分に表示させる方法も紹介していきます。

affinger5以外のテーマでもほぼ共通で使えるサイズを紹介していますので，他のテーマを使っている人も参考にしてもらえますので安心してください。

ヒロシ

それでは，順に解説していきます。

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

結論: affinger5のアイキャッチ画像のサイズもFacebookなどのSNSで推奨されている横1200ピクセルx縦630ピクセルでOKです。

人によっての好みがありますので，上記のどれかのサイズにしていればOKです。

当ブログでは，横640ピクセルx縦480ピクセルが1番しっくりきましたので，基本は横640ピクセルx縦480ピクセルにしています。

ヒロシ

そして，アイキャッチに指定するサイズよりも大きいサイズの画像を用意することが重要です。

元々の画像のサイズが小さい場合，指定したサイズに合わせようとした場合に画像が引き伸ばされてしまって見栄えが悪くなってしまうからです。

実際のブラウザの画面で表示されるアイキャッチの幅が知りたい人は，確認する方法を次に解説していきますので，必要ない人はスキップしてください。

ブラウザの画面で実際のブログの幅を確認する方法

ブログの幅にアイキャッチ画像のサイズを合わせる場合，実際に確認する方法は，ブラウザの画面で確認する必要があります。

実際にこの記事をプレビューして確認してみます。

ここで

を開きます。

またブラウザの画面で以下のショートコートでデベロッパーツールを開くことができます。

Mac: command+option+I
Windows: Ctrl+Shift+I

赤色で囲っている箇所をクリックします。

見出しの部分をクリックします。（この範囲の幅がブログの記事の幅になります。）

「computed」をクリックすると，画像が表示されます。

この真中に書いてある数字が，この見出しの幅（ここではブログの記事の幅は640）になります。

実際にブログの幅と同じ幅のアイキャッチ画像を作りたい場合は，ここの見出しの幅の数字とアイキャッチの幅の数字を同じにすればOKです。

サムネイルを正方形に合わせて綺麗に表示させるには？

affinger5の場合，デフォルトで記事一覧に表示されるサムネイルの幅が正方形になっていて，サムネイルに表示されるのは中央部分のみで，画像にタイトルや見出しを入れている場合に左右が見切れてしまい、うまく文字や画像が表示されなかったりします。

例: トップページのサムネイルの表示はこんな感じです。

タイトルの左右が見切れて，うまく表示できていません。

今回は，画像編集ツールの「Canva」を使って，正方形のサムネイルでもタイトルや見出しを中央に配置して，うまく表示させる方法を紹介します。

ヒロシ

「Canva」は，オンラインで使える無料のグラフィックデザインツールです。（有料プランもあります。）

Canvaをまだ登録していない人はこちらから登録できます。

アイキャッチに設定する画像は，無料ですとこのあたりがおすすめです。

Canvaで画像を作成する

ここからはCanvaへログインしている状態で解説していきます。

画面右上にある「デザインを作成」をクリックします。

「カスタムサイズ」をクリックします。

背景の透明度を調整できるようにするため，「背景」をクリックします。

色をクリックします。（ここでは黒色にしています。）

アイキャッチにする画像を選択します。

画像の端の丸い箇所にカーソルを合わせまがら外側に伸ばしていき（こうすることで画像の縦横比はそのままで調整できます。）色を付けた背景の枠に合わせていきます。

次に，テキストをアイキャッチの中心に寄せるために，四角い素材を使います。

正方形にカーソルを合わせながら背景の中心まで移動させます。（上の赤い線は例として書いていますが，実際には線が表示されてCanvaがアシストしてくれます。）

次にアイキャッチに表示するタイトルを入れます。

テキストの両端にカーソルを合わせながら正方形の端まで移動させます。

フォントの種類とフォントサイズを指定します。（ここではフォントファミリー: Noto Sans Black, フォントサイズ: 36）

文字のスペースを調整します。

テキストの枠の少し外にカーソルを合わせながら正方形の中心まで移動します。（Canvaがアシストしてくれます。）

エフェクトを設定する場合はここで調整しましょう。

この段階で正方形はいりませんで削除してOKです。

背景の透明度を設定する場合はここで調整しましょう。

あとは，作成したアイキャッチ画像をダウンロードして完了です。

作成した画像をアイキャッチに設定する

投稿の編集画面でアイキャッチ画像に設定して完了です。

投稿の編集画面で「アイキャッチ画像を設定」をクリックします。

またはドラッグ&ドロップでファイルをアップロードします。

画像を選択したら「アイキャッチ画像に設定」をクリックします。

プレビューで確認してみます。

アイキャッチ画像が反映されています。

トップページのサムネイルもタイトルが中央に寄っていているのが確認できます。

これで完了です。

まとめ

いかがでしたか？

今回はWordPress【affinger5】でアイキャッチのおすすめなサイズは？【最適なサイズのアイキャッチを作成】について解説しました。

という人に参考にしてもらえたら幸いです。

今回は以上になります。

それではまた！