本日は、こんな悩みに答えます
記事の内容
- ヘッダーカードはサイトの離脱防止に有効
- AFFINGER5（アフィンガー5）のヘッダーカード設定方法
- ヘッダーカードのさらに細かい設定を解説
✔本記事を書いた人
ucozi（@ucozi_ikeda）
今回も、WordPressの有料テーマ「AFFINGER5（アフィンガー５）」を使ったデザイン済みデータの設定方法についての解説です。
AFFINGER5（アフィンガー5）ってナニ？という方や、デザイン済みデータのインストール方法について知りたい方は、こちらの記事からご覧ください。
AFFINGER5（アフィンガー５）なら「ヘッダカード」を最大４つまで、しかも簡単に設定できます。
それでは、さっそく設定を行っていきましょう。
ヘッダーカードはサイトの離脱防止に有効
ヘッダーカードを説明するには見てもらった方が早いでしょう。
下記の画像のような内部リンクのことを指します。
ヘッダーカードは通常、ヘッダー画像の下に位置しますのでとても目立ちます。
なのでヘッダーカードは、見てもらいたいページに誘導するのに便利です。
また、ページから離脱してしまうのを防ぎ、訪れた読者をサイトに長く滞在してもらうのにも有効です。
サイトの滞在時間が長いと、Googleからよいコンテンツを提供しているサイトと判断してもらえるので長くたくさん見てもらうことはブログ運営をするうえでとても大事です。
AFFINGER5（アフィンガー5）ではこのヘッダーカードの設定を簡単に行うことが可能。
最大で4つまで設定できます。
画像さえ用意してしまえば、ものの5分程度で設定できてしまうので、ぜひチャレンジしてみてください。
AFFINGER5（アフィンガー5）のヘッダーカード設定方法
AFFINGER5（アフィンガー5）でヘッダーカードを設定方法は、以下の2ステップです
- ヘッダーカード用の画像を用意
- AFFINGER5管理にて設定
画像さえ準備できてしまえばカンタンです。
では、順番に解説します。
ヘッダーカード用の画像を用意
まずは画像を選びましょう。
ヘッダーカードは最大で4つまで設定できるので、4枚の画像を準備します。
使用する画像は必ず著作権をクリアしたものを使う
ブログで画像を使用する際は、必ず著作権をクリアしたものを利用するようにしてください。
つまりは、ご自身で撮影した写真を使うか、以下の記事で紹介するようなサイトから入手するようにしましょう。
画像のサイズは1200×700ピクセルを推奨
画像サイズは「1200×700」ピクセルで用意することをおすすめします。
PC閲覧時は「700」ピクセルも高さは必要ありませんが、後ほど解説する「スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に」という設定にチェックをした場合に必要になります。
AFFINGER5管理にて設定
画像が用意できたら、あとは設定だけです。
WordPressの管理画面にログインしましょう。
左側のメニューより「AFFINGER5管理」→「AFFINGER5管理」へと進みます。
続いて「おすすめ記事一覧」をクリックします。
下にスクロールすると「おすすめのヘッダーカード」の設定項目があります。
以下の３つの項目を埋めていきます。
- ヘッダーカード：画像のURL
- ヘッダーカード：テキスト
- ヘッダーカード：リンク先URL
ヘッダーカード：画像のURL
ヘッダーカードに表示する画像を設定します。
「アップロード」ボタンを押して画像をドラッグ＆ドロップするか、「ファイルを選択」から選びましょう。
画像を選択するとURLが自動で入力されます。
ポイント
デザイン済みデータの場合、デフォルトでグレーの正方形の画像が指定されていますが、上書きしてOKです。
ヘッダーカード：テキスト
ヘッダーカードの上に表示させるテキストを入力します。
ここにテキストを入力すると画像の高さが小さくなって表示されます。
テキストを空欄のままにしてもOKです。
※テキストを入力した場合
※テキストを空欄にした場合
ヘッダーカード：リンク先URL
ヘッダーカードをクリックした際のリンク先を設定します。
カテゴリーページか読んで欲しい個別記事のURLを入力します。
3つの設定が終わったら「save」ボタンを押して完成です。
ヘッダーカードのさらに細かい設定を解説
基本は先に紹介した3つを設定すれば問題ありません。
ただ、AFFINGER5（アフィンガー5）はさらに細かく設定できますので、ここではそれぞれの設定について解説します。
ヘッダーカード：PC・モバイルの表示
- PCで閲覧したときに表示させたくない
- スマホ・タブレッドで閲覧したときに表示させたくない
を希望する場合はチェックを入れます。
PC、スマホ・タブレッドどちらも表示させる場合は空白のままでOKです。
ヘッダーカードをサイト全体に表示
ヘッダーカードは、デフォルト設定ではトップページのみに表示されるようになっています。
個別のページなど、他のページにも表示させたい場合はチェックを入れます。
ただ、チェックすると読んでもらいたい記事の邪魔になって離脱を誘発するので設定しないケースの方が多いです。
ヘッダーカードの画像表示デザイン
ヘッダーカードの画像の表示を選べます。
それぞれサンプルを用意しました。
ブログ全体のデザインに応じてお好みで選んでOKです。
※デフォルト
※テキストのある背景画像をぼかす
※テキストのある背景画像を暗くする
スマホ閲覧時ヘッダーカードの画像表示の高さ
「スマホ閲覧時ヘッダーカードの画像表示の高さ」にチェックすることで、スマホで見た場合のヘッダーカードの高さを倍に表示することができます。
この場合、用意する画像は「1200×700」ピクセルの画像を推奨します。
上下の高さが「700」ピクセル以下だと左右が自動でトリミングされてしまいます。
トリミングされても問題ない画像ならよいですが、そうでないなら何の画像が分からなくなりますのでご注意ください。
※1200×700ピクセルで設定した場合
※1200×400ピクセルで設定した場合
以上でヘッダーカードの設定についての解説は終わりです。
まとめ：AFFINGER5ならヘッダーカードの設定＆カスタマイズが簡単
いかがでしたでしょうか？
ヘッダーカードの役割を改めて説明すると下記の2点です。
ポイント
- 目立つので見て欲しい記事に誘導させやすい
- 目立つのでページの離脱を防ぐのに役立つ
上記はサイトの滞在時間を増やすのに役立ちますので、Googleから高く評価されることにつながります。
AFFINGER5（アフィンガー5）なら、このヘッダーカードの設定が簡単にできますので、ぜひチャレンジしてみてください。
本日はこのあたりで。
今回の記事が、皆さまのお役に立てれば嬉しいです。
本日も最後までお読みいただきまして、誠にありがとうございました。
ホームページの始め方を知りたい方へ
当ブログでは、「ヨガインストラクターのためのホームページの始め方」を紹介しています！
ヨガスクールの中の人が確実で信頼性の高い情報をお届けしていますので、これから始める方は、こちらの完全ガイドをぜひご覧ください！
また、AFFINGER（アフィンガー）というWordPressテーマの購入特典として、「ヨガインストラクターのためのAFFINGER設定マニュアル」という独自のプレゼントもご用意しています（※単体での購入も可）。
ホームページの始め方・立ち上げに関する、ご質問・ご相談はボクのInstagramのDM（@ucozi_ikeda）までお気軽にどうぞ！
WordPressのテーマ
『AFFINGER 6（アフィンガー）』
購入をご検討の方へ。
当サイトから『AFFINGER 6（アフィンガー）』をご購入いただいた方の特典として、「ヨガインストラクターのためのAFFINGER設定マニュアル」を提供しております。
※すでに『AFFINGER 6（アフィンガー）』を購入済みの方には、有料でも販売しています。
「ヨガインストラクターのためのAFFINGER設定マニュアル」では、デモサイトの設定について、テーマのインストールから細かい設定まで、全ての手順について解説しています。
