AFFINGER5 ヘッダーカードの設定方法＆最適な画像サイズ

悩む人

「AFFINGER5（アフィンガー5）」で画像に文字が入ってるカード？ってどうやって表示するんだろう」
「ヘッダーカードに最適な画像サイズってどれくらいかな？」

こんな悩みに答えます。

本記事では、ヘッダーカードの設定方法、ヘッダーカードに最適な画像サイズを解説します。

レイ

ヘッダーカード用の画像をどこから見つけるのか
ここについても補足いたします

AFFINGER5 ヘッダーカードの設定方法

まず、AFFINGER5（アフィンガー5）でヘッダーカードを設定する方法を解説します。

AFFINGER5 管理⇒おすすめ記事一覧⇒おすすめヘッダーカードに設定します。

アップロードボタンから画像を選び、表示したいテキスト、リンク先URLを入力します。

AFFINGER5 - ヘッダーカード

リンク先URLは個別記事・固定ページ・カテゴリ等自由に設定が可能です。

やり方は簡単で、カテゴリならカテゴリページにアクセスして、ブラウザのアドレスバーからURLをコピペするだけです。

AFFINGER5 - リンク先URL

背景画像をぼかす・暗くする・角丸にする

テキストが入っている背景画像をぼかしたり、暗くするにはデザインの設定を変更します。

AFFINGER5 - ヘッダーカードのデザイン

レイ

設定したら保存ボタンを忘れずに押してください。
ヘッダーカードは最大4つまで設定可能です。

AFFINGER5 ヘッダーカードに最適な画像サイズ

ヘッダーカードを設定したのはいいけど、サイズ感があっていない場合は、上下が切れてしまいバランスが悪い感じになりますよね。

結論、サイズは1200x630にしましょう。

このサイズでなくとも、アスペクト比を1:1.91くらいにトリミング・サイズ変更すればOKです。

以下はCanvaで加工して、ずれを修正した例です。

AFFINGER5 - ヘッダーカード調整

レイ

トリミング・サイズ変更はCanvaなどの無料加工サービスを利用すればOKです

AFFINGER5 ヘッダーカード用の無料画像サイト3選

おしゃれなヘッダーカードを設定したいけど、有料画像は嫌という方は無料サイトで探してみましょう。

おすすめの無料画像サイトは以下です。

無料画像サイト3選

・Pixabay
・Unsplash
・ぱくたそ

画像を一度に、複数サイトから検索したい場合は「o-dan」というサイトも便利です。

レイ

どれも商用利用無料で、キレイなものばかりですよ

まとめ：ヘッダーカードを設定して回遊率を上げよう

ヘッダーカードを設定すると、一番はじめに目につく場所なので、どの記事やカテゴリがオススメなのかわかりやすいですよね。

こうすると読者の回遊率もあがり、回遊率があがるとGoogleの評価もあがるため、お得ですね。

関連記事AFFINGER5を使ってみた感想レビュー【他テーマとも比較】
関連記事ココナラでアイコンを作成する流れを徹底解説【依頼内容の実例つき】