PR AFFINGER6

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

AFFINGER6でヘッダーカードの作成&カスタマイズ方法
AFFINGER6でヘッダーカードを設置する方法を教えてください。

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

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

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

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

AFFINGER6の詳細を見る

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

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

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

ヘッダーカードの完成図

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

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

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

画像サイズはGoogleにもSNSにも対応する1200×630pxがおすすめです。

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

デザイン

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

1つずつ解説しますね。

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

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

AFFINGER管理→ヘッダー下/おすすめ

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

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

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

デフォルト
ぼかす
暗くする
角丸にする

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

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

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

AFFINGER管理→ヘッダー下/おすすめ


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

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

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

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

AFFINGER管理→ヘッダー下/おすすめ

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

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

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

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

ブログ記事上部にヘッダーカードを表示させることも可能

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

AFFINGER管理→ヘッダー下/おすすめ

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

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

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

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

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

PIXTA(日本最大級の画像素材サイト)
Shutterstock(画像サイズ変更やプロレベルの編集が無料)

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

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

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

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

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

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

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

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

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

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

-AFFINGER6