アフィンガー ワードプレステーマ

【アフィンガー6】アイキャッチ画像のベストなサイズは?アイキャッチ画像の設定を解説!

今回はブログのアイキャッチ画像について、解説します。

解説する私ですが、今回は私自身もアイキャッチ画像のことをあまり知っておらず、アイキャッチ画像のことについて学んでみてこちらの記事にアウトプットしました。

ブログを継続することで色々な知識を学んでアウトプットすることもできるので、ブログ運営は楽しいです。

それでは、アイキャッチ画像について解説していきます!

アフィンガーについて

アフィンガーは洗練されたブログデザインのワードプレステーマです。
色々なテイストのデザインを作成することができます。
また、記事を制作するにあたって豊富な装飾パーツがあり、簡単に実装できます。

SEO(検索エンジン最適化)の設定も豊富で、ブログの収益化のプラスに働きます。

アフィンガーのテーマについて詳しく知りたい方は下記の詳細ページをご覧ください。

アフィンガーテーマについての詳細、販売ページはこちらから>>

記事の対象の方について

こちらの記事はアフィンガー6をインストールし、初期設定を終えてブログを始める段階の方の対象を想定としています。

アフィンガーの初期設定は別記事にて解説していますので、よろしければこちらをお先にご覧ください。

アイキャッチ画像って何?

アイキャッチ画像というワードを知らないという方もいらっしゃるかと思います。

アイキャッチ画像とは記事のタイトルや内容を画像、イラストで表現した画像のことで、記事に興味を持ってもらえるように作成した画像のことです。

この「おかろぐ」でいえば、トップページにある画像になります。

アイキャッチ画像を見て記事に興味を持ってくれます。テキストだけというのは、見栄え的にも寂しいので、アイキャッチ画像は、作成することをオススメします。

【アフィンガー6】アイキャッチ画像のベストなサイズは?

結論から言うと、アイキャッチ画像のベストサイズはありません。(笑)

アフィンガーブログでは自由なサイズでアイキャッチを作っても特に問題はないです。

問題なのは、ブログ記事をSNS等で広める場合のアイキャッチ画像のサイズです。

下の表は3つのSNSでのアイキャッチ画像サイズです。

TwitterFacebookInstagram
1.91:11.91:11:1(正方形)

TwitterとFacebookは同じ1.91対1サイズの画像ですが、Instagramは1対1と正方形になるので、同じようなサイズでサムネイルが表示されないのです。

アフィンガー6のアイキャッチ画像を1200pxx630pxで作成してみる

先ほど解説した通り、アイキャッチ画像に特にベストサイズというものはないのですが、SNSでもきっちりみせたければ、TwitterとFacebookが同じ画像サイズなので、1200pxx630pxの大きさで作成するのが一つの答えになりかもしれません。

Instagramでも使いたければ、大事な要素は真ん中あたりにレイアウトする

Instagramでもブログを宣伝したい場合に、アイキャッチを作成する場合はちょっと注意が必要です。上記、表の通り、Instagramのサイズは1:1すなわち正方形のサイズになります。

ですので、3つのSNS全てでアイキャッチ画像を綺麗に見せたい場合は下記画像のように、真ん中の正方形部分(630px x 630px)にブログ記事で伝えたい要素(テキストや画像、イラスト等)をレイアウトするしかありません。

見た目にはいわゆるシンメトリー的な画像になります。

両脇が空く形になるので、ベタ塗りだとちょっと寂しいかもしれません。

なので、背景画像を装飾するなどして工夫すると良いでしょう。

私の場合ですが、FacebookとInstagramはやってません。。。
SNSはTwitterのみになります。

なので、1200px x 630px の画像内の大きさで自由に作成すればよいだけですが、現在の私のアイキャッチ画像は4:3比で作成しています(がーん。)

ということで、現在Twitterにツイートしているアイキャッチ画像ですが。。下に画像を表示したのですが、おもいっきりズレまくりですね(笑)

しかしながら、twitterはテキストの呟きですので、いちおう、ブログのタイトルが書いてあれば理解できると思います(汗&いいわけ)

正直言いますと、アイキャッチ画像のサイズはそこまで気にして作成していませんでした。。。

これからはきちんとしたサイズで作成します(反省)

アフィンガー6のアイキャッチ画像の表示方法

アフィンガー6でのアイキャッチ画像の表示を行ってみましょう。

ダッシュボードメニューの「投稿」→「投稿一覧」からアイキャッチ画像を表示させる記事を選択しましょう。

記事編集画面の右側に設定メニューがあります。
その中に「アイキャッチ画像」という項目があるので、クリックしましょう。

設定メニューが表示されていない場合は画面右上部にある歯車のアイコンをクリックしてください。
クリックすると設定メニューが表示されます。

設定メニューのアイキャッチ画像の項目をクリックすると、「アイキャッチ画像を設定」という項目が表示されます。

この「アイキャッチ画像を設定」という部分(グレーの背景部分)をクリックすると、ファイルをアップロードするかもしくはメディアライライブラリからアイキャッチ画像を選択するかでアイキャッチ画像を設定できるので、アイキャッチ画像を準備して画像を選択しましょう。

今回はメディアライブラリにアイキャッチ画像をアップロードしたファイルを選択します。

メディアライブラリに画像をアップするには

ライブラリに画像をアップロードするには、ダッシュボードメニューの「メディア」→「新規追加」を選択してください。

新規追加のページから追加したい画像をそのままページ内にドラッグして追加もしくは「ファイルを選択」ボタンから画像を選択することで、メディアライブラリに画像を追加することができます。

右下にある「アイキャッチ画像を設定」をクリックして画像登録しましょう。

アイキャッチ画像の項目に選択したアイキャッチ画像が表示されます。

「更新」ボタンをクリックしてブログに反映します。

トップページの記事一覧の部分にアイキャッチ画像が表示されるので、表示されているか、確認します。

アイキャッチ画像を完全なサイズで表示しよう

トップページの記事一覧にアイキャッチ画像が表示されましたが、ちょっと違和感があることに気づきましたでしょうか。

はい、アイキャッチ画像が一部しか表示されていません。

これは、アフィンガーの初期設定の状態だとアイキャッチ画像の比率が1:1すなわち、正方形サイズのため、正方形サイズで作成していないアイキャッチ画像は一部分(中心から正方形のサイズの部分)しか表示されない状態となります。

アイキャッチ画像を完全に表示させる設定の方法

アイキャッチ画像を完全に表示させるには設定の変更が必要です。

ダッシュボードメニューの「AFFINGER設定」→「AFFINGER設定」をクリック

次に「全体設定」をくりっくします。

「サムネイル画像設定」という項目があります。

初期設定では「正方形にする」が選択されているので、「フルサイズにする」を選択して変更します。

「Save」ボタンをクリックして保存します。

ブログのトップページにある記事一覧の部分にあるサムネイルの表示が作成した画像の比率に変更されました。

ただ、標準設定ではサムネイルのサイズが少し小さい感じがするので、大きめの表示に変更します。

先程と同じようにダッシュボードメニューの「AFFINGER設定」→「AFFINGER設定」→「全体設定」をクリックして、サムネイル画像設定から「PC(960px以上)のサムネイル画像を大きくする」にチェックを入れます。

「Save」ボタンをクリックして保存します。

再度ブログのトップページの記事一覧を確認すると、サムネイルが大きく表示変更されています。

スマホでもサムネイルを拡大して表示してみましょう。

再度、ダッシュボードメニューの「AFFINGER設定」→「AFFINGER設定」→「全体設定」をクリック、サムネイル画像設定から「スマホ(599px以下)でもサムネイル画像を大きくする」にチェックを入れます。

「Save」ボタンをクリックして保存します。

スマホ画面でブログトップページを確認すると、設定前のサムネイル画像より一回り大きくサムネイル画像が表示されています。

サムネイル画像は閲覧している方に記事に関心を持ってもらえるようできるだけ大きく表示することをオススメいたします。

まとめ

今回はサムネイル画像の設定及びサムネイル画像のベストなサイズについて記事を書きました。

自分自身も特に意識せずサムネイル画像を作成しましたが、今回、サムネイル画像のことについて色々と調べてみて勉強になりました。

上記でも解説した通り、SNS等でサムネイル画像を活用したければ、サイズを意識して作成する方が良いかと思いますが、自分のビジョンに合わせて自由に作成するのもありだとも思います。

またブログを運営していく上で知識を学べることで、ブログを継続していてよかったなあとも感じております。

楽しいブログ運営を行っていきましょう!

ご長文読んでいただきありがとうございました!

アフィンガーについて

アフィンガーは洗練されたブログデザインのワードプレステーマです。
色々なテイストのデザインを作成することができます。
また、記事を制作するにあたって豊富な装飾パーツがあり、簡単に実装できます。

SEO(検索エンジン最適化)の設定も豊富で、ブログの収益化のプラスに働きます。

アフィンガーのテーマについて詳しく知りたい方は下記の詳細ページをご覧ください。

アフィンガーテーマについての詳細、販売ページはこちらから>>

スポンサーリンク

-アフィンガー, ワードプレステーマ