ブログトップページのヘッダーメニューの横に、アイコンが表示されているのを見たことがありますよね。
文字だけのメニューより、アイコンがある方が、一目でどんなメニューか、読者の人に認識してもらえます。
アイコンがあると、一気にブログらしくなりますね。
今回は、すでにスマホとパソコンのヘッダーメニュー（グローバルメニュー）を、作成済みの人向けに説明するので参考にしてみてください。
ヘッダーメニューにアイコンを表示する方法
まず最初にワードプレスのメニューに、アイコンを表示するための設定を行います。
最新のCDNファイルをコピーする
アイコンを表示するには、こちらのサイトhttps://cdnjs.com/libraries/font-awesomeから、 CDNで読み込む必要があります。
この読み込みを行わないと、アイコンが表示されません。
サイトにアクセスして、一番上にある最新のファイルをコピーします。
上記でコピーしたファイルを、以下の青いラインの部分に、上書きして書き換えます。
青いライン以外の部分は、全て同じです。
<title>Font Awesome</title>
<html>
<head>
<link rel ="stylesheet" href="css/style.css">
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
</html>CCSコードをCocoonのテーマに貼り付ける
次は上記のCCSコードを全てコピーして、Cocoonのテーマ編集画面に貼り付けます。
ワードプレスのダッシュボード画面から、「外観」→「テーマファイルエディター」をクリックします。
右側にある、style.ccsの中から、「tmp-user」→「head-insert.php」をクリックします。
先ほどのCCSコードを全て貼り付けます。
こんな感じです
入力したら、一番下にある、「ファイルを更新」をクリックします。
次は、メニューに使うアイコンを選びます。
Font Awesome アイコンフォントでアイコンコードをコピーする
Font Awesome アイコンフォント一覧
Font Awesomeのサイトにいって、「無料で始める」をクリックします。
「アイコンを探す」をクリックします。
アイコンは、無料と有料の2種類があります。
Free（無料）で検索すれば、無料のアイコンのみが表示されますよ。
無料アイコンはこちら
サイト内の検索窓に、検索したいアイコンの英語名を入力すると、かんたんに使いたいアイコンが出てきます。
たとえば、ホーム画面の場合、「home」と入力すると、家のアイコンが表示されます。
アイコンをクリックすると、コードが表示されるので、コピーします。
<i class="fa-solid fa-house"></i>こちらのサイトから、好きなアイコンを選びましょう。
ワードプレスのメニューにアイコンのコードを貼り付ける
ワードプレスの管理画面にログインして、ダッシュボード画面から、「外観」→「メニュー」をクリックします。
「編集するメニューを選択」から、グローバルメニューを選びます。
1つずつ順番に設定していきますね。
アイコンを設定する前に、使用するアイコンを選んでおきましょう。
コードをコピーして保存しておくと、設定がスムーズに行えます。
まずはホームから設定します。
メニュー構造の中から、「ホーム」の右側の▼をクリックします。
ナビゲーションラベルの枠内の、ホームの文字の前に先ほどコピーした、アイコンのコードを貼り付けます。
アイコンのサイズを変更する
サイズを変更したい場合は、 「fa-house」のあとに、サイズのコードを入力します。
ホームの場合 コード
<i class="fa-solid fa-house"></i> ホーム0.75倍
<i class="fa-solid fa-house fa-xs"></i> ホーム1.33倍
<i class="fa-solid fa-house fa-lg"></i> ホーム2倍
<i class="fa-solid fa-house fa-2x"></i> ホーム同様に他のメニューも、ナビゲーションラベルにコードを入力します。
すべて入力したら、一番下にある「メニューを保存」をクリックします。
これでヘッダーメニュー(グローバルメニュー)にアイコンが表示されます。
同じ方法で、ヘッダーメニューやスマホのメニューのアイコンも表示できますよ。
かんたんですね。他のメニューにもアイコンを設定してみようと思います。
まとめ
今回はワードプレスのヘッダーメニュー(グローバルメニュー)に、アイコンを表示する方法を紹介しました。
メニューにアイコンを表示すると、どんなメニューなのか読者の人に一目で分かります。
ぜひ、今回の記事を参考にアイコンを設定してみて下さいね。
