WordPress有料テーマ AFFINGER6（アフィンガー6） を使っていると、
- ヘッダーナビの背景色を変えたい
- もう少しオシャレに見せたい
- スマホとPCでデザインを調整したい
と感じることはありませんか？
この記事では、AFFINGER6のヘッダーナビゲーション背景を変更する方法を、初心者の方でも迷わないように 画像付き・手順形式 で解説しています。
AFFINGER6のヘッダーナビ背景は簡単に変更できる
AFFINGER6では、管理画面のカスタマイザーだけでヘッダーナビゲーションの背景を以下のように変更できます。
- 単色カラーに変更
- 背景画像を設定
- PC・スマホで別デザインにする
CSSの知識は不要なので、初心者でも安心です。
ヘッダーナビゲーションの背景を変更するメリット
ヘッダーナビの背景を変更すると次のようなメリットも見込めます。
背景を変更するメリット
- メニューが見やすくなる
- サイト全体のデザインが引き締まる
- ブランド感・信頼感がアップする
- クリック率・回遊率の改善につながる
ヘッダーは読者が最初に目にする場所です。
ヘッダーの印象が第一印象になるわけですから、大切な場所とも言えます。
【基本】ヘッダーナビ背景色を変更する方法
まずは一番シンプルな「背景色を変更する方法」です。
これだけで、ヘッダーナビの背景色が変更されます。
画像付きで詳しく説明していきます。
① 「外観」→「カスタマイズ」→「ヘッダーナビゲーション」を選択
ヘッダーナビゲーションの背景色を変更するには「外観」→「カスタマイズ」→「ヘッダーナビゲーション」を選択します。
② 「パソコン」または「スマホ」のどちらを変更するか選択
「パソコン」と「スマホ」のどちらを変更するかを選択します。
※ 両方変更したい場合はそれぞれで設定する必要があります。
③ 背景色を変更
「背景色」で好きな色を選択します。
④ 公開をクリックして設定を反映する
公開をクリックして保存しないと設定は反映されません。
背景色を変更するとこんな感じです。
グラデーションでオシャレに♪
背景をグラデーションにするとオシャレでお勧めです。
こんな感じや
こんな感じです。
グラデーションを横にすることもできます。
ヘッダーナビゲーションに背景画像を設定する方法
背景に写真などの画像を設定することも可能です。
画像付きで詳しく説明していきますが、手順①②は背景色の変更手順と一緒なので省略します。
③ 背景画像で画像をアップロードして位置を調整する
使いたい画像をアップロードするだけで設定可能です。
使用する画像のサイズは注意してください。
ヘッダーの高さを調整することで、表示を調整することが可能です。
ヘッダーの高さは「AFFINGER管理」→「ヘッダー」で設定できます。
背景画像を設定するとこんな感じです。
単色背景と画像、どちらを使うべき？
迷う方のために、使い分けの目安をまとめておきます。
色変更がおすすめな人
- シンプルなブログ・メディア
- 可読性を重視したい
- 初心者向けサイト
背景画像がおすすめな人
- コーポレートサイト
- ブランド感を出したい
- デザインにこだわりたい
ヘッダーナビをオシャレに見せるコツ
ヘッダーナビをオシャレに見せる為にも最低限次のポイントをおさえておきましょう。
デザインを良くするポイント
- 文字色と背景色のコントラストを強める
- 濃い背景 × 白文字は失敗しにくい
- 背景画像は「文字が埋もれない」ものを選ぶ
特にナビゲーションは 「見やすさ最優先」 が重要です。
まとめ｜AFFINGER6ならヘッダーナビ背景は簡単に変更できる
AFFINGER6では、ヘッダーナビゲーションの背景変更はとても簡単です。
- 単色カラーで見やすく
- 背景画像でデザイン性アップ
- PC・スマホ別設定も可能
まずは 色変更から試してみる のがおすすめです。
少しのカスタマイズで、サイト全体の印象は大きく変わります。