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>プライバシーポリシー
と入力しました。
※<>は本来半角ですが、ここに書くとコードとして認識されてしまうため、あえて全角にしています。
すべての設定が完了したら、最後に「メニューを保存」をクリックして、設定はおわりです。
グローバルナビのカスタマイズはお好み次第
ブログ内のメニューを表示する位置や、アイコンの有無などは、ご自身の好みに合わせてカスタマイズしてくださいね。
ただし、デザインに凝りすぎて、他のユーザーから見て分かりにくい表示になってしまわないように、注意しましょう。
コメント