グローバルメニューに簡単にアイコンを配置してお洒落に

ヘッダーメニューアイコンを配置してお洒落に

ヘッダーメニューに無料でアイコンを表示するには・・

COTECHI

こんにちは、 COTECHI です。

WordPressのヘッダーメニュー（グローバルメニュー）にアイコンを足して、見やすくお洒落にしたいと思ったことはありませんか？

P－MASTER

う～ん・・有料の WordPressの プラグインを使えば、簡単にできるのですが、お金を払ってまで・・と思ってしまいますね。

COTECHI

そこで、今回は、簡単に無料で、今まで文字だけだったヘッダーメニューに以下のようなアイコンをプラスする方法をご紹介します。

こんな感じにしたいです。↓

ヘッダーメニューの作成時にひと手間を・・

１．WordPressメニューの「外観」から「メニュー」を開きヘッダーメニューの内容を作成します。

２．メニュー名に【ヘッダーメニュー】と入力して「メニューを作成」をクリックします。「メニュー項目を追加」からメニューに並べたいコンテンツを複数選び、「メニューに追加」をクリックします。

３．追加したコンテンツが並んで表示されるので、それぞれの「▼」をクリックして表示名を編集します。

４．Font Awesomeから目的のアイコンを探す・・

サイトのデザインやブログの記事でアイコンを使うとき、よく利用されているサービスとしては「Font Awesome」があります。そこで、無料で使えるWebアイコンサービスのFont Awesomeを使用します。

公式サイトは以下になります。Font Awesome 4 はココ : https://fontawesome.com/v4.7/

５．メニューのナビゲーションラベルに貼り付ける

ここでは、「ナビゲーションラベル」に、先ほどコピーしたアイコンフォントのHTMLソースをペーストした（赤文字部分）後に、表示したい文字を入力します。ここでは半角スペースの後、"HOME"と入力しました。

これで保存すれば出来上がりです。その他のメニューも同じように繰り返しましょう。

ナビゲーションメニューのアイコン大きくしたい＜Cocoonテーマ編＞

2021.8.28

COTECHI こんにちは～、 COTECHI です。 Cocoonにテーマを変えて、ヘッダーをカスタマイズしていたら、なかなか思うようなイメージに近づきません。 みなさんもきっと...