![Lightningでヘッダーメニューにアイコンを表示させる方法のタイトル画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/eye_catch_25-1.jpg)
こんにちは、第25回のウェブ講座では、
WordPress+Lightning(テーマ)でヘッダーメニュー(ヘッダーナビゲーション)にアイコンを表示させる方法を解説していきたいと思います。
表示させるアイコンはFont Awesome/フォントオーサムのアイコンです。
Lightningはプラグインなしでフォントオーサムを利用することができます。
ですので、使いたいフォントオーサムのアイコンのHTMLコードを、使いたい場所へペーストして貼るだけで表示させることができます。
文中にも表示できますし、これからやろうとしているヘッダーメニューへの表示もできます。
今回のウェブ講座では、
最終的には、このようにヘッダーメニューへアイコンを表示させたいと思います。
![ヘッダーメニューにアイコンが表示されているキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_01.jpg)
↑私のウェブ講座用のデモサイトです。
⇒ https://d-elephant.com/demo_7th/
こちらのウェブサイトのヘッダーメニューへフォントオーサムのアイコンを表示させる過程をキャプチャ画像を交えながら解説していきたいと思います。
では、ヘッダーメニューにアイコンが入っていない状態ではじめます。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_02.jpg)
WordPressのメニュー設定でアイコンを入れます
WordPressのダッシュボードにログインし、
[外観]
↓
[メニュー]をクリックします。
![ワードプレスのダッシュボード「外観」→「メニュー」をクリックするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_03.jpg)
すると、メニューの編集画面になりますので、
①がヘッダーナビになっているか確認します。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_04.jpg)
ヘッダーナビになっていない場合は、
①のプルダウンメニュでヘッダーナビを選択し、
②[選択]ボタンをクリックします。
![ヘッダーメニューを選択するキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_05.jpg)
では、最初に「ホーム」にアイコンを表示させたいと思います。
「ホーム」の▼部分をクリックします。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_06.jpg)
するとメニューの設定ウィンドウが開きますので
[ナビゲーションラベル]のホームという文字の前に
フォントオーサムでホームをイメージさせるアイコンを見つけて、
そのアイコンのHTMLコードをコピペします。
![ナビゲーションラベルのホームという文字の前にアイコンのHTMLコードをペーストするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_07.jpg)
では、フォントオーサムへアクセスしましょう。
フォントオーサムで表示させたいアイコンのHTMLコードをコピーします
Font Awesome/フォントオーサムへアクセスします。
https://fontawesome.com/
フォントオーサムはアカウントを作らなくても利用できます。
フォントオーサムへアクセスしましたら、
[サーチ/虫めがね]をクリックします。
![フォントオーサムのウェブサイトのキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_08.jpg)
するとアイコンを探すページになります。
①「検索窓」に欲しいアイコンの単語(Word)を入れて検索してもいいですし、
②表示されているアイコン画面を下にスクロールして探していってもオッケーです。
![フォントオーサムのアイコン検索の画面のキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_09.jpg)
ヘッダーメニューの「ホーム」に使いたいアイコンが、
ちょうど一番最初に表示されていました。
[house]というアイコンです。
カーソルを乗せると背景色が変わります。
そのままクリックします。
![ホームに使いたいアイコンとしてhouseのアイコンがありました](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_13.jpg)
すると、クリックしたアイコンのHTMLコードを取得できるウィンドウが開きます。
![アイコンのコードを取得するウィンドウのキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_14.jpg)
選択したアイコンの横に並んでいる似たようなhouseのアイコンをクリックするとそのデザインのアイコンを選べるようです。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_15.jpg)
私は選択したアイコンでいいので、
HTMLコードをコピーします。
コードをクリックするとコピーされます。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_16.jpg)
WordPressに戻って表示させたいアイコンのHTMLコードをペーストします
WordPressのダッシュボードのメニューに戻ります。
①メニューの「ホーム」のナビゲーションラベル欄内[ホーム]の文字の前に
フォントオーサムでコピーしたアイコンのHTMLコードをペーストします。
②[メニューを保存]ボタンをクリックします。
![メニュー設定のナビゲーションラベルにアイコンのHTMLコードをペーストするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_17.jpg)
すると、メニュー表示のところに、
コピーしたアイコンのHTMLコードも表示されました。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_18.jpg)
では、ウェブサイトでアイコン表示が反映されているか確かめてみましょう。
ちゃんと表示されていました^^
![ウェブサイトのヘッダーメニューのホームにアイコンが表示されたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_19.jpg)
子ページのメニューにもアイコン表示できます
前回の第24回ウェで講座「ヘッダーメニューにサブタイトルを入れる方法」では、
子ページのメニューにはサブタイトルを入れることができませんでした。
ですが、アイコン表示は子ページのメニューにも表示可能なようなのです。
ですので、やってみます。
子ページの「社長あいさつ」の文字の前にアイコンを入れてみたいと思います。
![ウェブサイトのヘッダーメニューで子ページの「社長あいさつ」を表示させたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_20.jpg)
フォントオーサムのウェブサイトで「人」のシルエット的なアイコンを探して表示させたいと思いましたら、「ホーム」に使った[house]アイコンの隣の隣に[user]という人のシルエット的なアイコンがありました。
これを使おうと思います。
[user]をクリックします。
![フォントオーサムのウェブサイトでuserアイコンを見つけたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_21.jpg)
[user]をクリックすると
HTMLコードの取得ウィンドウが開きますので、
HTMLコードをクリックしてコピーします。
![アイコンのHTMLコードをコピーするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_22.jpg)
WordPressのメニュー設定のページに戻って
①「社長あいさつ」のナビゲーションラベル欄内の[社長あいさつ]の文字の前にペーストします。
②[メニューを保存]ボタンをクリックします。
![HTMLコードをワードプレスのメニュー設定でペーストするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_23.jpg)
すると、メニュー表示のところに、
コピーしたHTMLコードも表示されました。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_24.jpg)
では、ウェブサイトでアイコン表示が反映されているか確かめてみましょう。
ちゃんと表示されていました^^
![ヘッダーメニューの子ページタイトルにもアイコンが表示されたキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_25.jpg)
この後、残りのヘッダーメニュー、
「会社案内」「ブログ」「お問い合わせ」にも
各々アイコンを入れてみました。
ちなみに、入れたアイコンは以下となっています。
ホーム house <i class="fa-solid fa-house"></i>
会社案内 building <i class="fa-solid fa-building"></i>
社長あいさつ user <i class="fa-solid fa-user"></i>
ブログ pen-to-square <i class="fa-solid fa-pen-to-square"></i>
コンタクト pen-nib <i class="fa-solid fa-pen-nib"></i>
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_01.jpg)
フォントオーサムのバージョン設定とバージョン変更について
すみません、私はフォントオーサムのバージョンについては、
あまり気にしないで使用していたのですが、
(気にしなくても不便なく使えているので^^;)
一応、Lightning側、フォントオーサム側、
両方でのバージョン確認とバージョン変更について最後にふれておきたいと思います。
Lightning側のフォントオーサム・バージョン確認と変更
WordPressのダッシュボードにログインし、
[外観]
↓
[カスタマイズ]をクリックします。
![ワードプレスの「外観」→「カスタマイズ」をクリックするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_26.jpg)
左側のサイドバーにカスタマイズメニューが並んでいますので、
下へスクロールします。
![Lightningのカスタマイズ画面](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_27.jpg)
すると[Lightning Font Awesome]が現れるのでクリックします。
![Lightningのカスタマイズメニューの「Lightning Font Awesome」をクリックするキャプチャ画像](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_28.jpg)
Font Awesomeのバージョン設定の画面になります。
デフォルトでは「5 Web Fonts with CSS」となっています。
![Lightningのフォントオーサムのバージョン設定画面](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_29.jpg)
プルダウンメニューでバージョンなどの設定変更ができます。
私はデフォルトのまま使っています。
![Lightningのフォントオーサムのバージョン設定画面](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_30.jpg)
フォントオーサム側のバージョン確認と変更
フォントオーサムのトップページで
[サーチ/虫めがね]をクリックします。
![フォントオーサムのウェブサイト画面](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_08.jpg)
表示されたアイコン検索ページの右側にバージョン選択のプルダウンメニューがあります。
デフォルトでは[6.3.0]バージョンになっています。
![](https://d-elephant.com/de_2nd/wp-content/uploads/2023/02/menu_icon_31.jpg)
Lightning側で「5 Web Fonts with CSS」(バージョン5)に設定してあるので、
フォントオーサム側も[5.15.4]にするといいのかなと思いつつ[6.3.0]のままで使いたいアイコンを探して使っていますが、特に問題はないです。
たまに、HTMLコードをコピペしても表示されない場合がありますが、その時は違うアイコンを探しています^^;
フォントオーサムのバージョンの違いや、
「Web Fonts with CSS」「SVG with JS」の違いなどにつて詳しく知りたい方は、
Googleなどで検索してお調べいただければと思います。
以上で、第25回のウェブ講座、
「Lightningでヘッダーメニューにアイコンを表示させる方法」は終了です。
大変お疲れ様でした。
それでは、次回の第26回ウェブ講座でまたお会いしましょう~^^