AFFINGER6

AFFINGER6でアイキャッチ画像を表示させる方法【最適な画面サイズも紹介】

AFFINGER6でアイキャッチ画像を表示させる方法【最適な画面サイズも紹介】
AFFINGER6でアイキャッチを設定したいけど、見切れてしまって上手く表示できません。

こんな疑問にお答えします。

アイキャッチってどう設定するのが最適かイマイチわからないですよね。

この記事では、基本的なアイキャッチ画像の設定方法から、公式マニュアル載ってない最適なサイズまでわかりやすく解説します。

この記事に書いてあることを実践すれば、ユーザーにもSEOにも効果的なアイキャッチが簡単に作れますよ。

では本題に移りましょう。

\ ブロガー人気No.1 本格テーマ /

AFFINGER6の詳細を見る

※ 5,000円相当のプラグイン付き

AFFINGER6(アフィンガー6)でアイキャッチ画像を設定する方法

まずは基本のアイキャッチ画像を設定する方法について解説しますね。

1:アイキャッチを設定するためには、まず記事の作成画面を開きます。そして画面右側の「アイキャッチ画像を設定」をクリック。

2:アイキャッチとして設定したい画像を選び「アイキャッチ画像を設定」をクリックします。

AFFINGER6アイキャッチ画像設定手順

新しく画像を取り込む場合は、「ファイルをアップロード」から画像を取り込みましょう。

あとは記事を公開すれば完了です。

AFFINGER6(アフィンガー6)アイキャッチ画像の詳細設定

続いてアイキャッチ画像の基本デザインの設定方法を解説します。

人と違うアイキャッチ画像を表示させたい方は、以下を参考にされてください。

AFFINGER6(アフィンガー6)アイキャッチ画像の詳細設定 1アイキャッチ表示 3パターン

アイキャッチの表示方法は次の3パターンから選べます。

アイキャッチ画像:通常
アイキャッチ画像:ワイド化
アイキャッチ画像:ポラロイド風

変更する際は、以下の手順で設定します。

1:WordPress管理画面から「AFFINGER管理」→「投稿・固定記事」に進みます。

AFFINGER6管理→投稿・固定記事

2: アイキャッチ設定欄から好きなパターンを選ぶ

3:最後に「Save」ボタンをクリックしたら完了です。

AFFINGER6(アフィンガー6)アイキャッチ画像の詳細設定 2アイキャッチに説明文やURLを入れる方法

アイキャッチ画像にはURLやテキストを入れることもできます。

アイキャッチ画像にクレジット表示を追加した画像
説明文を入れれば、より写真の内容を理解しやすくなりますね!

設定手順は次のとおりです。

1:WordPress管理画面から「AFFINGER管理」→「投稿・固定記事」へ進みます。

AFFINGER6管理→投稿・固定記事

2:アイキャッチ設定欄の「アイキャッチのキャプションをクレジットとして写真上に表示する」をクリック。

3:最後に「Save」をクリックして完了。

( 補足 )

実際にアイキャッチ画像へURLやテキストを入力するには、記事作成画面の右下にある「アイキャッチ関連」から入力します。

AFFINGER6(アフィンガー6)アイキャッチ画像の詳細設定 3アイキャッチをワイドに表示させる方法

アイキャッチをワイドに表示させると、タイトル後ろに画像が表示され、画像の中心部分がワイド+暗くなります。

アイキャッチ画像のワイド表示

設定手順は次のとおり。

1:WordPress管理画面から「AFFINGER管理」→「投稿・固定記事」へ進む。

AFFINGER6管理→投稿・固定記事

2:その他の欄にある「「記事ごとのヘッダーデザイン」一括設定」にチェックを入れる。

3:最後に「Save」をクリックすれば完成です。

AFFINGER6(アフィンガー6)アイキャッチ画像の詳細設定 4アイキャッチ画像がない時のサムネイル画像設定

もしアイキャッチ画像が設定されていなかったり、誤って削除して消えてしまった場合など、初期設定ではこのように表示されます。

アイキャッチ画像が消えた場合の初期表示

このままだと、少し寂しい印象がありますよね。

しかしアイキャッチ画像がない時のサムネイル画像設定を設定しておくと、こんな風に表示されます。

サムネイル設定後

アイキャッチ画像がない時の、代わりの画像のことを「サムネイル画像」と呼びます。

SNSでシェアされた時など、アイキャッチがない時の応急処置にもなりますよ。

では、設定方法を解説しますね。

1:WordPress管理画面から「AFFINGER管理」→「AFFINGER管理」→「全体設定」をクリック。

AFFINGER6管理→全体設定

2:「サムネイル画像設定」欄の「アップロード」ボタンをクリックして、サムネイルとして設定したい画像を選びましょう。

3:最後は「Save」ボタンを押せば完了です。

AFFINGER6(アフィンガー6)でアイキャッチ画像が表示されない場合の対処法

設定したにも関わらず、アイキャッチ画像が表示されない場合は以下の設定を確認してみてください。

AFFINGER6(アフィンガー6)の初期設定を確認

アイキャッチ画像が表示されない時は、AFFINGER6の初期設定で非表示設定になっているかもしれません。

次の手順で設定内容を確認してみましょう。

1:WordPress管理画面から「AFFINGER管理」→「投稿・固定記事」へ進む。

AFFINGER6管理→投稿・固定記事

3:アイキャッチ設定欄の「アイキャッチ画像の表示を全ての記事で有効化する(デフォルトは上部)」にチェック。デザインの好みで「アイキャッチ画像をタイトル下表示に変更する」にもチェックを入れる。

4「Save」をクリック。

これでアイキャッチ画像が表示されるようになります。

魅力的なアイキャッチ画像を作る 4つのコツ

以下では魅力的なアイキャッチを作るコツについてご紹介しますね。

パッと目を惹くオシャレなアイキャッチを作りたい方はぜひご覧ください。

魅力的なアイキャッチ画像を作るコツ 1アイキャッチ画像におすすめのサイズは?

アイキャッチ画像の横幅は1,200px以上で設定しましょう

なぜなら「Google砲」と言われ、Google Chromeのおすすめ記事に掲載される条件の1つとして画像サイズが公表されているから。

サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。

Google公式サイト(Google Discover)

Google Discoverは通称「Google砲」と呼ばれています。

実際のGoogle Chromeのおすすめ記事

分かりやすくお伝えすると、Google砲を受けることにより記事がバズり、通常の10倍以上のPV数を獲得できると言われています。

そしてTwitterやFacebookで推奨されている画像サイズ比率の1.91:1になるよう考慮すると、縦は630pxがおすすめです。

画像が小さすぎると、画面サイズに合わせて引き伸ばされたり、低画質になったりするので注意しましょう。

横幅が1200pxで縦幅が630pxとなるようアイキャッチ画像を設定すれば、GoogleにもSNSにも対応するサイズのアイキャッチを作ることができますよ。

魅力的なアイキャッチ画像を作るコツ 2フリー画像は商標利用できるものを使う

アイキャッチにフリー素材を使用する場合は、商用利用できるものを選びましょう。

フリー素材の中には、アフィリエイトブログで利用できないものもあります

もし無断で利用してしまうと、知らぬ間に規約違反をしてしまうことも。

無料で商用できるオシャレなフリード素材を知りたい方はブログに使える!無料でオシャレなフリー画像サイト5選をご覧ください。

魅力的なアイキャッチ画像を作るコツ 3正方形を意識して画像を作る

アイキャッチを作る時は、文字やメインとなる装飾を画像中心部の正方形に収めるように作りましょう。

サイドバーやブログカードなどで、アイキャッチで伝えたいことが見切れてしまう心配もありません。

このように、ブログカードでも見切れる心配がありません

デザインを工夫することで、肝心なアイキャッチが見切れず、キレイに表示されるようになりますよ。

魅力的なアイキャッチ画像を作るコツ 4画像編集は無料で使えるShutterstockがおすすめ!

アイキャッチ画像の作り方を理解できたら、次はより魅力的なアイキャッチを作ってみましょう。

フリー素材をそのまま使うより、画像を編集してオリジナルアイキャッチ画像を作成することは、Google検索結果で上位表示をするためにも重要です。

なぜならGoogleの検索品質評価ガイドラインでは、独自性の高い記事であることが評価基準だからです。

記事の質だけでなく画像に関しても、フリー画像をそのまま引用しているだけで良い結果はでません。

無料でアイキャッチを自作したい方は、プロ仕様の画像編集もできるShutterstockがおすすめです。

使い方もカンタンで画像サイズも自由に調整できますよ。

 

AFFINGER6で魅力的なアイキャッチを設定しよう!

以上、AFFINGER6でアイキャッチ画像を設定する方法と魅力的なアイキャッチ画像に仕上げる方法を解説しました。

魅力的なアイキャッチを作って、よりブログをパワーアップさせましょう!


他にもAFFINGER6の設定がまだの方は、以下記事も参考にされてください。

今回は以上です。

最後までご覧いただきありがとうございました。

-AFFINGER6