アフィンガーのヘッダー&フッターとグローバルメニューのカラー変更の方法を図解で解説！

こんにちは！ひよりんです。

この記事ではアフィンガー5の「ヘッダー」と「フッター」と「グローバルメニュー（ヘッダーメニュー）」のカラー変更について図解を用いて詳しく解説していきます。

ブログのデザインはカラーを変更しただけでだいぶ印象が変わります。

特にアフィンガーは細かいカラー設定も可能なのでオリジナルのデザインを簡単に作れてしまうんです！

ひよりん

とはいえ「さすがアフィンガー。」設定する項目が多すぎてどこをどう操作すればいいのやら・・・。 かなり苦労しました。

そんな経験からヘッダーとフッターとグローバルメニューのカラーの変更方法を図解を用いて分かりやすく解説していきます。

ひよりん

少しでも誰かの役に立てたら嬉しいです。

そんなあなたの悩みを解決します！

ブログを自分だけのカラーにしてしまいましょう！

アフィンガーをインストールしたばかりの方のためにまずはカラーの初期化の手順と全体カラー設定の手順を解説します。

サイト全体カラー設定

カラーの初期化はワードプレスのダッシュボードから行います。

アフィンガーをインストールしたばかりの人は、カラーの初期化をする必要があります。

下記の手順でカラーの初期化を行ってください。

すでに手続き済みの方は飛ばしてください。

カラーの初期化

① 【AFFINGER5管理】→【AFFINGER5管理】→【はじめに】に入る。

② 「保存」をクリックします。←インストール後保存を一回押す事によって初期値が設定されます。

これでカラーの初期化は完了です。

サイト全体カラーを決める

次にサイトの全体カラーを決めます。

①【AFFINGER5管理】→②【AFFINGER5管理】→③【デザイン】をクリックします。下記の画面が出てきます。

この中の④「カラーパターン」と⑤「デザインパターン」をそれぞれ選んで⑥【save】をクリックします。

アフィンガーの初期設定の状態はこんなデザインです。

色々変更しながらお好きなカラーに変更してみてください。

この全体のカラーがメインカラーとなります。

これだけでもすぐに記事を書き始めてもいいのですが、このメインカラーに沿ったデザインで細かい所をカスタマイズすれば自分だけのデザインになります。

今回はカスタマイズの中のヘッダー部分のカラー変更のやり方について解説していきます。

ひよりん

実は私はこのサイト全体カラーを初期設定のまま細かいカスタマイズをしてしまい・・・今ではサイト全体カラーを緑に変更しましたが始めは青のままだったのでちぐはぐなデザインになっていました！先にどんなカラーでデザインしていくか決めて設定しましょう！

ヘッダーエリアのカラー変更

ブログのメインカラーが決まったので次は細かいカラー設定をしていきます。

まずはヘッダーエリアのカラーを変更していきます。

ヘッダーエリアとはここの事

【外観】→【カスタマイズ】→【基本エリア設定】→【ヘッダーエリア】に入ります。

下記画像の赤枠で囲ってある「背景色」、「背景色（グラデーション）」等を色々触ってみてお好みのカラーに変更します。

変更したら必ず【公開】ボタンをクリックします。

カラーが変更されました。

ひよりん

私はグラデーションにせず単色設定にしています。単色設定にするには「背景色」と「背景色（グラデーション上部）」のカラーを同じ色で設定すればできます。

グラデーションで設定したい場合は「背景色」と「背景色（グラデーション上部）」のカラーを違うカラーを選択すれば設定可能です。

グラデーション例1（上下のグラデーション）

すると・・・上下のグラデーションになりました。

グラデーション例2（左右のグラデーション）

先ほどのカラー設定で「グラデーションを横向きにする」にチェックを入れると・・・

左右のグラデーションになりました。

グラデーション設定も簡単ですね！

色んな色で試してみてください。

フッターのカラー変更

ではフッターのカラーも変更していきます。

フッターとはブログの画面の一番下の事です。

【外観】→【カスタマイズ】→【基本エリア設定】→【フッターエリア】に入ります。

下記画像の赤枠の部分を変更して設定していきます。

設定したらこうなりました。

フッターはグラデーションにしてみました。

ヘッダーに設定したカラー番号をフッターにコピペすれば同じカラーで設定できます！

カラー番号とはここ↓

「色を選択」をクリックすればカラー番号が出てくるのでその部分にコピペすれば同じカラーに設定できます。

自分のヘッダーとフッターのカラー番号はメモしておくと次からカラー設定を行う時に便利です！

アフィンガーは細かい設定も多いのでカラーを統一する場合は、今後このカラー番号を使う時が出てきます。

確認する手間も省くためにもメモしておくといいですね！

ひよりん

私はヘッダーの「背景色」のイエローとフッターの「背景色（グラデーション上部）」のグリーンのカラー番号はパソコンにメモしています。

グローバルメニュー（ヘッダーメニュー）のカラー変更

では次はこの部分のカラーを変更します。

ひよりん

私はこの部分のカラー変更はどこから設定できるのか探すのに一苦労しました（ここもヘッダーエリアだと思っていたので）。 初めこの部分の名称がわからなかったんです。

【外観】→【カスタマイズ】→【メニューのカラー設定】→【PCヘッダーメニュー】に入ります。

するとこんな画面が出てくるので赤枠で囲んである部分のカラーをお好みに設定してください。

設定が終わったら忘れず【公開】をクリックします。

ひよりん

この部分の名称はPCヘッダーメニューって言うんですね！

ちなみにこの「ヘッダーメニュー」は「グローバルメニュー」と呼ばれる事が一般的です。「ヘッダーメニュー」と「グローバルメニュー」は同じ事を指していると思ってください。

はかせ

しっかり変更されていますね！

グローバルメニュー（ヘッダーメニュー）もグラデーションでの設定も可能なので色んなデザインが可能です。

色々試してみてお好みのデザインにしていってください。

これでヘッダーとフッター、グローバルメニュー（ヘッダーメニュー）のカラー設定は完了です。

どんどん素敵なデザインになってきましたね！

まとめ

ヘッダーとフッター、グローバルメニュー（ヘッダーメニュー）のカラー設定はこうやって図解で解説してみると簡単にできる事がわかりますね。

ひよりん

初心者の私にとってはどこを触ればどこのカラーが変わるのか始めは全く分からずかなり苦戦しました。 特にグローバルメニューのカラー変更には相当時間がかかりました。

今回このように図解で解説する記事を書いてみてアフィンガーのカラー設定の手順を再確認できました。

「この記事が役に立った」と思ってくれる人がいたらすごく嬉しいです。

これからも新しい記事を書いていくのでまた是非見に来てください。

最後まで読んでくださりありがとうございます。