今回は、ヘッダーカードを表示させるための設定とカスタマイズについて解説していきます。
ヘッダーカードとは、ヘッダーの下にある、画像にテキストが入っているカードタイプのリンクのことです。
ヘッダー下は、ユーザーの目に止まる可能性が高い場所。
ここに見てもらいたいカテゴリのページやタグのページへのリンクを表示させておくことで、回遊率を上げようという作戦です。
これも内部SEO対策のひとつですね。
そこで今回は、
- ヘッダーカードを表示させるための設定（AFFINGER管理）
- ヘッダーカードの画像サイズについて
この2つを詳しく解説していきます。
AFFINGER管理 ヘッダーカードを表示させるための設定
ヘッダーカードを表示させるためには、AFFINGER管理にある「ヘッダーカード」を設定します。
設定項目としては、
- 【ヘッダーカード】
- 画像のURL
- リンク先URL
- PCに表示しない・スマホ・タブレットに表示しない
- 【デザイン】
- テキストのある背景画像をぼかす
- テキストのある背景画像を暗くする
- 角丸にする
- スマホ閲覧時（959px以下）のおすすめヘッダーカードの高さを倍に
設定には、
- 画像
- 表示させたいページのURL
この2つが必要です。
画像自体にテキストを入れてしまう方法もあるんですが、今回は背景画像とテキストを個別に入れるパターンで進めて行きたいと思います。
ヘッダーカードの設定手順
１．「AFFINGER管理」を開き、管理メニューの「ヘッダー下 / おすすめ」を開きます。
２．まずは画像を挿入します。
「アップロード」をクリックすると「メディアを追加」が開くので、表示させたい画像を選択し投稿へ挿入します。
画像をアップロードすると、「画像のURL：」に自動でURLが入力されます。
３．テキストを入力します。
上の段はタイトル、下の段はサブタイトルとして表示されます。
４．リンク先のURLを入力します。
飛ばしたいページのURLを入力してください。
カテゴリページ、タグページ、個別記事、外部リック…など、何でもOKです。
５．あとは「save」を押せばヘッダーカードが表示されるようになります。
デザインを変更する
このままだと文字が見えにくい…という場合は、デザインを変更することによって解決します。
- 背景画像をぼかす
- 背景画像を暗くする
この2パターンへ変更できます。
それともう一つ。
ヘッダーカードを角丸にすることも可能です。
背景画像をぼかすパターン
背景画像をぼかすことで、文字が少し目立つようになりました。
背景画像を暗くするパターン
暗くすると、文字もはっきりするし何の画像かもわかるので、いい感じですね。
ヘッダーカードを角丸にする
これは好みが分かれると思います。
サイトのデザインに合わせて使用してください。
ヘッダーカードの画像サイズはどれくらい？
ヘッダーカードに使う画像サイズはこれがベストだ！ というサイズはありません。
PC閲覧時のサイトの幅によって、ヘッダーカードのサイズが変わるからです。
ただ、表示されるサイズはだいたいこれぐらいというのはわかります。
以下に、カラム別、サイト幅別の画像サイズの目安を載せておくので参考にしてください。
1カラムパターン
サイト幅：900pxの場合
| 3列の場合 | 4列の場合 |
|---|---|
| 640×220 | 640×300 |
| 800×275 | 800×375 |
| 1280×440 | 1280×600 |
サイト幅：1000pxの場合
| 3列の場合 | 4列の場合 |
|---|---|
| 600×186 | 600×250 |
| 720×223 | 720×300 |
| 1080×334 | 1080×450 |
2カラムパターン
サイト幅：1200pxの場合
| 3列の場合 | 4列の場合 |
|---|---|
| 640×165 | 640×220 |
| 800×205 | 800×275 |
| 1280×330 | 1280×440 |
ヘッダーカードに使う画像は大きい必要がないので、幅640pxぐらいで十分です。
