グローバルメニューをアイコン付き2行にする方法【Font Awesome 6】Cocoon編

gloval-menu-jpg超初心者ワードプレス

グローバルメニューをアイコン付きの2行にしたいけど、有料のテーマじゃないと無理かな?

 

kつま
kつま

いえいえ、無料テーマのCocoonならめんどうな初期設定なしで

   

アイコンコードを選んで貼るだけで簡単にオリジナルのグローバルメニューが作れますよ!

 

 

この記事では「Font Awesome 6」という無料サイトからアイコンコードを取得して

グローバルメニューにアイコンを付けて2行にする方法を図解入りで解説します!

 

 

Font Awesome(フォントオーサム)とは?
  • Webサイトやスマホアプリ用のアイコンを表示させるWebサービス
  • 無料と有料のアイコンがあり、無料でも1000種類以上ある(商用利用も可能です)拡大してもブレずに綺麗
  • Cocoon利用者は、headタグにコードを貼り付けるめんどうな初期設定をしなくても、お好みのコードを貼り付けるだけですぐに使える

 

Kつま
Kつま

それではこのようなグローバルメニューを作っていきます!

menu-jpg

そうそう、こんな感じのグローバルメニューを作りたい!!

 

Kつま
Kつま

初心者から一歩、上級者に進んだ感じで嬉しくなりますよね!!

 ここではよく使われている「ホーム」のアイコンで手順を進めていますが、手順さえ分かればあなたのお好みのアイコンで作成できます!!

  

この記事はこんな方にオススメ!!
  • ワードプレスを始めたばかり
  • 図解多めで説明して欲しい
  • CSSの編集など、難しい事はしたくない

こちらの記事はグローバルメニューにいくつか項目が既に設定されてる前提でお進み下さい。

 では、さっそくやってみましょう!!

 

⇓⇓⇓【無料30日間聴き放題!!】オーディオブックですきま時間が読書時間に♪⇓⇓⇓
オーディオブック聴き放題なら – audiobook.jp

グローバルメニューにアイコンを入れる方法

 

まずは、このように1行目に「ホーム」のアイコンを入れていきます

【完成図】1行目に「ホーム」のアイコン表示例

werdpress-header-4-jpg

 

アイコンが入るだけで、パッとかわいくなる〜!!

 

Kつま
Kつま

それほど難しくなく初心者でもできるので、ドンドン進めて行きましょう!

1行目に「ホーム」のアイコンを設定する方法

 

ワードプレス管理画面の「cocoon設定」⇒「cocoon設定」⇒「全体」タブを開きます

 

wordpress-side-jpg

 

 

 下の方へスクロールして「サイトアイコンフォント」を探します

「サイトアイコンフォント」を「Font Awesome 5」にチェックを入れて⇒「変更をまとめて保存」をクリックします

 

変更をまとめて保存

 

「Font Awesome 4」でも今回紹介するアイコンは表示されましたが

できるだけ新しいバージョンの方を選んでおきましょう!

 次にワードプレス管理画面の「外観」⇒「メニュー」をクリックします

 

外観⇒メニュー

 

 「メニューを編集」タブを開き

 

「メニューを編集」の項目から「グローバルメニュー(ヘッダーメニュー,フッタ−メニュー)」⇒「選択」をクリックします

 

wordpress-menu-jpg

 

 

すぐ下の「メニュー構造」の「ホーム」右の▼をクリックします(ちなみに、「メニュー名」の項目は任意なので皆さん違います、私は「グローバルメニュー」にしてあります)

 

 

⇓このような画面が開きます

 

ここから別タブを開いて「Font Awesome 6」からアイコンのコードをコピーしに行きます・・・

え〜コードかー、分かるかな?

Kつま
Kつま

心配しなくても大丈夫!!丁寧に説明しますよ(^_^)

では別タブを開き「Font Awesome 6」というサイトから無料のアイコンコードをコピーしに行きます

 

【Font Awesome 6】から「ホーム」のアイコンを取得する方法

 

 では別タブから検索窓に「Font Awesome」と入力してアイコンコードをコピーしに行きます


ここで紹介するのは「Font Awesome ver.6」になります 

 

この「Font Awesome」はとても便利で多くの方が利用しています(無料なのが嬉しい!)

もちろん、有料を使うと沢山のアイコンを利用することができるようになりますが、無料で充分なレベルです♪

ここから「Font Awesome」 のver.6 の使い方を説明していきます!

 

 このような画面に行きます(全部英語です(^_^;))登録等せずにすぐに使えます!

 

左上の検索窓に英語で「home」と入力します。

別のアイコン例

  • プロフィール⇒「people」人っぽい形が出ます
  • お問い合わせ⇒「mail」手紙や紙飛行機等でます
  • サイトマップ⇒「map」サイトマップっぽいアイコンが出ます

 

するとこのような画面になります

 「home」のイメージアイコンが表示されます(黒いのが無料で使えるアイコンです、薄い色のアイコンは有料になります)

 

 私は左上にあった普通の家のアイコンを選びました

font-awesome-2-jpg

 

選んでクリックするとこのような家の拡大画面になるので

 

赤枠で囲った「Start Using This Icon」をクリックします(ちなみに、もっと下へスクロールすると似たような他のアイコンを選ぶこともできます)

  

 

するとポップアップでこのような画面が出てきます

上の黒いバーの部分にアイコンのコードが表示されています

 

 ⇓コードがある部分を拡大するとこのような画面になっています

赤枠で囲った部分(黒いバーの右横にある水色の丸いボタンです)をクリックするとコピーされるので、先程のワードプレスに戻ります

  

 

コピーしたコードを「グローバルメニュー」にペーストする

 

 それでは先程「Font Awesome」でコピーした家「ホーム」アイコンのコードを「ナビゲーションラベル」のホームの前にペーストします。

menu-3-jpg

  

 

先程のコードをペーストして、コードと「ホーム」の間に半角スペースを空けると綺麗に見えます

(半角スペースを空けなくても表示はされますがちょっと、狭い感じになります)

 

この時点で右下の「メニューを保存」をクリックすると

  

 

シンプルだったこのような⇓グローバルメニューが・・・

  

 ⇓このようにアイコンが追加されます

やった−!グローバルメニュ−にアイコンが出てかわいくなった♪

 

Kつま
Kつま

では次はグローバルメニューを2行にしてみましょう!!

グローバルメニューに2行目を入れる方法

では次によく見かけるグローバルメニューの2行目を入れていく手順を紹介します。

【完成図】2行目に「Home」の表示例

 

次はこのように2行目に「Home」と設定していきます(あなたのお好みの言葉でどうぞ(^_^))

難しいの?

Kつま
Kつま

いえいえ、アイコンを入れた時よりずっと簡単に2行目が表示できます

グローバルメニューを2行にする方法

では先程のワードプレス管理画面の「外観」⇒「メニュー」の画面のままになっていると思いますので

 

画面右上にある「表示オプション▼」をクリックして

  

このような画面が開くので「説明」にチェックを入れます

 下へスクロールをしてメニュー構造の「説明」の項目にあなたのお好みの言葉を入れて下さい

  

私はよく見かける英語表記の「Home」を入力してみました

 

 

右下の「メニューを保存」をクリックします

プレビューで見ると、このような感じで2行に表示できます(^_^)

 

やったー!!!2行になった♪

Kつま
Kつま

一連の流れはこのような感じです!

「プロフィール」や「お問い合わせ」もこの繰り返しで作成します

モバイルでの表示はこのような感じになります

 

mobile-icon-jpg

パソコンではグローバルメニューは2行表示になりますが

スマホでは2行には表示されずアイコンのみ追加されていました。

グローバルメニューのアイコン・2行設定の感想

 

Kおっと
Kおっと

でも、グローバルメニューなんてユーザーは気にして無いんじゃない?

Kつま
Kつま

たしかに特に気にして無い人も多いとは思うけど・・・

 

サイト運営者にとっては「お?カスタマイズしてる!!」っと思う部分なんだよね♪ 

  

プロフィールのアイコンが「宇宙人」とかだったりすると

  

それだけで笑える!! 

 

Kおっと
Kおっと

そっか、このカスタマイズがブロガーには喜びでもあるんだね!

 

Kさんち夫婦
Kさんち夫婦

あなたもオリジナルのアイコンで楽しんで下さい♪

  

 

にほんブログ村に参加しています!

⇓⇓クリック応援していただけると嬉しいですヾ(。>﹏<。)ノ゙✧*。

ブログランキング・にほんブログ村へにほんブログ村

 

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