こんな疑問にお答えします。
この記事ではヘッダーカードの表示方法だけでなく、デザインや表示カスタマイズ方法も合わせて画像付きで解説します。
記事後半ではヘッダーカード作りにピッタリな画像サイトもご紹介しますので、ぜひ最後までご覧くださいね。
\ SEOに優れたWordPressテーマ /
※ 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管理」→「ヘッダー下/おすすめ」をクリック。
2:デザイン欄にある任意の背景画像設定にチェックを入れて保存「Save」をクリックします。
ヘッダーカードの表示デザインは全部で4種類あります。
ヘッダーカードの表示デザイン
AFFINGER6ヘッダーカードのカスタマイズ方法 2スマホ閲覧時にヘッダーカードの高さを倍に表示させる
スマホ閲覧時のみ、ヘッダーカードの高さを倍に表示させることができます。
1:WordPress管理画面→「AFFINGER管理」→「ヘッダー下/おすすめ」をクリック。
2:デザインから「スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍に」にチェックを入れて「Save」をクリックすれば完了です。
AFFINGER6ヘッダーカードのカスタマイズ方法 3ヘッダーカードを「PCのみ」「スマホのみ」で表示させる方法
先ほど作成したヘッダーカードを「スマホだけ、もしくはパソコンだけで表示させたい!」といった場合は、以下の設定を行ってください。
1:WordPress管理画面→「AFFINGER管理」→「ヘッダー下/おすすめ」をクリック。
2:ヘッダーカード入力画面の下に「PCに表示しない」「スマホ・タブレットに表示しない」チェックがあります。
表示したくない方にチェックを入れて保存。両方とも表示したいならチェックを入れないままで構いません。
AFFINGER6ヘッダーカードのカスタマイズ方法 4ヘッダーカードをすべてのページに表示させる方法
ヘッダーカードをブログのトップページ以外にも表示させる方法について解説します。
1:WordPress管理画面→「AFFINGER管理」→「ヘッダー下/おすすめ」をクリック。
2:ヘッダーカードの項目から「サイト全体に表示する」にチェックを入れて「Save」をクリックすれば完成です。
AFFINGER6ヘッダーカードの画像作成に役立つ無料サイト
AFFINGER6でヘッダーカードを作成する時は、画像サイズを指定したりオシャレなフリー画像を用意することもあるでしょう。
そこで、ヘッダーカードを作成する際に役立つ編集サイトをご紹介します。
- PIXTA
日本最大級の画像素材サイト - Shutterstock
画像サイズ変更やプロレベルの編集が無料
アイキャッチを作る時は、見切れないように画像サイズを調整しましょう。
AFFINGER6に最適なアイキャッチサイズについてはAFFINGER6でアイキャッチ画像を表示させる方法で解説しています。
他にも、ブログで使えるオシャレなフリー画像についてはブログに使える!無料でオシャレなフリー画像サイト5選の記事をご覧ください。
ヘッダーカードを作成してブログ回遊率をアップさせよう!
ここまで、AFFINGER6でヘッダーカードを作成する方法とカスタマイズ方法について解説しました。
ヘッダーカードを設定しておくことで、見た目も華やかになりますし、興味を持ってもらいやすくなりますよ。
当ブログでは、他にもAFFINGER6の設定方法についてご紹介しています。
設定がまだの人は、早めにサクッと済ませてしまいましょう。
今回は以上です。最後までご覧いただきありがとうございました。