ヘッダーは訪問者が最初に目にする部分なのでサイト管理者としては力を入れておきたいですよね。
でもアフィンガー5はいろんなカスタマイズが出来る一方で、どのように操作すればいいのかわからないといった声もあります。
そこで今回はヘッダーエリアの編集方法についてご紹介していきたいと思います。
ヘッダーエリアとは？
まずヘッダーというのはサイト最上部に位置する部分で、サイトタイトルやキャッチフレーズなど重要な箇所です。
アフィンガー5のヘッダーエリアは画像を枠で囲んで部分に当たります。
注意ポイント
アフィンガーではヘッダーエリアとheaderエリアは名称が似ていますが、それぞれ別のエリアが対象になっています。
ワードプレスをインストールしてアフィンガー5のテーマを挿入したばかりだと以下のようなイメージになります。
ヘッダーエリアに何もカスタマイズしていない状態
見た感じ殺風景で少し寂しいですね。
見た目があまり良くないので、ヘッダーエリアのカスタマイズをしてみましょう。
ヘッダーエリアのカスタマイズ
それでは実際にヘッダーエリアのカスタマイズをやってみましょう。
サイト名とキャッチフレーズの変更
【設定】→【一般】
サイト名とキャッチフレーズという項目がありますので、ここに任意の文章を入力します。
キャッチフレーズが一番上に表示され、サイト名はその下に表示。
ヘッダーエリアに色を付ける
【外観】→【カスタマイズ】→【基本エリア設定】→【ヘッダーエリア】
背景色という項目がありますので、サイトに合った色を選択しましょう。
色の設定はこれだけでもいいのですが、もう少し装飾したい場合にはグラデーションも設定できます。
グラデーションは先程設定した色と似たような系列色にすることで豪華なヘッダーに見えますよ。
初期設定ではグラデーションは縦方向に設定されていますが、横方向へも１クリックで変更できます。
縦方向のグラデーション
横方向のグラデーション
ヘッダーエリアに画像を挿入
【外観】→【カスタマイズ】→【基本エリア設定】→【ヘッダーエリア】
ヘッダーエリアには色だけでなく画像を挿入することもできます。
『ヘッダー画像』に画像を挿入することで、自分好みのサイトに仕上がります。
色と画像を同時使使用する場合は画像のサイズを小さくして『背景画像を繰り返さない』にチェックを入れると画像と色を同時に使用することが出来るようになります。
ヘッダーエリアの文字色を変更
【外観】→【カスタマイズ】→【基本エリア設定】→【ヘッダーエリア】
サイト名とキャッチフレーズの文字色を変更することもできます。
『サイトタイトルとキャッチフレーズの文字色』で好きな色を選ぶだけです。
サイトタイトルとキャッチフレーズをそれぞれ別の色にはできないようです。
（CSSをいじれば出来るかもしれませんが…）
カスタマイズが面倒と感じる方は他の方法も
アフィンガ－5でははじめから用意されているデザインテンプレートがいくつもあります。
【AFFINGER5 管理】→【デザイン】タブを選択するとサイト全体の設定をすることができ、サイトのイメージに合わせて決めることができます。
カラーパターンとデザインパターンの2種類の中から好きな色とイメージを決めるだけで簡単にサイトを装飾することが出来るので、はじめのうちはこちらを使ってみるといいでしょう。
あらかじめ用意されているテンプレートを使うだけでも見た目が良くなるので、カスタマイズが面倒という方は使ってみてはいかがでしょうか。
