AFFINGER6でヘッダーカードの作成＆カスタマイズ方法

AFFINGER6でヘッダーカードを設置する方法を教えてください。

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

この記事ではヘッダーカードの表示方法だけでなく、デザインや表示カスタマイズ方法も合わせて画像付きで解説します。

記事後半ではヘッダーカード作りにピッタリな画像サイトもご紹介しますので、ぜひ最後までご覧くださいね。

AFFINGER6(アフィンガー6)ヘッダーカードの設定方法

ではさっそくヘッダーカードを作成していきます。

１：WordPress管理画面→「AFFINGER管理」→「ヘッダー下/おすすめ」をクリック

２：ヘッダーカードの項目欄に設定したい枚数分の「画像」「テキスト」「リンク先URL」を入力して「Save」をクリックすると完成です。

最大4枚まで表示できます。

AFFINGER6ヘッダーカードのカスタマイズ方法 4つ

AFFINGER6ヘッダーカードのカスタマイズ方法を全部で4種類ご紹介します。

• ヘッダーカードの表示デザイン変更
• スマホ閲覧時にヘッダーカードの高さを倍に表示させる
• ヘッダーカードを「PCのみ」「スマホのみ」で表示させる方法
• ヘッダーカードをすべてのページに表示させる方法

1つずつ解説しますね。

AFFINGER6ヘッダーカードのカスタマイズ方法 １ヘッダーカードの表示デザイン変更

１：WordPress管理画面→「AFFINGER管理」→「ヘッダー下/おすすめ」をクリック。

２：デザイン欄にある任意の背景画像設定にチェックを入れて保存「Save」をクリックします。

ヘッダーカードの表示デザインは全部で4種類あります。

ヘッダーカードの表示デザイン

AFFINGER6ヘッダーカードのカスタマイズ方法 ２スマホ閲覧時にヘッダーカードの高さを倍に表示させる

スマホ閲覧時のみ、ヘッダーカードの高さを倍に表示させることができます。

１：WordPress管理画面→「AFFINGER管理」→「ヘッダー下/おすすめ」をクリック。

２：デザインから「スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に」にチェックを入れて「Save」をクリックすれば完了です。

AFFINGER6ヘッダーカードのカスタマイズ方法 ３ヘッダーカードを「PCのみ」「スマホのみ」で表示させる方法

先ほど作成したヘッダーカードを「スマホだけ、もしくはパソコンだけで表示させたい！」といった場合は、以下の設定を行ってください。

１：WordPress管理画面→「AFFINGER管理」→「ヘッダー下/おすすめ」をクリック。

２：ヘッダーカード入力画面の下に「PCに表示しない」「スマホ・タブレットに表示しない」チェックがあります。

表示したくない方にチェックを入れて保存。両方とも表示したいならチェックを入れないままで構いません。

AFFINGER6ヘッダーカードのカスタマイズ方法 ４ヘッダーカードをすべてのページに表示させる方法

ヘッダーカードをブログのトップページ以外にも表示させる方法について解説します。

１：WordPress管理画面→「AFFINGER管理」→「ヘッダー下/おすすめ」をクリック。

２：ヘッダーカードの項目から「サイト全体に表示する」にチェックを入れて「Save」をクリックすれば完成です。

AFFINGER6ヘッダーカードの画像作成に役立つ無料サイト

AFFINGER6でヘッダーカードを作成する時は、画像サイズを指定したりオシャレなフリー画像を用意することもあるでしょう。

そこで、ヘッダーカードを作成する際に役立つ編集サイトをご紹介します。

ヘッダーカードの画像作成に役立つ無料サイト

上記サイトは、普段のブログアイキャッチ作成などにも役立ちますよ。

その他のブログで使えるオシャレなフリー画像についてはブログに使える！無料でオシャレなフリー画像サイト5選の記事をご覧ください。

ヘッダーカードを作成してブログ回遊率をアップさせよう！

ここまで、AFFINGER6でヘッダーカードを作成する方法とカスタマイズ方法について解説しました。

ヘッダーカードを設定しておくことで、見た目も華やかになりますし、ブログの直帰率も抑えることができます。

当ブログでは、他にもAFFINGER6の設定方法についてご紹介しています。

まだ全ての設定がお済みでない方は、ぜひ関連記事もご覧くださいね。

関連記事【3ステップで簡単！】AFFINGER6でサイトマップを作成する方法と必要性を解説

関連記事AFFINGER6でスライドショーを設定する方法

今回は以上です。最後までご覧いただきありがとうございました。