Font Awesome

当サイトは、アフィリエイト広告を含みます。私個人が利用して、おすすめしたいと思った商品を紹介しています。

WordPress

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

サイトタイトルの文字の大きさを変更 WordPress
この記事は約5分で読めます。

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

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

アイコンがあると、一気にブログらしくなりますね。

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

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

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

最新の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> ホーム

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

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

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

ナナ
ナナ

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

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

まとめ

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

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

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

>関連記事ワードプレス ボックスメニューにアイコンを表示する方法【Cocoon利用者向け】

この記事を書いた人
ナナ

こんにちは、「ねこのライセンス」のサイトを運営しているナナです。

株式投資・資格の勉強・音楽観賞・断捨離・ネコ・ヒゲダンが好きな40代専業主婦です。

【私の資格・投資経歴】

【20代】投資家デビュー
    簿記3級取得

【30代】簿記2級取得

【40代】登録販売者取得
    FP3級・FP2級取得
    宅建取得
    簿記1級取得

何の取り柄もない専業主婦の私が、「自分に自信をつけたい!」という思いで資格の勉強やブログをしています。

私の学んだ知識が、ブログを通じてみなさんの役に立つとうれしいです。

そして、私の夢はいつかブログで稼げるようになること。

私は人見知りで人付き合いが苦手なので、外で働くのは正直怖いです。なので、自宅に居ながら好きなこと(ブログ)で稼げたらいいなと思っています。

詳しい私の自己紹介記事は、こちらのページにあります。

専業主婦限定の初心者向け断捨離・お金の無料相談は、こちらのページからお気軽にどうぞ。

お仕事のご依頼・お問い合わせは、こちらのページからお願いします。

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