グローバルメニューをアイコン付きの２行にしたいけど、有料のテーマじゃないと無理かな？
いえいえ、無料テーマのCocoonならめんどうな初期設定なしで
アイコンコードを選んで貼るだけで簡単にオリジナルのグローバルメニューが作れますよ！
それでは⇓このようなグローバルメニューを作っていきます！
そうそう、こんな感じのグローバルメニューを作りたい！！
初心者から一歩、上級者に進んだ感じで嬉しくなりますよね！！
ここではよく使われている「ホーム」のアイコンで手順を進めていますが、手順さえ分かればあなたのお好みのアイコンで作成できます！！
こちらの記事はグローバルメニューにいくつか項目が既に設定されてる前提でお進み下さい。
では、さっそくやってみましょう！！
⇓⇓⇓【無料３０日間聴き放題！！】オーディオブックですきま時間が読書時間に♪⇓⇓⇓
オーディオブック聴き放題なら – audiobook.jp 
グローバルメニューにアイコンを入れる方法
⇓まずは、このように１行目に「ホーム」のアイコンを入れていきます
【完成図】１行目に「ホーム」のアイコン表示例
アイコンが入るだけで、パッとかわいくなる〜！！
それほど難しくなく初心者でもできるので、ドンドン進めて行きましょう！
１行目に「ホーム」のアイコンを設定する方法
ワードプレス管理画面の「cocoon設定」⇒「全体」タブを開きます
⇓下の方へスクロールして「サイトアイコンフォント」を探します
「サイトアイコンフォント」を「Font Awesome 5」にチェックを入れて⇒「変更をまとめて保存」をクリックします
「Font Awesome ４」にチェックを入れたままでも今回紹介するアイコンは表示されましたが
できるだけ新しいバージョンの方を選んでおきましょう！
次にワードプレス管理画面の「外観」⇒「メニュー」をクリックします
⇓「メニューを編集」タブを開き
⇓「メニューを編集」の項目から「グローバルメニュー（ヘッダーメニュー,フッタ−メニュー）ｖ」⇒「選択」をクリックします
すぐ下の「メニュー構造」の「ホーム」右の▼をクリックします（ちなみに、「メニュー名」の項目は任意なので皆さん違います、私は「グローバルメニュー」にしてあります）
⇓このような画面が開きます
ここから別タブを開いて「Font Awesome 6」からアイコンのコードをコピーしに行きます・・・
え〜コードかー、分かるかな？
心配しなくても大丈夫！！丁寧に説明しますよ(^_^)
では別タブを開き「Font Awesome 6」というサイトから無料のアイコンコードをコピーしに行きます
【Font Awesome 6】から「ホーム」のアイコンを取得する方法
では別タブから検索窓に「Font Awesome」と入力してアイコンコードをコピーしに行きます
＞＞＞Font Awesome 6はこちら （公式のページですが時々 文字列がメチャクチャになっている様です。）
☝ここからも 「Font Awesome 6」 へ行けます。私はなかなかバージョン６へ行けない事がありました。
ここで紹介するのは「Font Awesome ver.6」になります
この「Font Awesome」はとても便利で多くの方が利用しています（無料なのが嬉しい！）
もちろん、有料を使うと沢山のアイコンを利用することができるようになりますが、無料で充分なレベルです♪
ここから「Font Awesome」 のver.6 の使い方を説明していきます！
⇓このような画面に行きます（全部英語です(^_^;)）登録等せずにすぐに使えます！
※「登録しないと使えなくなった。」っと言う方もいらっしゃいますが、私は登録せずに使えています。
左上の検索窓に英語で「home」と入力します。
すると⇓このような画面になります
「home」のイメージアイコンが表示されます（黒いのが無料で使えるアイコンです、薄い色のアイコンは有料になります）
⇓私は左上にあった普通の家のアイコンを選びました
選んでクリックすると⇓このような家の拡大画面になるので
赤枠で囲った「Start Using This Icon」をクリックします（ちなみに、もっと下へスクロールすると似たような他のアイコンも提案してくれています）
するとポップアップで⇓このような画面が出てきます
上の黒いバーの部分にアイコンのコードが表示されています
⇓コードがある部分を拡大するとこのような画面になっています
赤枠で囲った部分（黒いバーの右横にある水色の丸いボタンです）をクリックするとコピーされるので、先程のワードプレスに戻ります
⇩こちらが私のヘッダーで使用している家のマークのコードです。
<i class="fas fa-home"></i>
コピーしたコードを「グローバルメニュー」にペーストする
⇓それでは先程「Font Awesome」でコピーした家「ホーム」アイコンのコードを「ナビゲーションラベル」のホームの前にペーストします。
先程のコードをペーストして、コードと「ホーム」の間に半角スペースを空けると綺麗に見えます
（半角スペースを空けなくても表示はされますがちょっと狭い感じになります）
この時点で右下の「メニューを保存」をクリックすると
シンプルだったこのような⇓グローバルメニューが・・・
⇓このようにアイコンが追加されます
やった−！グローバルメニュ−にアイコンが出てかわいくなった♪
Font Awesome のサイトが２０２１年１２月７日時点でバグっていたので私が使用していたコードを貼り付けておきます。私と同じでも気にしないという方はお使い下さい。（2022年1月時点では直っていました）
家のコード
<i class="fas fa-home"></i>
プロフィールの人間コード
<i class="fas fa-user"></i>
お問い合わせのコード
<i class="fas fa-envelope"></i>
サイトマップのアイコンコード
<i class="fas fa-sitemap"></i>
プライバシーポリシーのハートコード
<i class="fas fa-heart"></i>では次はグローバルメニューを２行にしてみましょう！！
グローバルメニューに２行目を入れる方法
では次によく見かけるグローバルメニューの２行目を入れていく手順を紹介します。
【完成図】２行目に「Home」の表示例
次はこのように⇓２行目に「Home」と設定していきます（あなたのお好みの言葉でどうぞ(^_^)）
難しいの？
いえいえ、アイコンを入れた時よりずっと簡単に２行目が表示できます。
グローバルメニューを２行にする方法
では先程のワードプレス管理画面の「外観」⇒「メニュー」の画面のままになっていると思いますので
画面右上にある「表示オプション▼」をクリックして
⇓このような画面が開くので「説明」にチェックを入れます
⇓下へスクロールをしてメニュー構造の「説明」の項目にあなたのお好みの言葉を入れて下さい
⇑私はよく見かける英語表記の「Home」を入力してみました
右下の「メニューを保存」を忘れずにクリックします
⇑プレビューで見ると、このような感じで２行に表示できます(^_^)
やったー！！！２行になった♪
一連の流れはこのような感じです！
「プロフィール」や「お問い合わせ」もこの繰り返しで作成します
モバイルでの表示はこのような感じになります
パソコンではグローバルメニューは２行表示になりますが
スマホでは２行には表示されずアイコンのみ追加されていました。
グローバルメニューのアイコン・２行設定の感想
テーマがCocoon以外だと今までの過程プラス初期設定が必要になります。
つまりCocoonではグローバルメニューにアイコンを入れやすく最初からしてくれています。
使わない手はないですね。
でも、グローバルメニューなんてユーザーは気にして無いんじゃない？
たしかに特に気にして無い人も多いとは思うけど・・・
サイト運営者にとっては「お？カスタマイズしてる！！」っと思う部分なんだよね♪
Twitterでもブログ仲間のブログはよく見に行きます。オシャレにカスタマイズされたグローバルメニューを見るとこの人はサイトを大事に運営してるな。愛着があるんだろうな。なんて思います。
プロフィールのアイコンが「宇宙人」とかだったりすると
それだけで笑える！！
そっか、このカスタマイズがブロガーには喜びでもあるんだね！
あなたもオリジナルのアイコンで楽しんで下さい♪
にほんブログ村に参加しています！
⇓⇓クリック応援していただけると嬉しいですヾ(｡>﹏<｡)ﾉﾞ✧*。
にほんブログ村
