ヘッダー

ヘッダーメニュー(グローバルナビゲーションメニュー)を設定する

2021年3月6日

AFFINGERのヘッダーを設定する。今回はPCのヘッダーメニュー(一般名:グローバルナビゲーションメニュー)を設定する方法についてご説明します。

ビフォーアフターはこんな感じです。

\ ビフォー /

AFFINGER6:ヘッダーメニュー未設定
ヘッダーメニュー未設定

\ アフター /

AFFINGER6:ヘッダーメニュー設定後
ヘッダーメニュー設定後
ヘッダーメニュー設定後(拡大)

ヘッダーメニューの設定方法

ヘッダーメニューを作成する

まずはメニューを入れる箱を作ります。ヘッダーメニューを新しく作成しましょう。メニュー設定画面へ行きます。

【ダッシュボード】→【外観】→【メニュー

すでに何かしらのメニューを作成している場合は"新しいメニューを作成しましょう"を押してください。まだメニューを作っていない場合はそのままで。

まず、メニュー構造の"メニュー名"にメニューの名前を入れます。メニューの名前は何でも好きな名前で大丈夫です。ここではそのまま"ヘッダーメニュー"と名付けましました。

次に、メニューの位置を指定します。メニューの位置は"ヘッダー用メニュー"にチェックを付けます。

"メニュー名"と"メニューの位置"を設定したら"メニューを作成"ボタンを押しましょう。これで新しくヘッダーメニューが作成されました!

ヘッダーメニュー設定画面:新しいメニューを作成
ヘッダーメニュー設定画面:ヘッダーメニューを作成

メニューの内容を入れていく

今度はヘッダーメニューの中身を入れていきます。

画面の右側、"メニュー項目を追加"窓からヘッダーメニューに置きたいページを選んでいきます。設置できるのは次のようなリンクです。

  • 固定ページ・・・すでにある固定ページ
  • 投稿・・・すでにある投稿ページ
  • カスタムリンク・・・何でもリンク可能
  • カテゴリー・・・すでにあるカテゴリーページ

ヘッダーメニューに置きたいページにチェックを入れてください。カスタムリンクに関しては"URL"と"リンク文字列"を指定する必要があります。選び終わったら"メニューに追加"ボタンを押しましょう。

選んだ内容が左の窓に反映されます。

ヘッダーメニュー設定画面:メニュー項目を追加
ヘッダーメニュー設定画面:メニュー項目反映

例:カスタムリンクを追加してみる

カスタムリンクを試しに設定します。ホームへ戻るためのホーム項目を作ってみましょう。

"URL"欄にサイトのTOPページのURLもしくは/(スラッシュ)を入れます。"リンク文字列"欄に「ホーム」と入れましょう。記入が終わったら"メニューに追加"ボタンを押します。

ヘッダーメニュー設定画面:カスタムリンクをメニューに追加

例:カテゴリーを追加してみる

カテゴリーをメニューに追加してみます。左の窓にある"カテゴリー"を押して展開させます。するとすでにあるカテゴリーページが出てきます。メニューに追加したいカテゴリーにチェックを入れます。チェックが終わったら"メニューに追加"ボタンを押しましょう。

ヘッダーメニュー設定画面:カテゴリーをメニューに追加

最後に"メニューを保存"ボタンを押したらヘッダーメニューが表示されます。ここから先はお好みで設定してください。

ヘッダーメニューが表示された状態(装飾なし)

文字の横にアイコンを表示する

メニューの各項目の先頭にアイコンを表示してみます。こんな感じです。

ヘッダーメニューが表示された状態(アイコン)

やり方は簡単です!"ナビゲーションラベル"にコピペしたコードを入れるだけです。試しに「ホーム」の横にお家マークを表示してみたいと思います。

アイコンを探す

まず、FontAwesomeのサイトへ行きましょう。→FontAwesome(Ver4.7) AFFINGER6でFontawesome5を有効化した人はこちら→FontAwesome(Ver5)

そこで使用したいアイコンを探します。

(例)FontAwesomeのサイトに来ました。検索で"home"と入力。すると、おうちのアイコンが出てきました。

FontAwesome4.7のサイトに行く
FontAwesome4.7のサイトでアイコンを検索

<i>コードをコピー

使用したいアイコンが見つかったらそのアイコンのページへ移動します。そこに<i class=....で始まるコードがあるのでそのコードを右クリックでコピーします。

(例)アイコンをクリックしてアイコンのページに移動しました。<i>タグがありますね。<i>タグをコピーしましょう。

FontAwesome4.7のサイトでコードをコピー

"ナビゲーションラベル"にペースト

メニューの設定画面に戻ります。"ナビゲーションラベル"にそのコードをペーストしてください。直にペーストして大丈夫です。

最後に"設定を保存"ボタンを押しましょう。これでメニューにアイコンが反映されました。

ヘッダーメニュー設定画面:ナビゲーションラベルにFontAwesomeのコードを追加

他のメニューも同じ要領でアイコンを設置しました。

ヘッダーメニュー:アイコンが表示された状態

色やスタイルを変更する

背景色や文字色などはカスタマイズ画面から変更することが可能です。

【ダッシュボード】→【外観】→【カスタマイズ】 > "-各メニュー設定" > "PCヘッダーメニュー"

ヘッダーメニュー:カスタマイズ画面(色やセンター寄せを設定)
ヘッダーメニュー:カスタマイズ画面(色やセンター寄せを設定)

メニューの色を変えて、センター寄せ、太字にしてみました。

ヘッダーメニュー完成(背景色、センター寄せ、太字を設定)

場所を変更する

ヘッダーメニューは初期設定ではヘッダー画像の上(ロゴの下)に表示されていますが、場所を変えることもできますよ。"AFFINGER管理"の"メニュー"設定画面へ行きましょう。

【ダッシュボード】→【AFFINGER管理】→【メニュー】 > "PC用グローバルメニュー"

一番上の"PC用グローバルメニュー"を見てください。初期設定では" PC用メインメニューを上に表示する"にチェックが入っているはずです。 "PC用メインメニューを下に表示する"に変更するとヘッダーメニューがヘッダー画像の下側に移動します。

また、"PC用メインメニューを表示しない"にチェックを入れるとヘッダーメニューを非表示にできます。

ヘッダーメニューAFFINGER管理画面:ヘッダーメニューの位置を変える
ヘッダーメニューをヘッダー画像の下に表示した状態
PC用メインメニューを下に表示する
ヘッダーメニューを非表示にした状態
PC用メインメニューを表示しない

さらに、ヘッダーメニューをロゴの右側に移動させることも可能です。方法については別の記事でまとめているのでそちらを参考にしてください。→ヘッダーのカスタマイズ:ヘッダーメニューをロゴの下からロゴの横に移動する【ヘッダー用メニュー(横列)】の設定方法

ヘッダーメニューをロゴの右に移動させた状態
PC用メインメニューをロゴの右側に移動

以上でヘッダーメニューの設定方法の説明は終わりです。次はロゴの右部分を設定しましょう。

NEXT:ロゴの右部分の設定はこちら

-ヘッダー
-