この記事には広告が含まれています。

AFFINGER6:ヘッダーナビゲーションの背景を変更する方法

AFFINGER6:ヘッダーナビゲーションの背景を変更する方法

この記事ではヘッダーナビゲーションの背景の色を変更したり、画像を設定する方法を解説しています。

ヘッダーナビゲーションの背景色を変更するには「外観」→「カスタマイズ」→「ヘッダーナビゲーション」を選択します。

AFFINGER6:ヘッダーナビゲーション

「パソコン」と「スマホ」のどちらを変更するかを選択します。

※ 両方変更したい場合はそれぞれで設定する必要があります。

AFFINGER6:ヘッダーナビゲーション

「背景色」にて変更できます。

AFFINGER6:ヘッダーナビゲーション

背景色を変更するとこんな感じです。

AFFINGER6:ヘッダーナビゲーションでヘッダーの背景を変更した例

グラデーションでオシャレに♪

背景をグラデーションにするとオシャレでお勧めです。

こんな感じや

ヘッダーの背景にグラデーションを設定

こんな感じです。

ヘッダーの背景にグラデーションを設定

グラデーションを横にすることもできます。

ヘッダーの背景にグラデーションを設定
AFFINGER6:ヘッダーナビゲーション(背景画像)

背景画像を設定するとこんな感じです。

ヘッダーに背景画像を設定した例
ハムタ
ハムタ

背景画像の高さは設定しているヘッダーの高さにしましょう。

ヘッダーの高さは「AFFINGER管理」→「ヘッダー」で設定できます。

ヘッダーの幅は1000ピクセル程度がお勧めです。

ヘッダーは目立つ部分なので、オシャレにカスタマイズしたいですよね。

背景色や画像を設定することでオシャレにすることができます。

その他、ヘッダー関係のカスタマイズに関しての別記事も参考にしてみてください。

 ヘッダーカスタマイズまとめ

AFFINGER6:ヘッダーのカスタマイズまとめ【初心者向け】
AFFINGER6:ヘッダーのカスタマイズまとめ【初心者向け】

2025/5/17    

この記事ではAFFINGER6で可能なヘッダーカスタマイズを初心者向けに解説しています。 AFFINGER6のヘッダーカスタマイズは「AFFINGER管理」→「ヘッダー」画面にて行います。 AFFIN ...

 タイトル横にアイコンロゴを設定する方法

AFFINGER6:サイトタイトル横にアイコンロゴを設置する方法
AFFINGER6:サイトタイトル横にアイコンロゴを設置する方法

2025/5/17    

この記事では下の画像ようなサイトタイトル横にアイコンロゴを設置する方法を初心者向けに解説しています。 サイトタイトル横にアイコンロゴを設置する方法 ① 「外観」→「カスタマイズ」を選択します。 ② 「 ...

 ヘッダー下にスライドショーを設置する方法

AFFINGER6でヘッダー下にスライドショーを設置する方法
AFFINGER6でヘッダー下にスライドショーを設置する方法

2025/5/17    

この記事では、下の画像のようにヘッダー下にスライドショーを設置する方法を初心者向けに解説しています。 ヘッダー下にスライドショーを設置する方法 「AFFINGER管理」→「ヘッダー下/おすすめ」→「サ ...

 ヘッダー下にヘッダーカードを表示させる方法

AFFINGER6:ヘッダー下にヘッダーカードを表示させる方法
AFFINGER6:ヘッダー下にヘッダーカードを表示させる方法

2025/5/17    

この記事ではAFFINGER6(アフィンガー6)でヘッダー下にヘッダーカードを表示させる方法を初心者向けに解説しています。 こんな感じのヘッダーカードです。 ヘッダーカードの設定方法 ヘッダーカードは ...

 サイトタイトルの色を変更する方法

AFFINGER6:サイトタイトルの色を変更する方法
AFFINGER6:サイトタイトルの色を変更する方法

2025/5/16    

サイトタイトルの色を変更する解説記事になります。 こちらの赤枠の部分です。 サイトタイトルの色を変更する手順 「外観」→「カスタマイズ」を選択 「ヘッダーナビゲーション」を選択 「パソコン」or「スマ ...

AFFINGER6の使い方については、このブログで詳しく解説しています。

AFFINGER6の使い方【まとめ】-初心者向けガイド-
AFFINGER6の使い方【まとめ】-初心者向けガイド-

2025/5/14    

AFFINGER6の使い方に関するまとめ記事です。 記事数が多いので、知りたい内容を目次から探してみてください。 設定に関する使い方 インストールの方法 AFFINGER6を使えるようにするまでの手順 ...

【知っておくべき!】AFFINGER6の購入方法と購入プランの選び方-⑤種類から最適を選択!

2025/5/16    

AFFINGER6を使ってみたい! という方に ちょっと待ってください! AFFINGER6を購入する際には複数のプランが存在しますので、自分の取り組み方に合った購入方法を選択した方がお得に購入できま ...

AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説
AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説

2025/5/20  

AFFINGER6を使ってみたい!気になる!という方向けに AFFINGER6ってどんなテーマ? AFFINGER6でどんなことができるの? AFFINGER6を使うにはどうすればいいの? といった内 ...

(通常版)AFFINGER6と(上位版)AFFINGER6 EXの違い【まとめ】
(通常版)AFFINGER6と(上位版)AFFINGER6 EXの違い【まとめ】

2025/5/16    

AFFINGER6を購入しようと検討している方や既に通常版のAFFINGER6を使用している方で、その違いが気になる方も多いと思います。 そこで、この記事では(通常版)AFFINGER6と(上位版)A ...

AFFINGER6は初心者が購入しても大丈夫?-初心者にお勧めの理由
AFFINGER6は初心者が購入しても大丈夫?-初心者にお勧めの理由

2025/5/16    

WordPressの有料テーマであるAFFINGER6(アフィンガー6)は、「収益化に強い」と評判のテーマです。 ただ、初めてブログを始める初心者にとっては「本当に使いこなせるの?」と不安もありますよ ...

【本音レビュー】AFFINGER6の評判は?実際に使ってわかったメリット・デメリット
【本音レビュー】AFFINGER6の評判は?実際に使ってわかったメリット・デメリット

2025/5/16    

「収益化に強いWordPressテーマ」として有名なAFFINGER6(アフィンガー6)。 ブロガーやアフィリエイターに人気ですが、「評判は本当?」「使いこなせるの?」と不安に感じる方も多いのではない ...

AFFINGER6 vs SWELL|どっちを選ぶべき?徹底比較!
AFFINGER6 vs SWELL|どっちを選ぶべき?徹底比較!

2025/5/9    ,

この記事では、迷ってしまうことの多いテーマ選びについて今回は『SWELL』と『AFFINGER6』の比較ガイドをお届けします。 現在、シェアNo,1の有料テーマである『SWELL』と有名ブロガーさんも ...