ブログの執筆を始めて、色々な人のサイトを見てきたけど、やっぱり第一印象はとても大事だ。
トップページの印象が良くないと、その瞬間に読者は離脱してしまうので、ヘッダーの編集には少し時間をかけた方がいいと思う。
とはいっても「AFFINGER6」の機能を使えば簡単にいい感じの編集ができるので、そのやり方について解説していく。
ヘッダーエリアとは
サイトにおけるヘッダーとは、サイトを表示したとき、まず始めに目に入る部分になる「サイトの顔」と呼べる部分になる。
そのブログのイメージに合った色や画像を配置していくと、読者の興味を引けるようになるだろう。
ヘッダーに画像を配置してみよう
まずはヘッダーに画像を追加してみよう。
①まずは画像を用意する
まずはヘッダーに表示させる画像を用意しよう。
今回はこのブログでも良く使っている画像編集サイト「Canva」を例に紹介する。
デザインの編集 ▶︎カスタムサイズ
【推奨画像サイズ】
【幅 2200 / 高さ 500】px ▶︎ 新しいデザインを作成
テンプレートがたくさん表示されるので、サイトイメージにあった画像を選ぶ。
このテンプレートをそのまま使用してもいいし、ブログの名前を追加したりしてみてもいい。
共有 ▶︎ ダウンロード
から画像をダウンロードできる。
②ヘッダーに画像を配置する
画像が用意できたら早速サイトに表示させてみよう。
管理画面 ▶︎外観 ▶︎ カスタマイズ ▶︎ ヘッダー画像
新規画像を追加 ▶︎ 画像をアップロード▶︎ 公開済み
これでサイトのヘッダーに画像が表示されるようになるので確認してみよう。
ヘッダーにメニューを表示させてみよう
次にヘッダーメニューの配置方法を解説していく。
画像のオレンジで囲んだ部分がヘッダーメニューになる。
①ヘッダーメニューを編集する
まずはヘッダーメニューに表示するカテゴリーを選択していく。
管理画面 ▶︎外観 ▶︎ メニュー
新しいメニューの作成 ▶︎ヘッダーメニューにチェック ▶︎ メニューを作成
※メニュー名はここでは「ヘッダーメニュー」
次にメニューに表示させるカテゴリーを選択していく。
カテゴリー▶︎ 好きな項目にチェック ▶︎ メニューに追加
すると右側に選択したカテゴリーが表示されるので、「メニューを保存」をクリック。
これでヘッダーメニューに表示させたいカテゴリーの編集が完了した。
ちなみに、このサイトの設定はPC閲覧時のサイトの幅はデフォルト（1060px）に対して、表示させるカテゴリーは６つにしている。
PC閲覧時のサイトの幅は
AFFINGER管理▶︎ 全体設定 ▶︎ サイト全体のレイアウト一括設定
から変更できる。
②ヘッダーメニューの編集
最後に、設置したヘッダーメニューの編集を行う。
外観▶︎ カスタマイズ ▶︎ 各メニュー設定 ▶︎ PCヘッダーメニュー
ここでヘッダーメニューの色合いなどを編集できる。
ヘッダー画像の色合いと合わせるなど、できるだけシンプルな色合いを心がけるとお洒落に見えるぞ。
ヘッダーカードを表示させよう
最後に、「ヘッダー下エリア」の編集をしていく。
ここが終われば一見してお洒落なサイトが完成するので頑張ってほしい。
とはいっても編集はとても簡単だ。
①ヘッダーカードの設定
AFFINGER管理 ▶︎ ヘッダー下/おすすめ ▶︎ ヘッダーカード
この編集画面で、ヘッダー下に４つまでおすすめのヘッダーカードを表示させることができる。
②ヘッダーカードの設定項目
| 設定項目 | 設定内容 |
|---|---|
| サイト全体に表示にする | → チェック |
| 画像のURL： | →表示させる画像のURL |
| テキスト | → 画像に表示させるタイトル |
| サブテキスト | → サブタイトル |
| リンク先URL： | → 表示させるカテゴリーのURL |
| PCに表示しない | → 好み |
| スマホ・タブレットに表示しない | → 好み |
| テキストのある背景画像をぼかす | →画像をぼかす |
| テキストのある背景画像を暗くする | →画像を暗くする |
| 角丸にする | →画像の四隅が丸くなる |
| スマホ閲覧時 高さを倍に | →画像が大きくなる |
設定自体は好みになるので、サイトのイメージやスマートフォンでの見やすさを意識して設定してもらいたい。
まとめ ヘッダーエリアはサイトの顔
今回はヘッダーエリアの設定方法について解説した。
トップページのヘッダーエリアは、読者の第一印象を決めるエリアなので、この部分については少し凝ってもいいと思う。
この記事が少しでも参考になってくれていたら幸いだ。
