Font Awesome

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

WordPress

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

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

ボックスメニューは、メニューをボックス型で表示できる機能です。

初期の設定では、ボックスメニューを表示したとき、全てのメニューが星のアイコンになっていますよね。

全てのメニューが星のアイコンじゃ分かりにくいから変更できないかな・・・?。

そんなときは、Font Awesomeの無料アイコンを使えば、星のアイコンを、それぞれのメニューに合わせて、オリジナルのアイコンに変更できます。

今回は、ワードプレスでCocoonのテーマを利用している人向けに、ボックスメニューにアイコンを表示する方法を紹介します。

ボックスメニューにアイコンを表示する方法

ナナ
ナナ

1番最初に、「最新のCDNファイル」をコピーしてCCSにコードを貼り付けましょう。

以下の記事に詳しい説明があります。

アイコンだけを変更しても反映されないので、CDNファイルをコピーしてくださいね。

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

ナナ
ナナ

ボックスメニューに、オリジナルアイコンを表示するためにすることは、以下の3つです。

  1. ボックスメニューに表示するメニューの作成
  2. Font Awesomeアイコンのコードを、メニューのCCS classに入力する
  3. ボックスメニューをサイドバーに表示する設定

ボックスメニューに表示するメニューの作成

まず最初に、ボックスメニューに表示する、メニューを作成します。

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

ナナ
ナナ

私の場合は、ボックスメニューにカテゴリーを表示したいので、カテゴリーのメニューを作成する方法を説明しますね。

「新しいメニューを作成しましょう」をクリックします。

メニュー構造にある、メニュー名に分かりやすく、”ボックスメニュー”と入力して、「メニューを作成」をクリックします。

編集するメニューを選択から、∨をクリックして”ボックスメニュー”を選び、右横にある「選択」をクリックします。

メニュー項目を追加から、「カテゴリー」をクリックして、ボックスメニューに表示するカテゴリーに✓を入れます。

「メニューに追加」をクリックします。

この時点で今作成したメニューは、まだ保存できていないので注意してください。

ナナ
ナナ

設定までもう少しです。

次に設定するアイコンのコードを貼り付ければ、メニューが保存されますよ。

次は、先ほど作成したメニューに、アイコンを表示する設定を行います。

次の設定もメニュー画面から行うので、まだ画面は閉じないで下さいね。

あらかじめHouse – solid | Font Awesomeのサイトで、好きなアイコンを選んでおきましょう。

設定の際は、アイコンのコードが必要です。

ナナ
ナナ

スマホの場合、文字化けするので、パソコンでのアクセスがおすすめです。

ナナ
ナナ

たとえば下記のマークを選んだとします。アイコンをクリックすると、下記のように表示されるので、ピンクのライン部分のコードをコピーしましょう。

ただし、そのまま貼り付けてもアイコンが表示されないので、少しコードの修正が必要になります。

以下に記載があるので、変更したコードを貼り付けてくださいね。

Font AwesomeアイコンのコードをCCS classに入力する

初期のままだと、メニューにCCSコード入力画面がないので、CCSコード入力画面を表示する設定が必要。

メニュー編集画面の右上にある、「表示オプション」をクリックして、「CCSクラス」に✓を入れます。

次は、カテゴリーのメニューに、1つずつ順番にアイコンを設定していきます。

カテゴリーの横にある▼をクリックして、「CSS class (オプション)」に、アイコンのコードを入力します。

本のアイコンは、以下のコードですが、修正が必要です。

<i class="fa-solid fa-book"></i>
ナナ
ナナ

上記のコードで、ccsコードに入力するのは、

fa-solid fa-book“この部分だけですが、fas fa-bookに変更します。

「fa-solid fa-book」の部分だけをコピーして、CCS classに貼り付けるのはNG

fa-sの時は、前半部分をfasに変更する

ナナ
ナナ

なぜかこのままだと、アイコンが表示されないので、コードを以下のように変更します。

fa-solid fa-bookの前半を、fa-solidからfasに変えます。

fa-solid fa-book

fas fa-book

fa-bの時は、前半部分をfabに変更する

Googleのアイコンの場合は、以下のコードですが、こちらは前半をfabに変更します。

<i class="fa-brands fa-google"></i>

fa-brands fa-googleの前半を、fa-brandsからfabに変える

ナナ
ナナ

先ほどとの違い分かりますか?

最初の文字がfa-sの時はfasに、fa-b…の時はfabに変えます。

fa-brands fa-google
fab fa-google

他のコードも同じように変更して、すべて入力したら、最後に「メニューを保存」をクリックします。

ナナ
ナナ

お疲れさまでした。これでボックスメニューに、アイコンが表示されるようになりました。

次は、ボックスメニューをサイドバーに表示させる設定を行います。

ボックスメニューをサイドバーに表示する

ワードプレスのダッシュボード画面から、「外観」→「ウィジェット」をクリックします。

利用できるウィジェットの中から、「ボックスメニュー」を選びます。

「サイドバー」→「ウィジェットを追加」をクリックします。

タイトルに好きな言葉を入力して、メニュー名は、メニュー一覧から、先ほど作成した「ボックスメニュー」を選びます。

保存すればサイドバーに、アイコン付きのボックスメニューが追加されました。

ナナ
ナナ

ブログのトップページに行って確認してみて下さい。

ボックスメニューにアイコンが表示されましたよね。

私の場合は、こんな感じです。

まとめ

今回は、ボックスメニューにアイコンを表示する方法を紹介しました。

ボックスメニューのアイコンを変えると、一目でメニューが分かりやすくなりますよね。

ブログの読者の人にもメニューを認識してもらえるので、おすすめです。

かんたんなので、ぜひアイコンを設定してみて下さいね。

この記事を書いた人
ナナ

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

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

【私の資格・投資経歴】

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

【30代】簿記2級取得

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

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

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

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

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

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

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

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

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