ROAD

【すぐできる】AFFINGER5でヘッダーメニューを設定する方法とカスタマイズ方法!

工場勤務サラリーマンが20万円 稼ぐまでの道のり】 第25話アイキャッチ画像

 

悩むひと
見やすいブログを作るために、ヘッダーメニューを作成したいんだけど..

こんなお悩みを解決します。

AFFINGER5(アフィンガー5)を利用している、多くのブロガーがヘッダーメニューを設置していますよね。以前は私も設置していませんでいたが、必要性を感じ設置したところサイトの回遊率がかなり増えました。

そこで今回は、AFFINGER5でヘッダーメニューを作る方法とカスタマイズ方法、うまく設定できないときの対処法をご紹介します。

 

脳みそ2MBの私ができたので、きっと大丈夫です(>_<)

この記事でわかること

  • ヘッダーメニューの設定とカスタマイズ方法
  • ヘッダーメニューを作る利点
  • 設置できないときの対処法

 

そもそもヘッダーメニューとは?

ヘッダーメニューの正式名称は、『グローバルナビゲーションメニュー』といいます。

いまから作っていく、ヘッダーメニューの完成図はこのようになっています。

ヘッダーメニューの設定の完全画像

 

ヘッダーメニューを作る利点として、カテゴリー別にメニューを作ることでユーザーが気になる記事にアクセスしやすくなり、離脱率を下げることができます。

Enaka Blogのカテゴリー

●ROAD

●BLOG

●OUTDOOR

●Wi-Fi

 

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

ヘッダーメニューを作るためには、まず表示するカテゴリーを作ることが必要です。

それでは順を追って説明していきます。

手順1 カテゴリーをつくる

step
1
ダッシュボードの『投稿』⇒『カテゴリー』をクリックします。

AFFINGER5カテゴリーの作り方の説明画像

step
2
『名前』と『スラッグ』を決めて新規カテゴリー追加をクリックしたらOKです。

AFFINGER5カテゴリーの作り方の確定説明画像

 

カテゴリーに階層構造を作りたい時

⇒『親カテゴリー』から選択

親カテゴリーの作り方

 

これをやっておくだけで、後々かなり楽なのでサクッとやっちゃいましょう♪

 

手順2 表示するカテゴリーを決める

step
1
ダッシュボードから、『外観』⇒『メニュー』をクリックします。

ヘッダーメニューの作り方(外観→メニューを選択)

step
2
編集するメニューで『トップ横並びメニュー(ヘッダー用メニュー)』を選択します。

ヘッダーメニューの作り方(トップ横並びメニュー(ヘッダー用メニュー)の作成)

step
3
メニュー名を決めます。

ヘッダーメニューの作り方(ヘッダーメニュー名の設定)

step
4
作ったカテゴリーから、追加したいものを選択して『メニューに追加』をクリックします。

ヘッダーメニューの作り方(追加するカテゴリーの選択)

step
5
それぞれを追加できたことを右の画面で確認します。

ヘッダーメニューの作り方(追加するカテゴリーの編集画面)

step
6
カテゴリーに階層を付けたい場合は、ドラッグして並び替えます。

ヘッダーメニューの作り方(すべてのカテゴリーを選択)

step
7
『ヘッダー用メニュー』にチェックをいれたらOKです。

ヘッダーメニューの作り方(ヘッダーメニュー作成完了画面)

 

手順3 プレビュー画面を確認する

『ライブプレビューで管理』をクリックします。

ヘッダーメニューの作り方(ヘッダーメニュー作成完了ライブプレビューで確認)

 

設定後のトップページ

ヘッダーメニューの作り方(ヘッダーメニュー作成完了プレビュー画面)

 

これで、ヘッダーメニューの骨組は完成です。

 

ヘッダーメニューのカスタマイズ方法

ここまでの方法は、多くのブロガーさんからも紹介されているのでご存知の方もいらっしゃると思います。

それでは、『ヘッダーメニューのカスタマイズ方法』をご紹介します。

ヘッダーメニューの位置を変更する

現在の設定では、このようにヘッダー画像の下に設置してあります。

ヘッダーメニュー(ヘッダー画像の下)

 

ヘッダー画像の上に設定する方法

step
1
ダッシュボードから『AFFINGER5 管理』をクリックします。

ヘッダーメニューをヘッダー画像の上に表示する方法の手順1

step
2
管理画面が開いたら『メニュー』をクリックします。

ヘッダーメニューをヘッダー画像の上に表示する方法の手順2

step
3
一番上の『PC用メインメニューを上に表示する』にチェックをいれます。

ヘッダーメニューをヘッダー画像の上に表示する方法の手順3

 

設定後のトップページ

ヘッダーメニューをヘッダー画像の上に表示する方法の手順(完成図)

 

アイコンを追加する

現在の設定では、『ROAD』、『BLOG』、『OUTDOOR』、『Wi-Fi』という文字のみの表記となっています。

これを、ROAD』、『BLOG』、『OUTDOOR』、『Wi-Fi』の表記に変えていく方法をご紹介します。

ヘッダーメニュー(アイコン追加前)

 

アイコンを挿入する際は、Font Awesomeという優秀サイトを利用します。

font awesomeのトップ画像

こちらのサイトを利用するためには、前準備として親テーマ(AFFINGER5)のヘッダー部分に下記のコードの貼り付けが必要なためあわせてご紹介します。

前準備

旧Verを利用する場合

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

URL:Font Awesome旧Ver

新Verを利用する場合

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

URL:Font Awesome新Ver

step
1
ダッシュボードから『外観』⇒『テーマエディター』をクリックします。

font awesomeのコード入力場所の説明1

step
2
編集するテーマを選択で『WING-AFFINGER5』を選択します。

font awesomeのコード入力場所の説明2

step
3
右のテーマファイルから、テーマヘッダーをクリックします。

font awesomeのコード入力場所の説明3

step
4
使いたいバージョンに合わせて<head>~</head>の中にコードを貼り付けたら『更新』をクリックします。

font awesomeのコード入力場所の説明4

 

これで、準備OKです!あとは好きなアイコンのコードを貼り付けるだけです♪

step
5
編集するメニューで『ヘッダーメニュー』を選択します。

ヘッダーメニューにアイコンを挿入する方法の手順1

step
6
『ナビゲーションラベル』にコードを追加します。

ヘッダーメニューにアイコンを挿入する方法の手順2

今回追加したアイコン

カテゴリーROADで追加したアイコン

ROAD ⇒ROAD

【旧Ver】 <i class="fa fa-line-chart" aria-hidden="true">

【新Ver】 <i class="fas fa-chart-line"></i>

 

設定後のトップページ

ヘッダーメニューをにアイコンを挿入する方法(完成図)

 

とりあえず、ここまできたらあとはカラー設定です♪

 

カラー設定

ヘッダーメニューのカスタマイズは、すべてAFFINGER5のカスタマイズ画面からできるようになっています。

step
1
『外観』⇒『カスタマイズ』をクリックします。

ヘッダーメニューのカラー設定方法の図説(手順1)

step
2
『[+]メニューのカラー設定』をクリックします。

ヘッダーメニューのカラー設定方法の図説(手順2)

step
3
『ヘッダーメニュー』をクリックします。

ヘッダーメニューのカラー設定方法の図説(手順3)

step
4
色を変更したい項目にいき好みの色に変更します。

ヘッダーメニューのカラー設定方法の図説(手順4)

メモ

●背景色→ヘッダーメニューの背景色

●ボーダー上下色→上下の枠の色

●ボーダー左右色→端の枠の色

●ボーダー右色→カテゴリー間の枠の色

●文字色→文字の色

 

設定後のヘッダーメニュー

ヘッダーメニューのカラー設定方法の図説(設定完了画面)

 

その他カスタマイズ方法

  • グラデーションを横向きにする
  • 一層目のメニューを太文字にする
  • メニューをセンター寄せにする
  • メニューの横幅を100%にする

 

カスタマイズを実行した表示画面

その他のカスタマイズをすべて実行したヘッダーメニューの表示画面

 

設置できないときの対処法

はじめてヘッダーメニューを設置したときに、うまくいかない人向けに対処法をご紹介します。

私もこれらが理由で表示されていませんでしたので、是非ご活用ください。

PC用メインメニューを表示しない設定になっている

 

『AFFINGER5 管理画面』⇒『メニュー』

ヘッダーメニューの設定がうまくいかないときの対処法図説1

この場合は、いくらこれまでの順序でヘッダーメニューを作成しても反映されませんので、ここのチェックを必ず解除してください。

ブログ初心者あるあるだと思うのですが、先人たちのブログを読んで便利と感じた内容について、特に調べずそのまま自分のサイトに落とし込んでいませんでしょうか?

私は完全にそのパターンでした(汗)おかげてデフォルトではない設定に変更していました。

 

カラーが変更できないときの対処法

先ほどヘッダーメニューのカラー設定についてご紹介しましたが、こちらもAFFINGER5の設定次第では変更できない場合があります。

私自身、この問題解決に1時間ほどかかりましたので、その対処法をご紹介します。

step
1
『カスタマイズ』⇒『全体カラー設定』をクリックします。

ヘッダーメニューのカラー設定ができないときの対処法(手順1)

step
2
『全体カラー設定』が(2)になっていないか確認します。

ヘッダーメニューのカラー設定ができないときの対処法(手順2)

ココに注意

ここが(2)になっていると、カラー設定でご紹介した方法をされても絶対に反映されません。

step
3
『全体カラー設定』で(3)に変更します。

ヘッダーメニューのカラー設定ができないときの設定画面(手順3)

変更後の表示画面

この情報は、どのサイトにも載っていなかったので、もしお悩みの方がいらっしゃいましたらご活用ください。

 

まとめ

いかがだったでしょうか。

今回は、AFFINGER5でヘッダーメニューを作る方法とカスタマイズ方法についてご紹介しました。

おそらくみなさんは私より遥かに賢いと思いますので、私のような苦労はないかと思いますが、もし私と同様に設定が反映されなく不安に思ったり、悩まれたりされていましたら、是非今回ご紹介した方法を試してみてください(>_<)

 

それでは、

これからも一緒に楽しくブログ書きましょ(*^▽^*)

記事のまとめ

  • 表示するカテゴリーを決めてからヘッダーメニューを作る。
  • 『メインメニューを表示しない』にチェックがついてないか確認する。
  • 『全体カラー設定』が(2)になっていないか確認する。

 

合わせて読みたい

はじまりの記事

 

  • この記事を書いた人

いなさら

田舎系副業ブロガー|九州の田舎でサラリーマンをしながら発信しています! Enaka Blogでは、『ブログの情報やポケットWi-Fiのこと、アウトドアを中心に発信しています。』 少しでもみなさんのお役に立てれば幸いです!! よろしくお願いします(≧◇≦)

-ROAD

© 2021 Enaka Blog Powered by AFFINGER5