AFFINGER

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

WING(AFFINGER5)_アイキャッチ
悩む人
「AFFINGER5(アフィンガー5)」で画像に文字が入ってるカード?ってどうやって表示するんだろう」
「ヘッダーカードに最適な画像サイズってどれくらいかな?」

こんな悩みに答えます。

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

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

この記事で分かること

  • AFFINGER5 ヘッダーカードの設定方法
  • AFFINGER5 ヘッダーカードに最適な画像サイズ
  • AFFINGER5 ヘッダーカード用の無料画像サイト3選

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

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

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

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

AFFINGER5_ヘッダーカード_設定

AFFINGER5 - ヘッダーカード

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

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

AFFINGER5_リンク先URL

AFFINGER5 - リンク先URL

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

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

AFFINGER5_ヘッダーカード_デザイン

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

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

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

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

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

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

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

AFFINGER5_ヘッダーカード調整

AFFINGER5 - ヘッダーカード調整

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

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

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

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

無料画像サイト3選

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

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

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

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

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

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

-AFFINGER
-

© 2021 ReiCodeBlog