About this Blog & About me(はじめに)

【Cocoon初心者】グローバルナビ(ヘッダーメニュー)の設置方法とアイコンの付け方【超簡単】

ブログ運営

WordPress・Cocoonなら、「グローバルナビゲーション(ヘッダーメニュー)」も、CSSのカスタマイズなしに設定変更のみで簡単に設置できます。

あわせて、メニュー名にアイコンを表示する方法もご説明します。

一度やり方を覚えれば、どれも簡単にできますが、初めてCocoonを使うひとにとっては、「設定変更はどこから入れば良いのか」「どうやって作れば良いのか」と、なかなか分かりづらいところだと思います。

ソラ
ソラ

できるだけ分かりやすいように、基本的なメニューの作り方から、グローバルナビの背景色の変え方、アイコン(絵文字)の付け方まで、画像付きで詳しくご説明します。

\まだブログを開設していない方へ/
スポンサーリンク

グローバルナビ(ヘッダーメニュー)とは?

ブログのトップページの、サイト名の下、ヘッダーと呼ばれる部分に、

・「プライバシーポリシー」
・「お問い合わせ」
・「カテゴリー別の記事一覧」

などの、主要な記事へ、直接アクセスができるように設置されたメニューのことを、グローバルナビゲーション(通称・グローバルナビ)と呼びます。

初心者の方には「ヘッダーメニュー」と言い換えたほうが、イメージがつきやすいかもしれません。

グローバルナビを設置するメリット

自分のサイト(ブログ)を見にきてくれたひとが、見たいページにすぐアクセスできるユーザビリティの向上になる、というのが一番大きなメリットです。

また、初めて訪れたひとにとっては、そのブログには主にどんなことが書いてあるのか、一目で判断しやすいというメリットも。

MEMO

Googleアドセンス審査の合格を目指す方は、グローバルナビ(ヘッダーメニュー)を整理することも、合格に近づく大きな一歩となります。

\詳しくはこちらの記事で/

グローバルナビ(ヘッダーメニュー)の作り方

ダッシュボードの、「外観」→「メニュー」をクリックする。

つぎの画面で「新しいメニューを作成しましょう」の文字をクリックする。

設定画面1
実際の設定画面

 ↓ ↓

メニュー名に好きな名前(※この名前はブログ上には表示されませんが、後から見ても自分で分かりやすい名前にしましょう)を入力する。

「メニューを作成」をクリックする。

設定画面2
説明に不要な部分は切り取っています

 ↓ ↓

左側 メニュー項目を追加 の項目で、ヘッダーに表示させたいメニューを選択し、「メニューに追加」をクリックすると、右側 メニュー構造 に選択したメニューが表示されます。

右側 メニュー構造 の項目で、メニューの位置(表示させたい場所)を設定します。

最後に「メニューを保存」をクリックします。

設定画面3
実際の設定画面
ソラ
ソラ

グローバルナビ(ヘッダーメニュー)に表示させるページは、「固定ページ」「投稿」「カスタムリンク」「カテゴリー」の4つから選択できます。

※メニューの位置は、今回はグローバルナビ(ヘッダーメニュー)を作成するので、「ヘッダーメニュー」と「ヘッダーモバイルメニュー」にチェックを入れてください。

メニューの位置がよく分からない時は、試しにひとつずつチェックを入れてから、ご自身のブログを開いて、どこに表示されているのか確かめてみてください。

そうすることで、メニューをどこに設置したら良いのか、ということまでだんだん分かってきます。

グローバルナビ(ヘッダーメニュー)の背景色の変更方法

ダッシュボードの、「Cocoon設定」→「ヘッダー」の順にクリックします。

設定画面1

そのまま下のほうまでスクロールして、
 ↓ ↓

設定画面2

この画面で「グローバルナビメニュー」の色と幅を設定できます。

ソラ
ソラ

当サイトの場合は、グローバルナビに背景色はつけていません。
いろいろ設定を変えてみて、ご自身のサイトに合うようにカスタマイズしてくださいね。

メニュー名にアイコン(絵文字)をつける方法

アイコンがどんなものか分からない方は、当サイトのグローバルナビ(ヘッダーメニュー)を参考にしてください。

各メニューの名前の前についている小さなイラストが、アイコンです。

アイコンの探し方

まずは、使用するアイコンを探します。
おすすめは、「Font Awesome 4」というサイトです。

最新版のバージョン5もありますが、Cocoonのデフォルト設定では、バージョン4を使用する設定になっています。

アイコンの付け方

「Font Awesome 4」で、使いたいアイコンをクリックすると、以下のようなコードが表示されます。

参考画像

サイト「Font Awesome 4」より一部抜粋

オレンジの線をひいた部分をコピーしてから、メニューを作成する画面(「外観」→「メニュー」の画面)を開き、

参考画像2

右側「メニュー構造」の下に表示されたメニューの横にある「▽」(展開後は「△」になります)をクリックして、詳細を開きます。

「ナビゲーションラベル」の欄に、先ほどコピーしたアイコンのコードを貼りつけて、コードのすぐ後ろに表示名を入力します

ソラ
ソラ

今回は見本のために、
<i class=”fa fa-info-circle” aria-hidden=”true”></i>プライバシーポリシー
と入力しました。
※<>は本来半角ですが、ここに書くとコードとして認識されてしまうため、あえて全角にしています。

すべての設定が完了したら、最後に「メニューを保存」をクリックして、設定はおわりです。

グローバルナビのカスタマイズはお好み次第

ブログ内のメニューを表示する位置や、アイコンの有無などは、ご自身の好みに合わせてカスタマイズしてくださいね。

ただし、デザインに凝りすぎて、他のユーザーから見て分かりにくい表示になってしまわないように、注意しましょう。

ブログ運営
スポンサーリンク
\シェアしてもらえたら嬉しいです/
ソラのSNSはこちら↓Follow me(^^)/
ソラ

30代。1児の母。FP2級。古のおたく。『日々をたのしく、健康に美しく』を目標に。

このブログでは《美容系多めのおすすめ厳選グッズ》×《オタクの惚れた作品紹介》、その他、子育てのことなど多岐にわたって書いています。

Twitter・note・楽天ROOMなどのフォローもお気軽にどうぞ~!

ソラのSNSはこちら↓Follow me(^^)/
ぐるりのそら

コメント

タイトルとURLをコピーしました