Font Awesome
WordPress

簡単!ワードプレスのヘッダーメニュー(グローバルメニュー)にアイコンを表示する方法 Cocoon

サイトタイトルの文字の大きさを変更WordPress
この記事は約5分で読めます。
記事を書いた人
プロフィールナナ
ねこ好きの40代専業主婦
【保有資格】FP2級、簿記2級、宅建、登録販売者
簿記1級勉強中!

ブログトップページのヘッダーメニューの横に、アイコンが表示されているのを見たことがありますよね。

文字だけのメニューより、アイコンがある方が、一目でどんなメニューか、読者の人に認識してもらえます。アイコンがあると、一気にブログらしくなりますね。

今回は、すでにスマホとパソコンのヘッダーメニュー(グローバルメニュー)を、作成済みの人向けに説明するので参考にしてみてください。

ヘッダーメニューにアイコンを表示する方法

まず最初にワードプレスのメニューに、アイコンを表示するための設定を行います。

最新の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のサイトにいって、「無料で始める」をクリックします。

「アイコンを探す」をクリックします。

アイコンは無料と有料があります。Free(無料)で検索すれば、無料のアイコンのみが表示されます。

サイト内の検索窓に検索したいアイコンの英語名を入力すると、かんたんに使いたいアイコンが出てきます。

たとえば、ホーム画面の場合、「home」と入力すると、家のアイコンが表示されます。

アイコンをクリックすると、コードが表示されるので、コピーします。

<i class="fa-solid fa-house"></i>

こちらのサイトから、好きなアイコンを選びます。https://fontawesome.com/v6.0/icons

ワードプレスのメニューにアイコンのコードを貼り付ける

ワードプレスの管理画面にログインして、ダッシュボード画面から、「外観」→「メニュー」をクリックします。

「編集するメニューを選択」から、グローバルメニューを選びます。

ナナ
ナナ

1つずつ順番に設定していきますね。

アイコンを設定する前に、使用するアイコンを選んでおきましょう。

コードをコピーして保存しておくと、設定がスムーズに行えます。

まずはホームから設定します。

メニュー構造の中から、「ホーム」の右側の▼をクリックします。

ナビゲーションラベルの枠内の、ホームの文字の前に先ほどコピーした、アイコンのコードを貼り付けます。

アイコンのサイズを変更する

サイズを変更したい場合は、 fa-houseのあとに、サイズのコードを入力します。

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> ホーム

ホームの場合 コード

<i class="fa-solid fa-house"></i> ホーム

同様に他のメニューも、ナビゲーションラベルにコードを入力します。

すべて入力したら、一番下にある「メニューを保存」をクリックします。

これでヘッダーメニュー(グローバルメニュー)にアイコンが表示されます。

ナナ
ナナ

同じ方法で、ヘッダーメニューやスマホのメニューのアイコンも表示できますよ。

かんたんですね。他のメニューにもアイコンを設定してみようと思います。

まとめ

今回はワードプレスのヘッダーメニュー(グローバルメニュー)に、アイコンを表示する方法を紹介しました。

メニューにアイコンを表示すると、どんなメニューなのか読者の人に一目で分かります。

ぜひ今回の記事を参考にアイコンを設定してみて下さい。

この記事を書いた人
ナナ

このサイトを運営しているナナです。

ねこ・株式投資・節約・資格取得・音楽鑑賞・断捨離が好きです。
何でもやりたいことはやってみる!
というチャレンジ精神でブログを始めました。

1度きりの人生楽しまなきゃ損!がモットーです。

お問い合わせやご意見はこちらからお願いします。

ナナをフォローする
ナナをフォローする
ねこのライセンス
error:Content is protected !!
タイトルとURLをコピーしました