ここでは、ヘッダー 横メニュー「ヘッダーメニュー(横列)」にWEBアイコンを表示させる方法を解説します。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google131.png)
![](https://the-affinger.com/wp-content/uploads/2022/01/Google132.png)
![](https://the-affinger.com/wp-content/uploads/2022/01/Google133.png)
ヘッダー横メニューにWEBアイコンを表示させるには、「Font Awesome」のWEBアイコンを使用します。
そのための準備として、
- 「FontAwesome」のアカウント登録
- 使用するためのコードをheadに貼り付ける
この2つを終えていないと「Font Awesome」を使用することができません。
※WEBアイコンを使えるようにする手順は、以下の記事を参考にしてください。
「Font Awesome」を使うための準備ができましたら、ヘッダー横メニューにWEBアイコンを表示させる手順を進めていきましょう。
ヘッダー横メニューにWEBアイコンを表示させる手順
ヘッダー横メニューにWEBアイコンを表示させるパターンは3つ。
- 文字の左側に表示するパターン
- 文字の右側に表示するパターン
- WEBアイコンのみ表示するパターン
![](https://the-affinger.com/wp-content/uploads/2022/01/Google134.png)
![](https://the-affinger.com/wp-content/uploads/2022/01/Google135.png)
![](https://the-affinger.com/wp-content/uploads/2022/01/Google137.png)
それでは手順を解説していきます。
WordPressのメニューのカスタマイズを開く
1.まずはWordPressのダッシュボードメニューの「外観」→「カスタマイズ」の順にクリック。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google100.png)
2.カスタマイズのページが開くので、「メニュー」をクリック。
![](https://the-affinger.com/wp-content/uploads/2022/01/webicon1.png)
3.ヘッダー横に表示させるメニューを選択します。
ここでは、あらかじめ作っておいた「PCヘッダーメニュー(横列)サンプル」を使用します。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google138.png)
4.メニューの項目の右にある三角のアイコンをクリックし、「追加設定オプション」を表示させる。
この中にある「ナビゲーションラベル」にWEBアイコンのコードを入力します。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google139.png)
この状態のまま、「Font Awesome」へ行き、コードを取得しましょう。
「Font Awesome」でWEBアイコンのコードを取得する
1.下のURLをクリックし「Font Awesome」を開きます。
2.上部に表示されている「Icons」をクリック。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google140.png)
3.左メニューの「Free」をクリック。
「Free」を押すことで、無料のWEBアイコンのみが表示されます。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google141.png)
4.検索ボックスに、「Home」と入力すると、Homeに関連するWEBアイコン候補が表示されるので、使用したいアイコンをクリックします。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google142-1024x574.png)
5.WEBアイコンの詳細ページが開くので、赤で囲んでいるコードをクリック。
すると、コードがクリップボードに自動でコピーされます。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google143.png)
WEBアイコンのコードをコピーできたら、WordPress側の設定に戻ります。
WEBアイコンのコードを貼り付ける
先ほど開いていたメニューの「追加設定オプション」に戻ります。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google139.png)
1.ナビゲーションラベルに入力してあるテキストの前に、先ほどコピーしたWEBアイコンのコードを貼り付けます。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google145.png)
2.すると、テキストの左側にWEBアイコンが表示されました。
ただ、この状態だとWEBアイコンとテキストの間隔が狭いので、間に半角スペースを入れるとちょうどいいバランスになります。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google147.png)
![](https://the-affinger.com/wp-content/uploads/2022/01/Google134.png)
WEBアイコンを右側に表示させたい場合
WEBアイコンを右側に表示させるのは簡単です。
先ほどはテキストの左側にWEBアイコンのコードを挿入したんですが、これを右側に挿入するだけです。
WEBアイコンとテキストの間に半角スペースを入れるのも同じです。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google148.png)
![](https://the-affinger.com/wp-content/uploads/2022/01/Google135.png)
WEBアイコンのみ表示させたい場合
WEBアイコンの表示させたい場合は、
ナビゲーションラベルに入力しているテキストを削除し、WEBアイコンのコードのみ入力すればOKです。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google150.png)
![](https://the-affinger.com/wp-content/uploads/2022/01/Google137.png)
アイコンだけだとなんだか寂しい…という場合は、タイトル属性にテキストを入力し、サブタイトルを表示させるのもありです。
![](https://the-affinger.com/wp-content/uploads/2022/01/Google152.png)
![](https://the-affinger.com/wp-content/uploads/2022/01/Google128.png)
まとめ
今回は、ヘッダー 横メニューにWEBアイコンを表示させる方法について解説しました。
手順を簡単にまとめると、
- 「Font Awesome」を使うための準備をする
- 使いたいWEBアイコンのコードをコピーする
- ナビゲーションラベルにWEBアイコンのコードを貼り付ける
たったこれだけです。
「Font Awesome」を使うための準備は少しややこしいので、「参考:ヘッダーメニューにWEBアイコンを使うための方法を2つ解説」を見ながら進めてくださいね。