AFFINGER6の管理画面「ヘッダー」タブの設定を完全解説｜使い方とおすすめ設定まとめ
AFFINGER6の管理画面「ヘッダー」タブの設定を完全解説｜使い方とおすすめ設定まとめ

AFFINGER6の管理画面「ヘッダー」タブの設定を完全解説｜使い方とおすすめ設定まとめ

  1. Top Page >
  2. 基本設定（Basic setting） >

基本設定（Basic setting）

AFFINGER6の管理画面「ヘッダー」タブの設定を完全解説｜使い方とおすすめ設定まとめ

2026年3月19日

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6の管理画面「ヘッダー」タブでできる設定を初心者さん向けにご紹介します。

Question

AFFINGER管理の「ヘッダー」タブで…何が設定できるの？どこから変更すればいいの？

AFFINGER6の管理画面「ヘッダー」タブでは、ロゴやメニューの表示・非表示、ヘッダーエリアのデザインなど、サイトの印象を左右する重要な設定がまとめられています。

「設定画面を開いたけど、どこをどういじればいいのか分からない！」という人も多いですよね？！

この記事では、AFFINGER6の管理画面「ヘッダー」タブでできる設定を、初心者さん向けにわかりやすく解説します。

ロゴやメニュー、ヘッダーナビゲーション、スライドショー機能など、設定のポイントと反映場所をひとつずつ丁寧にご紹介します。

初心者さんでも迷わずカスタマイズできるようになりますよ！^^／

こんな方におすすめ！

  • AFFINGER6を使い始めたばかりの初心者さん
  • 管理画面の「ヘッダー」タブで何ができるか知りたい
  • ロゴやメニューの設定方法がよくわからない
  • ヘッダーのデザインを自分好みにカスタマイズしたい
  • 見た目を整えたいけど、どこをどう触ればいいかわからない

この記事でわかること！

  • AFFINGER 管理画面「ヘッダー」タブで設定できる項目の全体像
  • サイト名・ロゴ画像・キャッチフレーズの表示方法
  • ヘッダーナビゲーションの表示設定と使い方
  • スマホ・PCで異なるヘッダーの高さを調整する方法
  • デバイス別（スマホ／PC）に見た目を整えるためのカスタマイズポイント

それではご覧ください。

AFFINGER 管理：ヘッダータブ（ヘッダー）の概要

AFFINGER6では、サイトのロゴやメニュー、ヘッダーバーの表示など、サイトの顔ともいえる「ヘッダー部分」を細かくカスタマイズできます。

この章では、AFFINGER管理画面にある「ヘッダー」タブの場所と、できることの概要をご紹介します。

ヘッダータブの開き方

Menu 『WordPress管理＞ダッシュボード＞AFFINGER 管理＞ヘッダー』をクリックします。

  • ピンク色の破線部の設定項目を解説します。
ヘッダー設定の基本メニューを解説！

各設定項目で、できることを以下に整理しました。^^／

ヘッダーナビゲーション

ヘッダーナビゲーションとは、ウェブサイトの最上部（ヘッダー）に表示されるナビゲーションメニューのことです。サイト名（ロゴ）やキャッチフレーズと同じ高さの位置に表示され、ユーザーがすぐに目にするエリアです。

役割としては、PCヘッダーメニューと同じく、サイト内をスムーズに移動してもらうための案内役。ただし、AFFINGER管理の「メニュー設定：PCヘッダーメニュー」とは別物で、PCヘッダーメニューよりも上の位置に表示されるメニューと考えればOKです。

ヘッダー画像設定

ヘッダーナビゲーションの下部にあるヘッダー領域には、任意の画像を設定することができます。さらに、複数の画像を登録すれば、スライドショー形式で順番に切り替えて表示させることも可能です。

これによって、サイトの第一印象をアップさせる魅力的なヘッダー演出ができます！

また、画像ごとにリンク先を設定することもできるので、読者を特定のページやコンテンツにスムーズに誘導するための導線として活用することも◎。

ヘッダーコンテンツ設定
  • この機能は、クラシックエディター使用時のみ有効です。

ヘッダーナビゲーションの下部にあるヘッダー領域には、自由にコンテンツを作成して埋め込むことができます。テキストや画像、ボタンなどを使って、オリジナルのヘッダーデザインを作ることが可能です。

ただし、この「ヘッダーコンテンツ」を有効にすると、ヘッダー画像は自動的に非表示になるため注意が必要です。

記事スライドショー設定

ヘッダーナビゲーションの下部にあるヘッダー領域には、任意の記事をスライドショー形式で表示することも可能です。

表示されるのは、記事のアイキャッチ画像・タイトル・メタディスクリプション（抜粋文）など。複数の記事を登録すれば、順番に切り替えながらスライド表示されます。

目を引くビジュアルで、おすすめ記事や注目コンテンツをアピールしたいときにぴったりの機能です！

それでは、ここからひとつずつ詳しく見ていきましょう！

ヘッダー

ヘッダーナビゲーション用のメニュー作成方法については、以下の記事で詳しく解説しているので、あわせてチェックしてみてください。

『AFFINGER6のカスタマイズ徹底解説！メインカラー・デザイン・メニュー設定』

設定の流れとしては、まず「WordPressのカスタマイザー」で「サイト名（ロゴ）・キャッチフレーズ・メニュー」を用意しておき、そのあとに「AFFINGER管理」で表示方法を調整するというイメージです。

Menu 『WordPress管理＞ダッシュボード＞外観＞カスタマイズ＞サイト基本情報』で以下を設定します。

  • サイトタイトル（サイト名）
  • キャッチフレーズ
  • サイトアイコン
  • 準備しておきましょう！

この章では、設定項目を以下4つのセクションに分けてご紹介していきます。

ヘッダー

  • ヘッダーナビゲーション：PC・スマホ共通
  • ヘッダーナビゲーション：スマホ（タブレット含む）のみ
  • ヘッダーナビゲーション：PCのみ
  • 電話番号を追加する

それでは順番に見ていきましょう。

❶ ヘッダーナビゲーション：PC・スマホ共通

設定項目の画面は 以下の通りです。

ここでの設定は…デフォルトのままがおすすめです。

設定項目は以下の通りです。

設定項目：PC・スマホ共通

  • サイト名とキャッチフレーズを上下反対にする（フッター連動）
    • お好みでOKです。『ON/OFF』
  • TOPページのh1タグをサイト名に変更する（デフォルトは「キャッチフレーズ」…）
    • デフォルトでOKです。『OFF』
  • トップページのみサイト名（ロゴ）及びキャッチフレーズを非表示
    • デフォルトがおすすめです。『OFF』

設定箇所は、以下の青色部の領域です。

『サイト名とキャッチフレーズを上下反対にする』をONにすると…

フッターも同じように上下反対に表示されます。

❷ ヘッダーナビゲーション：スマホ（タブレット含む）のみ

設定項目の画面は 以下の通りです。

ここでの設定は…ほぼ デフォルトのままがおすすめです。

設定項目は以下の通りです。

設定項目：スマホ（タブレット含む）のみ

  • スマホヘッダーの高さ（px）：
    • デフォルト（100）でOKです。『未記入か１００を入力』（少し幅が広い感じもあるので 『65〜80』で 調整すると良い感じになります）
  • ヘッダー（headerエリア）を表示しない
    • デフォルトがおすすめです。『OFF』
  • フロントページを除く
    • デフォルトがおすすめです。『OFF』
  • ヘッダーにサイト名（またはロゴ）を表示しない
    • デフォルトがおすすめです。『OFF』
  • ヘッダーにキャッチフレーズを表示しない
    • デフォルトがおすすめです。『OFF』(全て非表示にしたい場合は、カスタマイザーで未記入にすればOKです）

設定箇所は、以下の青色部の領域です。

❸ ヘッダーナビゲーション：PCのみ

設定項目の画面は 以下の通りです。

ここでの設定は…ほぼ デフォルトのままがおすすめです。

設定項目の概要は以下の通りです。

設定項目：PCのみ

  • スマホヘッダーの高さ（px）：
    • デフォルト（100）でOKです。『未記入か１００を入力』（少し幅が広い感じもあるので 『65〜80』で 調整すると良い感じになります）
  • ヘッダー（headerエリア）を表示しない
    • デフォルトがおすすめです。『OFF』
  • フロントページを除く
    • デフォルトがおすすめです。『OFF』
  • ヘッダーを分割しない
    • デフォルトがおすすめです。『OFF』（サイト名とキャッチフレーズのみを表示したい場合に『ON』）注意電話番号とヘッダーナビゲーションは非表示のなります。（ヘッダーメニューと合わせて調整しましょう）
  • ヘッダーナビゲーションをセンタリング
    • デフォルトがおすすめです。『OFF』（サイト名とキャッチフレーズのみを表示したい場合に『ON』）注意電話番号とヘッダーナビゲーションは非表示のなります。（ヘッダーメニューと合わせて調整しましょう）
  • ヘッダーにサイト名（またはロゴ）を表示しない
    • デフォルトがおすすめです。『OFF』
  • ヘッダー（及びフッター）にキャッチフレーズを表示しない
    • お好みでOKです。『ON/OFF』
  • ヘッダー右ウィジェットをフッターに表示しない
    • へッダーナビゲーションを設定している場合は『ON』がおすすめです。（フッターの表示が思い通りにいかなかったら…この項目をチェック）
少し、わかりにくい「ヘッダー右ウィジェットとフッター」について…

このサンプルでは「ヘッダー右ウィジェットにヘッダーナビゲーションを設置」しています。

デフォルトの設定では、ヘッダー右ウィジェットとフッターが連動しているため、以下の画像のように縦型で表示されます。

サンプルでは、フッターに表示されるヘッダーナビゲーションを非表示にします。

ヘッダー右ウィジェットをフッターに表示しない『OFF』

ヘッダー右ウィジェットをフッターに表示しない『ON』

フッターにナビゲーションを使う方法として以下のような方法があります。

  • フッターを3列にして、フッターの右側とヘッダーにヘッダーナビゲーションを表示させるとか…
  • ヘッダーナビゲーション非表示にして、フッター専用のナビゲーションにするなど…
  • 慣れてくると色々できるので…最初は『ON』にして非表示がおすすめです。

フッターについて こちらの記事で詳しくご紹介しています。あわせてご覧ください。

AFFINGER6 フッターの設定方法｜定番カスタマイズを初心者向けに解説！

AFFINGER6を使った「フッターのカスタマイズ」をご紹介。定番とされる基本的なフッターの形（サイトタイトル・メニュー・検索・コピーライト）の設定を初心者目線で掘り下げて解りやすく解説。フッターの設定が未設定または迷ったら是非をご覧ください。

❹ 電話番号を追加する

設定項目の画面は 以下の通りです。

個人のサイトでは…不要？

『電話番号を追加する』をONにすると…

ヘッダー画像エリア

この章では、設定項目を以下6つのセクションに分けてご紹介していきます。

ヘッダー画像エリア

  • ヘッダー画像エリア表示設定
  • ヘッダー画像設定：トリミング(px)
  • ヘッダー画像設定：ヘッダー画像のリンク先URL：
  • ヘッダー画像設定：スライドショー設定
  • ヘッダーコンテンツ設定
  • 記事スライドショー設定

それでは順番に見ていきましょう。

❶ ヘッダー画像エリア表示設定

設定項目の画面は 以下の通りです。

カスタマイザーで設定した「ヘッダー画像」の表示・非表示設定ができます。

ヘッダー画像は通常、トップページのみに表示されます。他のページでもヘッダー画像を表示したい場合は、こちらで設定してください。（非表示設定もできます）

ここでの設定は…ほぼデフォルトのままがおすすめです。

設定項目の概要は以下の通りです。

設定項目：ヘッダー画像エリア表示設定

  • 下層ページにも表示
    • お好みでOKです。『ON/OFF』（下層ページのヘッダー部をおしゃれにするには…『ON』）
  • スマホ・タブレット閲覧時は非表示
    • お好みでOKです。『ON/OFF』（デバイスごとにこだわるなら…『ON』）
  •  全て非表示
    • お好みでOKです。『ON/OFF』（ワンタッチで全て隠せるので重宝します）

設定箇所は、以下の青色部の領域です。

❷ ヘッダー画像設定：トリミング(px)

設定項目の画面は 以下の通りです。

カスタマイザーで画像をトリミングする時の初期値を設定できます。カスタマイザーでトリミング範囲の設定ができるため、デフォルトのままでも問題ありません。

以下のサンプルでは、デフォルトのトリミング値を使用して2種類のヘッダー画像を設定しています。

採用している画像サイズは、1200x630（px）をベースに切り取っていいます。（切り取ると自動的にサイズは変更されます）デフォルト：2200x500（px）

ヘッダー画像2つによるスライトショーのサンプルです。

❸ ヘッダー画像設定：ヘッダー画像のリンク先URL：

設定項目の画面は 以下の通りです。

ヘッダー画像をクリックしたときに任意のリンク先に飛ぶ設定ができます。例えば…トップページやtwitter（X）などですね。

❹ ヘッダー画像設定：スライドショー設定

設定項目の画面は 以下の通りです。

サンプル画像（GIFアニメ）のサンプルが、上のような設定になっています。（ちょっとわかりにくいかも？）

ここの設定は、好みによって千差万別のため…色々試してフィーリングにあった設定にしてください。あなたのセンスが光ります（笑）

設定項目の概要は以下の通りです。

設定項目：スライドショー設定

  • ヘッダー画像をスライドショーで表示する（※記事スライドショー有効化時は選択できません）
    • ヘッダー画像のスライドショーを設定する場合は『ON』
  • スライドショーの表示方法: 
    • 『フェードイン・アウト』『右から左』『左から右』お好みでOKです。
  • スライドショーの表示順序:
    • 『ランダム』『画像ID』お好みでOKです。
  • スライドショーの表示速度:
    • ミリ秒『5000〜7000』で調整すると良い感じになります。
  • 横並びにする（※表示方法がスライド時のみ）『右から左』『左から右』のみ有効
    • デフォルトでOKです。『OFF』

ヘッダー画像を設置する基本的な手順は、こちらの記事で詳しくご紹介しています。あわせてご覧ください。

AFFINGER6で“ヘッダー画像”を設定する超基本ガイド（管理画面＆カスタマイザー）

AFFINGER6でヘッダー画像を設定する方法を初心者向けにやさしく解説。管理画面とカスタマイザーの基本手順や注意点も紹介します。

❺ ヘッダーコンテンツ設定

設定項目の画面は 以下の通りです。

クラシックエディタを使ったコンテンツがヘッダーに設定できます。

注意すべき点は、カスタマイザーで設定したヘッダー画像より優先されるため、ヘッダー画像は非表示になります。背景に画像が欲しい場合は、カスタマイザーのheaderエリアで背景画像を設定するなど工夫が必要です。

慣れてからにしよう！最初に手をつけると…ハマるよ。

osaboo ❻ 記事スライドショー設定

設定項目の画面は 以下の通りです。

設定項目の概要は以下の通りです。

設定項目：記事スライドショー設定

  • ヘッダーに記事をスライドショーで表示する（※画像スライドショーより優先されます））
    • 記事スライドショーを設定する場合は『ON』（あまり見かけない設定です…トライするなら慣れてからがおすすめです）
  • サムネイル画像の縦横比設定を反映しない
    • デフォルトでOKです。『OFF』（設定する画像が統一されていれば問題ありません）
  • スライドショーの表示方法:
    • 『フェードイン・アウト』『右から左 』『左から右 』お好みでOKです。
  • スライドショーの表示速度:
    • ミリ秒『5000〜7000』で調整すると良い感じになります。
  • 表示するカテゴリーID：
    • 『未記入で全てが反映されます』お好みでOKです。
  • カテゴリーリンクを非表示
    • デフォルトでOKです。『OFF』
  • 投稿日を非表示
    • お好みでOKです。『ON/OFF』
  • 横並びにする（※表示方法がスライド時のみ）『右から左』『左から右』のみ有効
    • デフォルトでOKです。『OFF』
  • メイン以外を暗くする
    • デフォルトがおすすめです。『OFF』
  • スマホ（599px以下）のタイトル背景を暗くする
    • デフォルトがおすすめです。『OFF』

スライドショーの矢印アイコン

  • 非表示にする
    • デフォルトがおすすめです。『OFF』
  • カラー
    • ある程度目立つ色にすると良いです。（イエロー・レッド・グリーンなど）
  • スライドショー機能の全停止（画像スライドショー及び記事スライドショーが未使用時のみ（選択可）
    • 機能を停止する場合『ON』（ワンタッチで全停止できるので重宝します）

記事スライドショーのサンプルです。

まとめ！AFFINGER6の管理画面「ヘッダー」タブの設定を完全解説｜使い方とおすすめ設定まとめ

AFFINGER6の管理画面で行う『ヘッダータブ：ヘッダー』の各設定項目について初心者さん向けにご紹介しました。WordPressテーマ AFFINGER6専用の拡張機能を有効に使うために、お役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」また、次の記事で…お会いしましょう。＼^^／

＼初心者でも安心！ コスパ最強のWordPressテーマ／

AFFINGER6（通常版）でブログを始める

＼効果測定に必要なプラグインをまとめた特別セット／

ACTION PACK3で収益化を加速する

  • Pinterest

-基本設定（Basic setting） -AFFINGER管理（admin settings）, ヘッダー（Header）

📎📎📎📎📎📎📎📎📎📎
BOT