当ページのリンクには広告が含まれています。

AFFINGER 管理【ヘッダー】タブのメニュー設定を完全解説!AFFINGER6

AFFINGER6 管理【ヘッダータブ】メニュー設定を完全解説!

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

AFFINGER 管理 の「 ヘッダー」タブの メニューでできる 詳細設定の内容を初心者さん向けにわかりやすくご紹介します。

AFFINGER 管理の「ヘッダー」では、「ヘッダーナビゲーション・ヘッダーコンテンツ設定・記事スライドショー設定」の「設置位置・表示・非表示・デザイン」を設定できます。

初心者さん向けに、設定内容がどの箇所に反映されるかをわかりやすく解説します。

この記事では、「ヘッダー」のレイアウト設計をスムーズに行うための手助けをします。

こんな方におすすめ!

  • AFFINGER6の初心者さん
  • PCやスマホのヘッダーをカスタマイズしたい

この記事でわかること!

  • AFFINGER 管理:ヘッダータブ(ヘッダー)の概要
  • ヘッダー:ヘッダーナビゲーション
  • ヘッダー画像エリア:ヘッダー画像設定
  • ヘッダー画像エリア:ヘッダーコンテンツ設定
  • ヘッダー画像エリア:記事スライドショー設定
  • まとめ!

それではご覧ください!

初心者でも安心 コスパ最強の洗練されたWordPressテーマ/

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

AFFINGER 管理:ヘッダータブ(ヘッダー)の概要

この章では、AFFINGER 管理:ヘッダータブ(ヘッダー)の概要をご紹介します。

『AFFINGER管理>ヘッダー』をクリックします。

AFFINGER 管理:ヘッダータブ

※ ピンク色の破線部の設定項目を解説します。

※ 本記事の設定では『AFFINGER管理』のメニューを編集します。

ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効 にしてください。◀︎『403 Error』が出た場合。

AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!
AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!

ロリポップ!レンタルサーバーを使用してAFFINGER6(ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない! こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ!

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

ヘッダーナビゲーション

ヘッダーナビゲーションとは、ウェブサイトの最上部(ヘッダー)に配置されているナビゲーションメニューのことで、サイトネーム(ロゴ)やキャッチフレーズと同じレベル(上下位置)に表示されます。

用途は、PCヘッダーメニューと同様にユーザーがサイト内を簡単に移動できるようにするために設置します。

AFFINGER 管理の「メニュー設定:PCヘッダーメニュー」とは別のもので、PCヘッダーメニューより上方に設置できるメニューと考えればOKです。

ヘッダー画像設定

ヘッダーナビゲーション下部のヘッダー領域に、任意の画像を設定することができます。さらに、複数の画像を設定し、スライドショーで順番に表示を切り替えることができまです。これにより、魅力的なヘッダーを作成することができます。

ヘッダー画像に任意のリンクを設定することができ、読者をコンテンツに誘導する幅を持たせることが可能です。

ヘッダーコンテンツ設定

クラシックエディターのみで有効ですが、ヘッダーナビゲーション下部のヘッダー領域に自由にコンテンツを作成して埋め込むことができます。

但し、ヘッダーコンテンツを採用するとヘッダー画像は、非表示となるので注意が必要です。

記事スライドショー設定

ヘッダーナビゲーション下部のヘッダー領域に、任意の記事(アイキャッチ画像とタイトル・メタ説明)を大きくスライドショーで順番に表示して切り替えることができます。

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

この章では、ヘッダーナビゲーションの設定と表示イメージをご紹介します。

べッダーナビゲーション用のメニューに関する設定方法は「PCヘッダーメニューの表示イメージと設定項目」を参考にしてください。

設定手順のイメージは「WordPress管理カスタマイザーで「サイト名(ロゴ)・キャッチフレーズ・メニュー」を準備してAFFINGER管理で表示設定をする」イメージです。

『WordPress管理>ダッシュボード>カスタマイズ>サイト基本情報』で、以下の設定ができます。

  • サイトタイトル(サイト名)
  • キャッチフレーズ
  • サイトアイコン

準備しておきましょう。

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

ヘッダーナビゲーション

  • PC・スマホ共通
  • スマホ(タブレット含む)のみ
  • PCのみ
  • 電話番号を追加する

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

PC・スマホ共通

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

AFFINGER 管理:ヘッダータブ|へッダーナビゲーション|PC・スマホ共通

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

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

設定項目の概要:PC・スマホ共通

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

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

PCトップページ:ヘッダー(headerエリア)|設定箇所のイメージ

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

PCトップページ:ヘッダー(headerエリア)|設定箇所のイメージ|サイト名とキャッチフレーズを上下反対

※ フッターも上下反対になります。

スマホ(タブレット含む)のみ

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

AFFINGER 管理:ヘッダータブ|スマホ(タブレット含む)のみ

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

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

設定項目の概要:スマホ(タブレット含む)のみ

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

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

スマホトップページ:ヘッダー(headerエリア)|設定箇所のイメージ

PCのみ

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

AFFINGER 管理:ヘッダータブ|PCのみ

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

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

設定項目の概要:PCのみ

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

少し、わかりにくい「ヘッダー右ウィジェットとフッター」について…

このサンプルでは「ヘッダー右ウィジェットにヘッダーナビゲーションを設置」しています。デフォルトの設定では、ヘッダー右ウィジェットとフッターが連動しているため、以下の画像のように縦型で表示されます。

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

ヘッダー右ウィジェットとフッター|ヘッダーナビゲーションあり
yajirusi-sita-80x40
ヘッダー右ウィジェットとフッター|ヘッダーナビゲーションなし

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

  • フッターを3列にして、フッターの右側とヘッダーにヘッダーナビゲーションを表示させるとか…
  • ヘッダーナビゲーション非表示にして、フッター専用のナビゲーションにするなど…

慣れてくると色々できるので…最初は『ON』にして非表示がおすすめです。

あわせてご覧ください!

電話番号を追加する

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

AFFINGER 管理:ヘッダータブ|電話番号を追加する

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

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

AFFINGER 管理:ヘッダータブ|電話番号を追加する|設定箇所のイメージ

ヘッダー画像エリア:ヘッダー画像設定

この章では、ヘッダー画像エリア:ヘッダー画像設定の設定と表示イメージをご紹介します。

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

ヘッダー画像設定

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

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

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

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

AFFINGER 管理:ヘッダータブ|ヘッダー画像エリア表示設定

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

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

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

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

設定項目の概要:ヘッダー画像エリア表示設定

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

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

AFFINGER 管理:ヘッダータブ|ヘッダー画像エリア表示設定|設定箇所のイメージ

トリミング(px)

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

AFFINGER 管理:ヘッダータブ|ヘッダー画像設定|トリミング(px)

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

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

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

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

ヘッダー画像のリンク先URL:

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

AFFINGER 管理:ヘッダータブ|ヘッダー画像のリンク先URL:

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

スライドショー設定

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

AFFINGER 管理:ヘッダータブ|スライドショー設定

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

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

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

設定項目の概要:スライドショー設定

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

ヘッダー画像を設置する基本的な手順は、以下の記事でご紹介しています。

あわせてご覧ください!

ヘッダーコンテンツ設定

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

AFFINGER 管理:ヘッダータブ|ヘッダーコンテンツ設定

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

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

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

osaboo
osaboo

記事スライドショー設定

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

AFFINGER 管理:ヘッダータブ|記事スライドショー設定

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

設定項目の概要:記事スライドショー設定

  • ヘッダーに記事をスライドショーで表示する(※画像スライドショーより優先されます)
    • 記事スライドショーを設定する場合は『ON』
      (あまり見かけない設定です…トライするなら慣れてからがおすすめです)
  • サムネイル画像の縦横比設定を反映しない
    • デフォルトでOKです。『OFF』
      (設定する画像が統一されていれば問題ありません)
  • スライドショーの表示方法:
    • 『フェードイン・アウト』『右から左 』『左から右 』
      お好みでOKです。
  • スライドショーの表示速度: 
    • ミリ秒
      『5000〜7000』で調整すると良い感じになります。
  • 表示するカテゴリーID:
    • 『未記入で全てが反映されます』
      お好みでOKです。
  • カテゴリーリンクを非表示
    • デフォルトでOKです。『OFF』
  • 投稿日を非表示
    • お好みでOKです。『ON/OFF』
  •  横並びにする(※表示方法がスライド時のみ)『右から左』『左から右』のみ有効
    • デフォルトでOKです。『OFF』
  •  メイン以外を暗くする
    • デフォルトがおすすめです。『OFF』
  •  スマホ(599px以下)のタイトル背景を暗くする
    • デフォルトがおすすめです。『OFF』
  • スライドショーの矢印アイコン
    • 非表示にする
      • デフォルトがおすすめです。『OFF』
    • カラー
      • ある程度目立つ色にすると良いです。(イエロー・レッド・グリーンなど)
    • スライドショー機能の全停止(画像スライドショー及び記事スライドショーが未使用時のみ選択可)
      • 機能を停止する場合『ON』
        (ワンタッチで全停止できるので重宝します)
記事スライドショーのサンプル

初心者でも安心 コスパ最強の洗練されたWordPressテーマ/

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

まとめ!AFFINGER 管理【ヘッダー】タブのメニュー設定を完全解説!AFFINGER6

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

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

WordPressテーマ

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

action-affinger6-ex-1a

AFFINGER

WordPressテーマ

シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

SWELL

-Basic setting AFFINGER
-,

PAGE TOP