AFFINGER6デザインカスタマイズ方法｜ヘッダーエリア編

こちらに関する質問をAFFINGER6使用歴1年以上の僕が答えていきます。

ヘッダー部分のデザインは読者がホーム画面に戻った時に一番初めに見る部分になります。

自分が読んでもらいたい記事にたどり着いてもらいやすく、読者にとって分かりやすく使いやすいヘッダーを作っていきましょう。

記事で得られること

• ヘッダー画像の設定方法
• ヘッダーメニューの作り方
• ヘッダーカードの作り方

実績と信頼性

ホーム画面の一番トップに来るヘッダーの重要性は想像通りです。

自分が提供しているコンテンツへ読者を案内するための役割を果たすため、読者が必要と感じた情報を的確に表示してあげる必要があります。

今回は設定方法の基礎を紹介します。基礎を理解して自分好みにカスタマイズしてみましょう。

AFFINGER6ヘッダーエリアのカスタマイズ方法

この記事は以下の記事の続きになります。サイト全体の設定方法をまとめて紹介しています。

>>AFFINGER6のデザインをカスタマイズする方法【総まとめ】

まだAFFINGER6を利用していない方はこちらを参考にしてください

>>AFFINGER6公式

ヘッダーは三つのエリアに分けて解説していきます。

• サイトロゴ/タイトル
• メニュー
• ヘッダーカード

上記の三つのエリアに分かれます。次の章から順に解説していきます。

AFFINGER6ヘッダー画像【サイトロゴ/タイトルの変更方法】

では早速見ていきましょう。

ロゴ画像は非常に簡単に設定が可能です。

「外観」＞「カスタマイズ」をクリックする

「外観」をクリックすると「カスタマイズ」が表示されるのでクリックする

ロゴ画像/サイトのタイトルをクリックする

下図で示した部分をクリックする

ロゴ画像・スマホロゴ画像を設定する

ロゴ画像を図を参考に追加しましょう。PCとスマホ別々のロゴ画像の設定が可能です。

PCでみた時とスマホで見た時で表示されるロゴを変更することが可能

もし同じロゴを表示されたいのであれば両方とも同じ画像を設定しましょう。

AFFINGER6ヘッダーメニューの作り方

メニュー部分はサイトがどんな情報やコンテンツを扱っている指標になります。

カテゴリなどは誰が見ても分かりやすく作ってあげましょう。

考え方としてはメニューボタンにどのようなリンクを付与するのかで機能や遷移先が変わります。

「外観」＞「メニュー」をクリックする

「外観」をクリックした後に「メニュー」をクリックします。

メニューを制作画面に移動する

「新しいメニューを作成しましょう」をクリックする

メニューを作成する

メニュー構造で下記の2つを設定して「メニューを作成」をクリックします。

• メニュー名
• メニューの位置

図の様にメニュー名は任意でお好みの名前を設定します。

メニューの位置は今回はヘッダーメニューにチェックを入れます。

メニュー項目を追加する

こちらもお好みでメニューに追加したいものを選択して「メニューに追加」をクリックします。

メニュー項目は下記の種類から選ぶことが出来ます。

• 固定ページ（作成した固定ページに移動）
• 投稿（特定の投稿記事に移動）
• カスタムリンク（好きなページやリンク先に移動）
• カテゴリー（カテゴリー別に投稿を表示させることが出来る）

AFFINGER6はドロップダウンメニューも作れる

AFFINGER6にはドロップダウンメニューにも対応しており、下図のように「メニュー構造」の任意のメニュー項目を右にドラックすることで設定が可能です。

下図の場合”ホーム”の配下に”お知らせ”と”プライバシーポリシー”が格納される

マウスのカーソルをホバリングさせると下図のようにドロップダウンメニュー（青）が出現します。

AFFINGER6ヘッダーカードの設定方法と画像挿入

ヘッダーカードとは簡単に説明すると。

画像の装飾が可能なメニューボタンという考え方でOKです。

イメージがあった方が読者としても見やすいことがあります。自分が見て欲しい記事のリンクを入れたりすると効果的です。

AFFINGER管理をクリックする

管理画面の下部の方に「AFFINGER管理」があるのでクリック

AFFINGER関連の設定はここでまとめて行います。

ヘッダーカード設定に移動する

「ヘッダー下/おすすめ」の部分をクリック

ヘッダーカードの設定画面に遷移しましょう。

ヘッダーカードの設定をする

下図のように設定します。

• 画像のURL（画像を挿入します）
• テキスト（メインとサブの両方が設定可能です）
• リンク先URL（クリックしたときに移動するページのリンクを入力）

当ブログのデザインは下図のように設定しています。

• テキストのある背景をぼかす
• 角丸にする

ヘッダーカードは最大4つまで登録可能です

読者はサイトのヘッダーやメニューでブログの方向性を理解する

今回解説した内容を基に自分好みにヘッダー部分のカスタマイズを行ってみてください。

特に読者はサイトのメニューやヘッダーロゴの情報を基にサイトの方向性というのものを把握し読むか読まないかを決めています。重要な部分になるのではじめの段階でしっかりとデザインしましょう。

基本的な部分の変更方法を紹介しましたが、他にも細かな設定が可能で

応用が効くテーマになっていますのでデザインをプロ仕様にしたい、読者の滞在時間を伸ばしたい人はぜひAFFINGER6のレビューをもとに購入を検討してみてください。

>>【AFFINGER6】アフィンガー6を実際に使ってみた感想とレビュー

今回は以上です。