専業ブロガー５年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
ヘッダー＆フッターメニュー
の作成方法について、ブログ初心者さん向けに１からわかりやすく解説していきます
まず、前者の「ヘッダーメニュー」とは…
↑ こちらの ”最上部エリア” に設置するメニューのこと
そして後者の「フッターメニュー」とは、反対に…
↑ こちらの ”最下部エリア” に設置するメニューを指します
ということで、さっそく見ていきましょー🐥
▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。「子テーマ」のインストール＆有効化手順まで
-
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。「子テーマ」のインストール＆有効化手順まで
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります（子テーマまで含めて）
【スマホ用も】AFFINGER6「ヘッダー＆フッターメニュー」の作り方を初心者向けに解説【ACTION／WordPressブログ】
まずは、WordPress管理画面から…
↑ 外観 ＞ メニュー をクリックして、メニュー編集の画面を開きましょう
開いたら、画面中央に表示されている…
↑ こちらの「メニュー名」という入力欄に、これから作るメニューの「タイトル」を入力します
このメニュー名は、あくまで「作成したメニューを自分で管理する用」の名称であり…
実際のブログ画面でユーザーから見られる部分ではない
ため、自身がわかりやすいと思う名称でOKです
任意の「メニュー名」を入力したら、右下の…
メニューを作成
というボタンをクリックしましょう
つづいて、画面の左側にある「メニュー項目を追加」というエリアから…
↑ 今回ヘッダーメニューやフッターメニューとして表示させたい、任意のページを選択していきます
今回は例として、上画像のように【投稿】というタブを開き…
↑ そのなかの「Hello world!」という記事を選んでみます（複数ページの選択も可能です）
選択したいページにチェックを入れたら、「メニューに追加」ボタンをクリックです
ちなみに
「投稿と固定ページの違い」については、こちらをどうぞ ↓（重要です）
-
【2022年】WordPress「投稿・固定ページ」の違いとは？使い分けの実践的なポイントを初心者向けに解説【具体例あり／ブログの記事作り】
続きを見る
すると、メニュー編集の画面中央に「Hello world!」という記事が…
↑ このような「横長のボックス」となって追加されました
つづいて、画面下部にある…
↑「メニュー設定」というエリアで、まず【ヘッダーメニュー】を作りたい場合は…
- ヘッダーメニュー
- スマホミドルメニュー
の２つにチェックを入れます
ちなみに、前者の「ヘッダーメニュー」とは…
【PC画面】で表示させるヘッダーメニュー
のことで、後者の「スマホミドルメニュー」とは…
【スマホ画面】で表示させるヘッダーメニュー
のことを指します
一方で、ヘッダーメニューではなく【フッターメニュー】を作りたい場合は…
- フッターメニュー
- スマホフッターメニュー
の２つにチェックを入れればOKです
補足
複数のページを選択した場合は、さきほどご紹介した「横長のボックス」の順番をドラッグ＆ドロップで入れ替えることで、「ページの並び順」を自由に変更できます
ということで…
ここまでできたら、最後に右下の メニューを保存 ボタンを忘れずにクリックして、このメニュー編集画面における作業は完了です🐣
実際の画面上で確認してみると、【ヘッダーメニュー】の場合…
↑ さきほど選択したサンプル記事「Hello world!」が、ブログ最上部に表示されました
関連
上の画像例では、ヘッダー背景色（ヘッダーメニューのさらに上部エリア）を、解説の便宜上「真っ白」に設定しています
「ヘッダー背景色」の設定方法については、こちらをどうぞ ↓
-
AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
ちなみに！
この【ヘッダーメニュー】や【フッターメニュー】に表示させる各ページの「タイトル」は、任意の表示名に変更することも可能です
さきほどご紹介した手順のなかで…
↑ こちらの「横長のボックス」が中央に追加された際に、その右側にある ▼ をクリックすると…
↑ このように「ナビゲーションラベル」という欄が開くので、こちらにヘッダーメニューやフッターメニューで表示させたい【任意の表示名】を、記事ごとで入力すればOK
改めて実際の画面を確認してみると…
↑ このように、メニュー内で表示される記事タイトル名が変更されました
補足
一度作成したメニューをあとから（ページの追加や表示名の変更など）編集したい場合は…
WordPress管理画面 ＞ 外観 ＞ メニュー
からメニュー編集の画面を再度開き、左上の…
編集するメニューを選択
というタブから、作成済みのメニュー（例 ヘッダーメニューA ）を呼び出せばOKです
※作成済みのメニューが「１件のみ」の状態だと、メニュー編集の画面を開いた時点で自動的に呼び出されます
そしてもう１点！
【スマホ画面】側のヘッダーメニューを表示させるには、ここまでご紹介した「メニュー作成」に加えてもう１つ…
AFFINGER管理
側の設定というのも必要になります
WordPress管理画面から、左下の…
↑「AFFINGER管理」という項目をクリックして、そのなかの…
↑「メニュー」というタブをクリックしましょう
すると…
↑「その他のスマホメニュー」という設定エリアがあるので、そのなかの…
- スマホミドルメニューを表示する
という項目にチェックを入れて、左下の「Save」ボタンをクリックすればOKです
なお、「Save」ボタンで設定を一旦保存してから、再度この項目を見てみると…
↑ このように、【スマホ】ヘッダーメニューの「表示パターン」が選択できるようになるので、お好みでこちらも設定しておきましょう🐥
人気記事
あずきのワードプレスブログ「完全初心者」ガイド！
”全８章” の総合TOPページです
＼ 「なぜ売れないか？」を徹底解析 ／
結果が見えるサイト運営に
✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる！
✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬！
✔ 広告の「クリック回数」や「クリックされたページ」などを自動計測！
AffiliateRun～なぜ売れないか？
PDFマニュアル付き！
公式：「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連：WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です
About me
suzu azuki
あずき鈴々
独立5年目の専業ブロガー / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にいるので覗いてもらえると嬉しいです^^