AFFINGER7のヘッダーカード（ヘッダーバナー）設定方法｜画像・リンク・デザインまで解説

AFFINGER7を使っていて、

「ヘッダーの下に画像付きのリンクを表示したい」

「よく見るカード型のメニューはどうやって作るの？」

「おすすめの記事やカテゴリーをもっと目立たせたい」

と思ったことはありませんか？

そんなときに便利なのが、AFFINGER7のヘッダーカード（ヘッダーバナー）です。

ヘッダーカードを設定すると、サイト上部に画像付きのリンクを表示できるため、カテゴリー・まとめ記事・おすすめ記事など、読者に見てほしいページへの導線を作ることができます。

設定自体もそれほど難しくありません。

この記事では、AFFINGER7でヘッダーカードを設定する方法から、画像・テキスト・リンク・デザインの設定、おすすめの使い方まで初心者向けにわかりやすく解説します。

AFFINGER7の基本設定やその他のカスタマイズ方法については、AFFINGER7の使い方・設定方法まとめでも詳しく紹介しています。

※この記事はAFFINGER6時代に作成した内容を、AFFINGER7対応版として更新しています。

AFFINGER7のヘッダーカード（ヘッダーバナー）とは？

AFFINGER7のヘッダーカードとは、サイト上部に表示できる画像付きのカード型リンクです。

こんな感じのヘッダーカードです。

画像・テキスト・リンクを自由に設定でき、最大4つまで表示できます。

例えば、

カード	リンク先
WordPressテーマ	WordPressテーマのカテゴリー
AFFINGER7	AFFINGER7まとめ記事
初心者ガイド	WordPress初心者向け記事
テーマ比較	WordPressテーマ比較記事

といった使い方ができます。

通常のメニューとは違い画像を使って目立たせることができるため、読者に最初に見てもらいたいコンテンツへの入口として便利です。

ヘッダーカードを設置するメリット

ブログの記事数が増えてくると、初めてサイトを訪れた読者は、「どの記事から読めばいいの？」と迷いやすくなります。

そこでヘッダーカードに主要カテゴリーやまとめ記事を配置しておけば、サイトの入口を分かりやすくできます。

見た目を整えるためだけではなく、サイト内を回遊してもらうためのナビゲーションとして使えるのがヘッダーカードの大きなメリットです。

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

それでは、実際にヘッダーカードを設定してみましょう。

WordPressの管理画面から、

AFFINGER管理（テーマ管理） → サブエリア → ヘッダーバナーエリア

へ進みます。

ヘッダーバナーエリアでは、カードごとに画像・テキスト・リンク先などを設定できます。

基本的には、

画像を設定する
テキストを入力する
リンク先URLを入力する
表示方法やデザインを調整する

という流れです。

順番に設定していきましょう。

ヘッダーカードに画像を設定する

まずはカードに表示する画像を設定します。

メディアライブラリを開き、使用したい画像URLを貼る付けるか「アップロード」をクリックして使用したい画像をアップロードします。

画像は、リンク先の内容がひと目でイメージできるものがおすすめです。

例えば「AFFINGER7」というカードならWordPressやWebサイトをイメージできる画像、「ブログの始め方」であればパソコンで作業しているイメージなどが使いやすいでしょう。

ヘッダーカードはサイト上部の目立つ場所に表示されるので、できるだけサイト全体の雰囲気に合う画像を選ぶのがポイントです。

テキスト・サブテキストを設定する

画像を設定したら、カードに表示するテキストを入力します。

例えば、

AFFINGER7

初心者向け使い方ガイド

といった形です。

カード内の文字は長くしすぎない方が見やすくなります。

複数のカードを並べる場合は、できるだけ文字数もそろえましょう。

「AFFINGER7」「SWELL」「テーマ比較」「WordPress入門」のように長さを近づけると、全体のデザインが整いやすくなります。

ヘッダーカードのリンク先URLを設定する

続いて、カードをクリックしたときに移動するページを設定します。

リンクURLの入力欄に、誘導したいページのURLを入力します。

大切なのは、画像・カード名・リンク先ページの内容を一致させることです。

「WordPressテーマ」と書いてあるカードから関係のないページへ移動すると、読者は戸惑ってしまいます。

カードをクリックした先で、読者が期待した情報をすぐに見つけられるようにしましょう。

2枚目〜4枚目のヘッダーカードを設定する

1枚目の設定ができたら、同じ方法で2枚目以降も設定します。

AFFINGER7では最大4枚まで設定できますが、必ず4枚すべて使う必要はありません。

「4つ設定できるから4つ作る」のではなく、本当に読者へ案内したいページだけを選ぶようにしましょう。

PC・スマホで表示するヘッダーカードを設定する

AFFINGER7では、ヘッダーバナーを表示する端末を指定できます。

PCだけに表示したり、スマートフォン・タブレットだけに表示したりすることもできます。

PCではきれいに表示されていても、スマートフォンではカードが大きくなりすぎて、記事本文までの距離が長くなるケースがあります。

特にヘッダーカード以外にも、NEWS・スライドショー・メニューなどを表示しているサイトでは注意が必要です。

設定後は必ずPCとスマートフォンの両方で確認しましょう。

トップページだけにヘッダーカードを表示する

AFFINGER7のヘッダーバナーは、基本設定ではトップページに表示されます。

初心者の方は、まずトップページだけで使用してみるのがおすすめです。

ヘッダーカードにメインカテゴリーやまとめ記事を配置すると、読者が目的の記事を探しやすくなります。

トップページ全体の作り方については、AFFINGER7でトップページを自由にカスタマイズする方法も参考にしてみてください。

サイト全体にヘッダーカードを表示する

投稿ページや固定ページなど、トップページ以外にもヘッダーカードを表示したい場合は、

「サイト全体に表示にする」

を有効にします。

これでサイト内のページにもヘッダーカードを表示できます。

ただし、サイト全体への表示が必ずしも正解というわけではありません。

投稿記事を読みに来た人は「早く本文を読みたい」と考えていることも多いため、ヘッダー周辺のコンテンツが多すぎると読み始めるまでに時間がかかります。

まずはトップページのみで使い、必要性を感じたらサイト全体への表示を検討するのがお勧めです。

ヘッダーカードのデザインを変更する

AFFINGER7のヘッダーカードでは、画像や文字だけでなく見た目も調整できます。

画像上にテキストを表示すると、写真によっては文字が読みにくくなることがあります。

そのような場合は、背景画像をぼかしたり暗くしたりすると文字を読みやすくできます。

特に明るい写真の上に白文字を載せる場合は、画像を少し暗くすると視認性が高くなります。

また、サイト全体を柔らかいデザインにしている場合は、カードに角丸を設定する方法もあります。

デザインに絶対的な正解はありません。

サイト全体との統一感と文字の読みやすさを優先して調整しましょう。

ヘッダーカード以外のロゴ・ヘッダー画像・メニューなども変更したい方は、AFFINGER7のヘッダーカスタマイズまとめも参考にしてください。

テキストなしで画像だけのカードにもできる

ヘッダーカードには必ずテキストを入力する必要はありません。

画像自体にタイトルをデザインしている場合は、画像だけを使ったリンクとして表示することもできます。

例えば画像内に、AFFINGER7完全ガイドと文字を入れておけば、カード側でテキストを重ねなくても内容を伝えられます。

ただし、画像内の文字はスマートフォンでは小さくなります。

初心者の方であれば、画像に直接文字を入れすぎず、AFFINGER7側のテキスト機能を利用する方が後から変更しやすくなります。

ヘッダーカードにおすすめの画像サイズは？

「ヘッダーカードの画像は何pxにすればいいの？」と迷う方も多いと思います。

ヘッダーカードでは特定の数値だけにこだわるよりも、複数のカードで画像サイズや縦横比を統一することが重要です。

例えば、1枚目だけ縦長、2枚目は横長、3枚目は正方形という状態では、カードの高さや見た目がバラバラになりやすくなります。

できれば使用するすべての画像を同じサイズ・同じ比率で作成しましょう。

写真の明るさや色味もある程度そろえると、トップページ全体の統一感が出ます。

ヘッダーカードには何を設定すればいい？

設定方法は分かっても、「何をヘッダーカードにすればいいの？」と悩む方もいると思います。

基本的には、初めてサイトを訪れた読者に見てほしいページを設定するのがおすすめです。

メインカテゴリー

まず候補になるのが、サイトのメインカテゴリーです。

例えばWordPressブログなら「WordPressテーマ」「ブログの始め方」などです。

カテゴリーを整理しておくと、ヘッダーカードのリンク先も決めやすくなります。

まだカテゴリー設計ができていない方は、AFFINGER7でカテゴリーを作成する方法とカテゴリーページのカスタマイズ方法を参考にしてください。

初心者向けのまとめ記事

サイト内にまとめ記事があるなら、ヘッダーカードとの相性はとても良いです。

例えば、「AFFINGER7の使い方まとめ」「WordPressの始め方」「WordPressテーマの選び方」などです。

初めて訪れた人が「まずここを見ればいい」と分かるページを配置しましょう。

比較記事・収益記事

ブログを収益化している場合は、比較記事や商品紹介記事への入口として使う方法もあります。

ただし、4枚すべてを広告や収益記事にするよりも、「初心者向け記事」「カテゴリー」「まとめ記事」「比較記事」などを組み合わせた方が、サイトの入口として自然です。

ヘッダーカードを設置するときの注意点

ヘッダーカードは便利ですが、カードを増やせば増やすほど効果的になるわけではありません。

特に注意したいのは、ヘッダー周辺に情報を詰め込みすぎないことです。

AFFINGER7では、ヘッダーカード以外にもNEWS、スライドショー、メニューなど多くの機能を配置できます。

すべてを表示するとPCでは華やかでも、スマートフォンでは本文へたどり着くまでが長くなる場合があります。

「読者に何を見てもらいたいのか」を決めて、必要な機能だけ使いましょう。

ヘッダーカードが表示されないときの確認ポイント

設定したのにヘッダーカードが表示されない場合は、まず画像が正しく設定されているか確認してください。

次に、表示する端末の設定をチェックします。

PCだけに表示する設定になっていればスマートフォンでは表示されませんし、スマートフォン・タブレットだけに設定していればPCには表示されません。

「トップページでは表示されるのに記事ページでは表示されない」という場合は、トップページのみ表示する設定になっている可能性があります。

サイト全体へ表示したい場合は「サイト全体に表示にする」を確認してください。

設定に問題がない場合は、WordPressやキャッシュ系プラグイン、ブラウザのキャッシュを削除して再度確認してみましょう。

また、AFFINGER7のバージョンが古い場合はアップデート状況も確認しておきましょう。

更新方法が分からない方は、AFFINGER7のアップデート方法｜初心者でも失敗しない更新手順を参考にしてください。

ヘッダーカードとヘッダー下スライドショーの違い

AFFINGER7には、ヘッダーカードとは別にヘッダー下へ記事をスライド表示する機能もあります。

「どちらを使えばいいの？」

と迷う方もいると思います。

違いを簡単に整理すると次のようになります。

比較	ヘッダーカード	ヘッダー下スライドショー
表示方法	固定表示	横方向にスライド
おすすめ用途	カテゴリー・まとめ記事	複数の記事
読者の選びやすさ	高い	記事数による
動き	なし	あり
シンプルさ	高い	やや華やか
向いている役割	サイトの入口	記事の紹介

ヘッダーカードは、「まず、このコンテンツを見てください」という固定の入口を作るのに向いています。

一方、スライドショーは複数の記事を次々に紹介したい場合に便利です。

例えば、

ヘッダーカード → メインカテゴリー

スライドショー → おすすめ記事

というように役割を分ける方法もあります。

スライド表示を使いたい方は、ヘッダー下にスライドショーを設置する方法も参考にしてみてください。

AFFINGER7のヘッダーをもっとカスタマイズする

ヘッダーカードを設定できたら、ヘッダー周辺のその他の部分も少しずつ整えてみましょう。

AFFINGER7では、ロゴ・サイト名・ヘッダーメニュー・ヘッダー画像・ヘッダーカードなど、さまざまな部分を変更できます。

ヘッダー全体をまとめて見直したい方は、まずAFFINGER7のヘッダーカスタマイズまとめを確認するのがおすすめです。

さらにトップページ全体を作り込みたい場合は、AFFINGER7でトップページを自由にカスタマイズする方法も参考になります。

また、特定の記事を読者へ目立たせたい場合は、AFFINGER7でおすすめ記事一覧を設置する方法も活用できます。

ヘッダーカードだけでトップページを完成させようとせず、「ヘッダーカードは主要コンテンツへの入口」と考えると、サイト全体を整理しやすくなります。

まとめ｜AFFINGER7のヘッダーカードで重要なページへの導線を作ろう

今回は、AFFINGER7のヘッダーカード（ヘッダーバナー）の設定方法について紹介しました。

ポイントをまとめると、

最大4つまでカード型リンクを設定できる
画像・テキスト・リンクを自由に設定できる
PC・スマホなど表示する端末を選べる
トップページだけでなくサイト全体にも表示できる
カテゴリーやまとめ記事への入口として使いやすい
複数のカードでは画像サイズやデザインをそろえると見やすい

という特徴があります。

初めて設定する場合は、まず読者に最初に見てもらいたい2〜4ページを選んでみてください。

メインカテゴリーやまとめ記事を中心に設定するだけでも、サイト内の導線がかなり分かりやすくなります。

ヘッダーカードの設定が終わったら、次はAFFINGER7のヘッダーカスタマイズまとめを参考に、ロゴ・メニュー・ヘッダー画像なども少しずつ整えてみてください。

AFFINGER7には多くのカスタマイズ機能がありますが、最初からすべて使う必要はありません。

読者が迷わず目的の記事へ移動できることを優先して、必要な機能からひとつずつ設定してみてください。

合わせて読みたい関連記事