WordPressでヘッダーメニューにアイコンを表示させる方法のタイトル画像

こんにちは、第26回のウェブ講座では、 WordPressヘッダーメニュー(ヘッダーナビゲーション)にアイコンを表示させる方法を解説していきたいと思います。

表示させるアイコンはFont Awesome/フォントオーサムのアイコンです。

このウェブ講座は基本的にWordPressにテーマLightningを導入してのウェブ作成方法についての講座なのですが、前回の第25回で「Lightningでヘッダーメニューにアイコンを表示させる方法」を解説しました。Lightningはテーマにフォントオーサムを使える機能があらかじめ備わっていますので、簡単にヘッダーメニューにアイコンを表示させることができました。

では、他のテーマの場合はどうなのだろうと思って調べてみましたら、フォントオーサムのプラグインをインストールすれば、Lightning同様、簡単にヘッダーメニューにアイコンを表示させることができると分かりました。

そこで、私のウェブサイトの一つにWordPressにテーマCocoon(コクーン)を導入したウェブサイトがありましたので、そのウェブサイトにフォントオーサムのプラグインをインストールして、ヘッダーメニューにアイコンを表示させてみました。

その過程をキャプチャ画像を交えながら「WordPressでヘッダーメニューにアイコンを表示させる方法」として解説してみたいと思います。

Font Awesome/フォントオーサムのプラグインをインストールします

こちらがWordPressにテーマCocoonを導入して作った私のウェブサイトです。
テーマLightningに移行する前のウェブサイトです。
このサイトのヘッダーメニューにフォントオーサムのアイコンを表示させてみたいと思います。

テーマCocoonで作ったウェブサイト

では、WordPressのダッシュボードにログインし、
[プラグイン]

[新規追加]をクリックします。

ワードプレスのダッシュボードで「プラグイン」→「新規追加」をクリックするキャプチャ画像

「プラグインを追加」画面になります。
①の検索窓へ[font awesome]と入力します。

ワードプレスのプラグイン追加画面

①の検索窓へ[font awesome]と入力すると、
②へ「Font Awesome」が表示されますので
③の[今すぐインストール]ボタンをクリックします。

プラグイン追加画面でfont awesomeを検索して表示されたキャプチャ画像

インストールが終わりましたら
[インストール]ボタンが「有効化」ボタンに変わりますので、
その[有効化]ボタンをクリックします。

font awesomeのインストールが終わったので「有効化」をクリックするキャプチャ画像

①有効化が終わり[有効]と表示されました。
②の[インストール済みプラグイン]をクリックします。

font awesomeのが有効化されたので「インストール済みプラグイン」をクリックするキャプチャ画像

[インストール済みプラグイン]一覧のページが表示されますので、
「Font Awesome」[設定]をクリックします。

font awesomeの設定をクリックするキャプチャ画像

「Font Awesome」の設定画面になります。
基本的には初期設定のままでよいようです。
ただ、一番下の「Older Version Compatibility」は[Off]にした方がサイトの表示スピードが若干早くなるので、[Off]にした方が良いということを書かれていた方もいらっしゃいました。

以上で、Font Awesome/フォントオーサムのプラグインのインストールは完了です。

では、フォントオーサムのウェブサイトへアクセスして、
使いたいアイコンを探しましょう。

「Font Awesome」でアイコンのHTMLコードをコピーします

WordPress側でフォントオーサムを使える環境が整いましたので、
フォントオーサムのウェブサイトへアクセスしてアイコンのHTMLコードをコピーしてきます。

フォントオーサムのウェブサイト
https://fontawesome.com/

フォントオーサムのウェブサイト、トップページのキャプチャ画像

トップページにアカウント作成を促す「Start For Free」のボタンがありますが、
アカウントを作成することなくFreeの素材は利用することができます。
ですのでアカウントは作らないで作業を進めます。


トップページの[虫メガネ/検索]ボタンをクリックします。

フォントオーサムのトップページでサーチ(検索)のアイコンをクリックするキャプチャ画像

「アイコンの検索画面」になります。
使いたいアイコンの探し方は、
検索窓にキーワードを入力して検索するか、
アイコン表示画面を下にスクロールして探す、
この二つの方法で探すことができます。

検索画面でアイコンを探すキャプチャ画像

まずは、ヘッダーメニューの「ホーム」の横に表示するアイコンが欲しいのですが、
ちょうど一番最初の場所に「house」というアイコンがありましたので、
これを使いたいと思います。
「house」をクリックします。

ヘッダーメニューの「ホーム」に表示したいアイコンとして「house」をクリックするキャプチャ画像

すると、アイコンのHTMLコード取得のウィンドウが開きます。
選択されているアイコンは、[Classic – Solid]ですが、
①の部分で少し違うデザインの[house]アイコンを選択することもできます

アイコン「house」のHTMLコードを取得する画面のキャプチャ画像

今回は、[Classic – Solid]の[house]アイコンを使いたいので、
HTMLコードをクリックしてコピーします。
(クリックするとコピーされるようになっています)

アイコンのHTMLコードをクリックしてコピーするキャプチャ画像

HTMLコードをコピーしたら、
WordPress側に戻ります。

WordPressのメニュータイトルへアイコンのHTMLコードをペーストします

フォントオーサム側でコピーしたアイコンのHTMLコードを
WordPressのメニュー設定でペーストします。

では、WordPressのダッシュボードで、
[外観]

[メニュー]をクリックします。

ダッシュボードで「外観」→「メニュー」をクリックするキャプチャ画像

「ホーム」の横へ[house]アイコンを表示させたいので、
「ホーム」の[▼]をクリックします。

メニュー設定の「ホーム」の詳細設定を開くキャプチャ画像

設定のウィンドウが開きますので、
①ナビゲーションラベルの「ホーム」の前に
コピーしたHTMLコードをペーストします。
[メニューを保存]ボタンをクリックします。

フォントオーサムのHTMLコードを「ホーム」の前にペーストするキャプチャ画像

アイコンが表示されたかウェブサイトで確認してみます。
表示されていました^^

ウェブサイトのヘッダーメニューにアイコンが表示されたキャプチャ画像

子ページのメニュータイトルにもアイコン表示できました

ヘッダーメニューに子ページ表示されている方もいらっしゃると思います。
子ページのメニュータイトルにもアイコンが表示されるのか興味がおありかと思います。

私のこのウェブサイトにも子ページがありますので、
子ページのメニュータイトルにもアイコンが表示されるのかを試してみたいと思います。

「ウェブ制作」という親ページの下に
「HTMLサイト→WPへの移行」という子ページがあります。
この子ページへワードプレスのアイコンを表示させてみたいと思いますので、
ナビゲーションラベルのタイトルの前に
ワードプレスアイコンのHTMLコードをペーストします。
[メニューを保存]ボタンをクリックします。

子ページのメニュータイトルにもアイコンのHTMLコードをペーストしたキャプチャ画像

子ページにアイコンが表示されたかウェブサイトで確認してみます。
表示されていました^^

「HTMLサイト→WPへの移行」の下
「ウェブ+動画」にはユーチューブのアイコンを入れてみました。

子ページのメニュータイトルにアイコンの表示がされたキャプチャ画像

タイトルとアイコンの間に半角スペースを入れて見栄え良く

以上でヘッダーメニューのタイトル横にフォントオーサムのアイコンを表示させることは可能だという事が分かりました。

ただ、アイコンとタイトルの文字が接近しすぎて見た目が良くないですので、
半角スペースを入れて調整してみたいと思います。

①アイコンのHTMLコードとタイトルの間に半角スペースを入れます
[メニューを保存]ボタンをクリックします。

アイコンとメニュータイトルの間に半角スペースを挿入したキャプチャ画像

3ヶ所に半角スペースが入りました。
デザイン的にバランスが取れて見栄えが良くなったと思います^^

アイコンとメニュータイトルの間に半角スペースが入って見栄えが良くなった画像

以上で、第26回のウェブ講座、

「WordPressでヘッダーメニューにアイコンを表示させる方法」は終了です。
(※テーマはCocoon/コクーンです。他のテーマでも大丈夫だと思います。)

大変お疲れ様でした。 それでは、次回の第27回ウェブ講座でまたお会いしましょう~^^