AFFINGER5でヘッダーカードを設定する方法

ネット上でブログを見ていると，おしゃれなヘッダーカードが設置されているのをよく見かけると思います。

悩む人

けど，こういったヘッダーカードってどうやって作るの？

そんな疑問に答えます。

ヒロシ

今回は，AFFINGER5でヘッダーカードを作る方法を紹介します。

ブログにヘッダーカードを設定していると，それだけでお洒落なデザインになりますし，ページの上部の目立つ位置に配置されるので，クリックされる確率が上がって，ブログの回遊率が上がるので，ヘッダーカードは設置することをおすすめします。

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

AFFINGER5でヘッダーカードの作り方

「AFFINGER5管理」の「おすすめ記事一覧」で設定する手順になります。

「AFFINGER5」をクリックします。

「おすすめ記事一覧」をクリックします。

最大4つまでのヘッダーカードが設定できますので，それぞれの画像のURL，テキスト，リンク先URLを入力してください。

画像のURL:

任意の画像のURLを指定します。

「メディアを追加」画面でアップロードします。

テキスト:

任意のテキストを指定します。

例: タイトル名

リンク先URL:

ヘッダーカードのリンク先になるURLを指定します。

リンク先に指定するURLは

あたりでOKです。

PCやスマホ・タブレットの画面でのそれぞれの表示・非表示

それぞれのページに表示させるかどうかは

のチェックボックスで設定します。（当ブログではチェックを入れていません。）

設定をしたら下のほうにある「save」をクリックして保存してください。

AFFINGER5でヘッダーカードのカスタマイズ

アフィンガーでヘッダーカードをカスタマイズする方法を解説していきます。

サイト全体に表示する

ヘッダーカードをTOPページ以外にも設定する場合は

のチェックボックスにチェックを入れます。

TOPページ以外で確認してみると

個別投稿記事のページでもヘッダーカードが表示されています。

デザイン

表示のパターンは

の3パターンです。

このうちのどれかにチェックを入れます。

それぞれの表示は以下の画像のようになります。

テキストのある背景をぼかす

テキストのある背景を暗くする

デフォルト

角丸にする

チェックを入れると，角が丸まった画像になります。

スマホ観閲時（959px以下）のおすすめヘッダーカードの高さを倍に

チェックを入れると，スマホ画面の場合にヘッダーカードの高さを倍にします。

以下の画像のようになります。

最後に忘れずに「保存」をクリックしてください。

AFFINGER5でヘッダーカードの最適なサイズは？

それぞれのヘッダーカードのサイズがバラバラだと，画像のまとまりが無くなってかっこ悪くなりますので，ヘッダーカードのサイズは統一したほうが良いです。

ヘッダーカードのサイズは基本1200ピクセルx630ピクセルでOKです。

ヒロシ

画像編集ツールのCanvaで1200ピクセルx630ピクセルの画像を作成してからヘッダーカードに設定するやり方がおすすめです。

まとめ

いかがでしたでしょうか?

今回の記事を大きくまとめると，

step
1AFFINGER5でヘッダーカードの作り方

step
2AFFINGER5でヘッダーカードのカスタマイズ

step
3AFFINGER5でヘッダーカードの最適なサイズは？

です。

以上になります。

それではまた！