WordPress・Cocoonなら、「グローバルナビゲーション（ヘッダーメニュー）」も、CSSのカスタマイズなしに設定変更のみで簡単に設置できます。
あわせて、メニュー名にアイコンを表示する方法もご説明します。
一度やり方を覚えれば、どれも簡単にできますが、初めてCocoonを使うひとにとっては、「設定変更はどこから入れば良いのか」「どうやって作れば良いのか」と、なかなか分かりづらいところだと思います。
できるだけ分かりやすいように、基本的なメニューの作り方から、グローバルナビの背景色の変え方、アイコン（絵文字）の付け方まで、画像付きで詳しくご説明します。
グローバルナビ（ヘッダーメニュー）とは？
ブログのトップページの、サイト名の下、ヘッダーと呼ばれる部分に、
・「プライバシーポリシー」
・「お問い合わせ」
・「カテゴリー別の記事一覧」
などの、主要な記事へ、直接アクセスができるように設置されたメニューのことを、グローバルナビゲーション（通称・グローバルナビ）と呼びます。
初心者の方には「ヘッダーメニュー」と言い換えたほうが、イメージがつきやすいかもしれません。
グローバルナビを設置するメリット
自分のサイト（ブログ）を見にきてくれたひとが、見たいページにすぐアクセスできる＝ユーザビリティの向上になる、というのが一番大きなメリットです。
また、初めて訪れたひとにとっては、そのブログには主にどんなことが書いてあるのか、一目で判断しやすいというメリットも。
Googleアドセンス審査の合格を目指す方は、グローバルナビ（ヘッダーメニュー）を整理することも、合格に近づく大きな一歩となります。
グローバルナビ（ヘッダーメニュー）の作り方
ダッシュボードの、「外観」→「メニュー」をクリックする。
↓
つぎの画面で「新しいメニューを作成しましょう」の文字をクリックする。
↓ ↓
メニュー名に好きな名前（※この名前はブログ上には表示されませんが、後から見ても自分で分かりやすい名前にしましょう）を入力する。
↓
「メニューを作成」をクリックする。
↓ ↓
左側 メニュー項目を追加 の項目で、ヘッダーに表示させたいメニューを選択し、「メニューに追加」をクリックすると、右側 メニュー構造 に選択したメニューが表示されます。
↓
右側 メニュー構造 の項目で、メニューの位置（表示させたい場所）を設定します。
↓
最後に「メニューを保存」をクリックします。
グローバルナビ（ヘッダーメニュー）に表示させるページは、「固定ページ」「投稿」「カスタムリンク」「カテゴリー」の4つから選択できます。
※メニューの位置は、今回はグローバルナビ（ヘッダーメニュー）を作成するので、「ヘッダーメニュー」と「ヘッダーモバイルメニュー」にチェックを入れてください。
グローバルナビ（ヘッダーメニュー）の背景色の変更方法
ダッシュボードの、「Cocoon設定」→「ヘッダー」の順にクリックします。
そのまま下のほうまでスクロールして、
↓ ↓
この画面で「グローバルナビメニュー」の色と幅を設定できます。
当サイトの場合は、グローバルナビに背景色はつけていません。
いろいろ設定を変えてみて、ご自身のサイトに合うようにカスタマイズしてくださいね。
メニュー名にアイコン（絵文字）をつける方法
アイコンがどんなものか分からない方は、当サイトのグローバルナビ（ヘッダーメニュー）を参考にしてください。
各メニューの名前の前についている小さなイラストが、アイコンです。
アイコンの探し方
まずは、使用するアイコンを探します。
おすすめは、「Font Awesome 4」というサイトです。
最新版のバージョン5もありますが、Cocoonのデフォルト設定では、バージョン4を使用する設定になっています。
アイコンの付け方
「Font Awesome 4」で、使いたいアイコンをクリックすると、以下のようなコードが表示されます。
サイト「Font Awesome 4」より一部抜粋
オレンジの線をひいた部分をコピーしてから、メニューを作成する画面（「外観」→「メニュー」の画面）を開き、
右側「メニュー構造」の下に表示されたメニューの横にある「▽」（展開後は「△」になります）をクリックして、詳細を開きます。
「ナビゲーションラベル」の欄に、先ほどコピーしたアイコンのコードを貼りつけて、コードのすぐ後ろに表示名を入力します。
今回は見本のために、
＜i class=”fa fa-info-circle” aria-hidden=”true”></i＞プライバシーポリシー
と入力しました。
※＜＞は本来半角ですが、ここに書くとコードとして認識されてしまうため、あえて全角にしています。
すべての設定が完了したら、最後に「メニューを保存」をクリックして、設定はおわりです。
グローバルナビのカスタマイズはお好み次第
ブログ内のメニューを表示する位置や、アイコンの有無などは、ご自身の好みに合わせてカスタマイズしてくださいね。
ただし、デザインに凝りすぎて、他のユーザーから見て分かりにくい表示になってしまわないように、注意しましょう。
コメント