・アイコンを使ってオリジナルのヘッダーメニューを作りたい
このようなお悩みにお答えします。
ヘッダーメニューは、読者が最初に目にする重要な部分です。
分かりやすくオリジナリティあるヘッダーメニューを作れば、読者の利便性をあげることも可能です。
利便性が上がれば、読者の満足度も高まり、自分のブログのファンになってくれることも。
しかし、WordPress初心者にとっては、ヘッダーメニューを自分でゼロから作るのはハードルが高いですよね。
本記事では、特にAFFINGER5（アフィンガー5）のユーザーに向けてヘッダーメニューの作り方を分かりやすく解説していきます。
読み終わるころには、自分だけの愛着あるヘッダーメニューが完成しますよ！
本記事の内容
- AFFINGER5でのヘッダーメニューの作り方
- カラーやアイコンで個性を出すことが可能
本記事を書いた人
WordPress設定の関連記事
続きを見る
【WordPressブログ】お問い合わせフォームの超簡単な作り方【初心者向け】
続きを見る
【雛形コピペOK】プライバシーポリシーのテンプレ【アドセンス対策にも】
WordPressのヘッダーメニューの作り方
WordPressでヘッダーメニューを作る流れは以下の通りです。
- 完成形をイメージする
- カテゴリーを作る
- アイコンを使う準備
- ヘッダーメニューに表示
１つずつ解説していきますね！
WordPressのヘッダーメニューの作り方
①完成形をイメージする
まずはヘッダーメニューの完成形をイメージします。
本記事では、以下のようなヘッダーメニューの作り方をご紹介していきます。
カテゴリー配下にさらにカテゴリーがある場合、分かりやすいようにプルダウン表示にしています。
ちなみに赤枠部分をヘッダーメニューというのですが、「グローバルメニュー」と呼ぶこともあります。
また、AFFINGER5（アフィンガー5）では、ヘッダーメニューは『headerエリア』の一部のことで、以下の図のように構成されています。
- ヘッダー
- ヘッダーメニュー
- headerエリア
上記のように似たような言葉が出てくると混乱するので、この機会に理解しておくと良いですね！
また、項目によって設定できる場所が違うので以下の図も覚えておくと設定変更したい時に便利です。
| 項目 | 設定できる場所 |
| ヘッダーエリア | カスタマイズ→サイト基本情報 カスタマイズ→基本エリア設定→ヘッダーエリア |
| ヘッダーメニュー | カスタマイズ→メニューのカラー設定→PCヘッダーメニュー |
| ヘッダー画像エリア | カスタマイズ→ヘッダー画像 |
| ヘッダー画像 | カスタマイズ→ヘッダー画像 AFFINGER管理→ヘッダー |
| headerエリア | カスタマイズ→基本エリア設定→headerエリア |
| header以下のエリア | カスタマイズ→基本エリア設定→header以下のエリア |
本記事では、ヘッダーメニューの作り方を解説していきますね！
WordPressのヘッダーメニューの作り方
②カテゴリーを作る
ヘッダメニューには、カテゴリを表示させるのが一般的。
まずはカテゴリを作っていきます。
投稿→カテゴリー
①名前②スラッグ③親カテゴリーを記入・選択
・カテゴリーは5つまで
・スラッグは英語で記入
・親カテゴリーを選択
カテゴリーが多いと読者が混乱するので5つ以内を目安にしましょう！
また、スラッグとはURLに適した形式の名前のこと。Google翻訳でカテゴリー名を英語で検索してコピペでOKです。
親カテゴリーは、階層構造にするために必要になります。
WordPressのヘッダーメニューの作り方
③アイコンを使う準備
アイコンには、「Font Awesome」を使います。
Font Awesomeを使うことで、直感的にカテゴリーを認識してもらいやすくなります。
Font Awesomeとは
商標利用可能なWebアイコン。
画像とは違って、拡大しても粗くなることはない。
無料版と有料版がある。
ヘッダメニューに使うアイコンぐらいだと、無料で探せますので安心してください。
Font Awesomeの使い方は、まず以下のコードをコピーします。
<link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" rel="stylesheet">
親テーマのheadタグ内にコピペします
①外観→テーマエディター
②WING-AFFINGER5→テーマヘッダー
③<head>～</head>内にコピペ
WordPressのヘッダーメニューの作り方
④ヘッダーメニューに表示
以下、ヘッダーメニューの作り方を解説していきます。
外観→メニュー
編集するメニューを選択→新しいメニューを作成しましょう
メニュー名を入力→メニューを作成
今回は「サンプル」という名前で進めます
左側カテゴリー→すべて表示
ヘッダメニューに表示したいカテゴリにチェック
メニューに追加
右側に選択したカテゴリが追加されるので、詳しい設定をしていきます。
それぞれのカテゴリーの右側の「▼」をクリック
ナビゲーションラベルを設定
ナビゲーションラベルとは、実際にメニューに表示される名前になります。
アイコンを表示させるには、このナビゲーションラベルを設定していきます。
Font Awesomeでアイコンを検索（英語）
一例として「blog」と検索してみますね。
検索結果が表示されます。
黒色のアイコンは無料、灰色は有料となっています。
気になるアイコンをクリックしてください。
コードをコピー
ナビゲーションラベルにコピペ
メニューを保存して確認すると、アイコンが表示されます。
WordPressのヘッダーメニューのカスタマイズ
ここからは少し応用編です。
WordPressやAFFINGER5（アフィンガー5）を使うことでヘッダーメニューの色々なカスタマイズが可能になります。
具体的には、以下の通りです。
- 子カテゴリー
- スマホメニュー
- カラー設定
１つずつ解説していきますね！
ヘッダーメニューのカスタマイズ
①子カテゴリーを作る
副業→ブログ→収支報告といったように、子カテゴリーを作ることも可能です。
親カテゴリーの数を増やさず、分かりやすい構造にできるので読者の利便性向上につながります。
やり方は「子カテゴリーにしたいカテゴリーをドラックして右にずらす」
ヘッダーメニューのカスタマイズ
②スマホメニュー
ブログの読者は、実はPCよりもスマホから見る人の方が多いです。
実際に当ブログでも７割ぐらいがスマホユーザーです。
ですので、スマホでのメニューを設定することも重要。
スマホメニューとしては以下の２つを設定できます。
- スライドメニュー
- ミドルメニュー
イメージは以下のような感じ
スライドメニュー
ミドルメニュー
スマホメニュー：スライドメニューの作り方
外観→メニュー
メニュー設定→スマートフォン用スライドメニュー
AFFINGER5管理→メニュー→スマホ用スライドメニュー
カスタマイズできる項目は以下の通り
- スマートフォンメニューを表示しない
- 下層リンクを最初から開く
- アイコンデザイン
- メニューの位置
- 検索アイコン
- 追加メニュー1
- 追加メニュー2
スマホメニュー：ミドルメニューの作り方
外観→メニュー
メニュー設定→スマートフォン用ミドルメニュー
AFFINGER5管理→メニュー
その他のスマホメニュー→スマホ用ミドルメニューを表示する
ヘッダーメニューのカスタマイズ
③カラー設定
AFFINGER5（アフィンガー5 ）の機能で、ヘッダーメニューのカラー設定ができます。
外観→カスタマイズ
メニューのカラー設定→PCヘッダーメニュー
こちらで設定できる項目は以下の通りです。
- 背景色
- 背景色（グラデーション上部）
- ボーダー上下色
- ボーダー左右色
- ボーダー右色
- 文字色
統一感を出したいのであれば、背景色を同色にしましょう。
ちなみにどんなカラーが良いか分からない！というからはCOOL COLORというサイトがおすすめです。
万人受けや親近感、クール系など与えたい印象から配色を選ぶことができますよ！
まとめ：WordPressのヘッダーメニューの作り方
本記事の内容をまとめますと、
ヘッダーメニューの作り方
①完成形をイメージする
②カテゴリーを作る
③アイコンを使う準備
④ヘッダーメニューに表示
ヘッダーメニューのカスタマイズ
子カテゴリー
スマホメニュー
カラー設定
ヘッダーメニューは読者が最初に目が留まる重要な部分。
AFFINGER5を使えば、オリジナリティあるヘッダーメニューの作成が可能になります。
お気に入りのデザインができれば、ブログ執筆にも弾みがつくもの。
本記事を参考にして自分だけのデザインを作ってみて下さい！
それでは！
関連記事
続きを見る【WordPressブログ】お問い合わせフォームの超簡単な作り方【初心者向け】
続きを見る【雛形コピペOK】プライバシーポリシーのテンプレ【アドセンス対策にも】
