Font Awesome
WordPress

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

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

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

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

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

今回は、ワードプレスで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>

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

ナナ
ナナ

だけど、このまま貼り付けてもダメでした。

上記のコードを変更する必要があります。

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

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

ナナ
ナナ

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

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

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

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

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

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

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

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

ナナ
ナナ

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

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

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

まとめ

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

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

読者の人にも認識してもらえるので、おすすめです。

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

この記事を書いた人
ナナ

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

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

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

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

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