ここでは、ヘッダー 横メニュー「ヘッダーメニュー（横列）」にWEBアイコンを表示させる方法を解説します。
ヘッダー横メニューにWEBアイコンを表示させるには、「Font Awesome」のWEBアイコンを使用します。
そのための準備として、
- 「FontAwesome」のアカウント登録
- 使用するためのコードをheadに貼り付ける
この2つを終えていないと「Font Awesome」を使用することができません。
※WEBアイコンを使えるようにする手順は、以下の記事を参考にしてください。
「Font Awesome」を使うための準備ができましたら、ヘッダー横メニューにWEBアイコンを表示させる手順を進めていきましょう。
ヘッダー横メニューにWEBアイコンを表示させる手順
ヘッダー横メニューにWEBアイコンを表示させるパターンは3つ。
- 文字の左側に表示するパターン
- 文字の右側に表示するパターン
- WEBアイコンのみ表示するパターン
それでは手順を解説していきます。
WordPressのメニューのカスタマイズを開く
１．まずはWordPressのダッシュボードメニューの「外観」→「カスタマイズ」の順にクリック。
２．カスタマイズのページが開くので、「メニュー」をクリック。
３．ヘッダー横に表示させるメニューを選択します。
ここでは、あらかじめ作っておいた「PCヘッダーメニュー（横列）サンプル」を使用します。
４．メニューの項目の右にある三角のアイコンをクリックし、「追加設定オプション」を表示させる。
この中にある「ナビゲーションラベル」にWEBアイコンのコードを入力します。
この状態のまま、「Font Awesome」へ行き、コードを取得しましょう。
「Font Awesome」でWEBアイコンのコードを取得する
１．下のURLをクリックし「Font Awesome」を開きます。
２．上部に表示されている「Icons」をクリック。
３．左メニューの「Free」をクリック。
「Free」を押すことで、無料のWEBアイコンのみが表示されます。
４．検索ボックスに、「Home」と入力すると、Homeに関連するWEBアイコン候補が表示されるので、使用したいアイコンをクリックします。
５．WEBアイコンの詳細ページが開くので、赤で囲んでいるコードをクリック。
すると、コードがクリップボードに自動でコピーされます。
WEBアイコンのコードをコピーできたら、WordPress側の設定に戻ります。
WEBアイコンのコードを貼り付ける
先ほど開いていたメニューの「追加設定オプション」に戻ります。
１．ナビゲーションラベルに入力してあるテキストの前に、先ほどコピーしたWEBアイコンのコードを貼り付けます。
２．すると、テキストの左側にWEBアイコンが表示されました。
ただ、この状態だとWEBアイコンとテキストの間隔が狭いので、間に半角スペースを入れるとちょうどいいバランスになります。
WEBアイコンを右側に表示させたい場合
WEBアイコンを右側に表示させるのは簡単です。
先ほどはテキストの左側にWEBアイコンのコードを挿入したんですが、これを右側に挿入するだけです。
WEBアイコンとテキストの間に半角スペースを入れるのも同じです。
WEBアイコンのみ表示させたい場合
WEBアイコンの表示させたい場合は、
ナビゲーションラベルに入力しているテキストを削除し、WEBアイコンのコードのみ入力すればOKです。
アイコンだけだとなんだか寂しい…という場合は、タイトル属性にテキストを入力し、サブタイトルを表示させるのもありです。
まとめ
今回は、ヘッダー 横メニューにWEBアイコンを表示させる方法について解説しました。
手順を簡単にまとめると、
- 「Font Awesome」を使うための準備をする
- 使いたいWEBアイコンのコードをコピーする
- ナビゲーションラベルにWEBアイコンのコードを貼り付ける
たったこれだけです。
「Font Awesome」を使うための準備は少しややこしいので、「参考：ヘッダーメニューにWEBアイコンを使うための方法を２つ解説」を見ながら進めてくださいね。
メニューまわりのアイコンをもっと増やしたい方向けに、自作SVGアイコンを当サイトの購入特典で配布しています。
当サイト限定の購入特典（主な内容）
- アイコン図鑑（オリジナルのSVGアイコン・4スタイル・商用利用OK）
- アイキャッチ工房（ブラウザだけで記事のアイキャッチを作成）
- AIライティングプロンプト大全（記事の中身を作るプロンプト集）
内容と受け取り方は AFFINGER7購入特典まとめ（当サイト限定特典の全内容） にまとめています。