【Cocoon】ヘッダーメニュー(カテゴリー)にアイコン(絵文字)を入れる方法

ブログ
スポンサーリンク

【Cocoon】ヘッダーメニュー(カテゴリー)にアイコン(絵文字)を入れる方法

この記事では、下のヘッダーメニュー(カテゴリー)の文字の横にアイコン(絵文字)を入れる方法を紹介していきます。

僕のブログではずっとアイコン(絵文字)が無い状態でしたが、入れると一気にデザインがよりそれっぽくなりました。[※赤矢印部分です。]

ヘッダーメニューの作成方法から説明していきたいと思います。

えいぎょ
えいぎょ

ブログのカスタマイズをしていっても、「ちゃっとやり直したいなー!!」というときに参考にしたホームページにたどりつけないということが多々起きます。そこで、自分のブログで手順をまとめてしまい、今後の時間短縮を図っていきたいと思います。

スポンサーリンク

ヘッダーメニューを作成する

上のように、ヘッダーメニューがない状態から始めます。

こちらのページにヘッダーメニューを作っていきます。

  1. WordPressメニューの「外観」から「メニュー」をクリックします。

2. メニュー名に『グローバルメニュー』と入力して「メニューを作成」をクリックします。

3. 「メニュー項目を追加」からメニューにしたい項目を選び「メニューに追加」をクリックします。

メニューに追加できる項目は以下の4つです。

  • 固定ページ
  • 投稿
  • カスタムリンク
  • カテゴリー

※今回はカテゴリーの中から「投資」を選びました。

4. 追加した項目の「▼」をクリックして表示名を編集します。

5. 元々の表示の『投資』をそのまま使用し、メニュー設定で「ヘッダーメニュー」にチェックを入れ、「メニュを保存」をクリックします。

6. ブログの表示がこのようになります。

ヘッダーメニューにアイコン(絵文字)を入れる

上の画面のように、ヘッダーメニューにアイコン(絵文字)を入れる方法を説明していきます。

えいぎょ
えいぎょ

超簡単なので、もう少しだけ頑張りましょう!!

  1. FontAwesomeをクリックし開きます。今回は適当に「address book」をクリックします。

2. 下の画面で、「<i class=”fa fa-adress-book” aria-hidden=”true”></i>」をコピーします。

※コビーは「Ctrl+C」で簡単にできます。

3. 先ほどの手順5のところで全く触らなかった『投資』の頭の部分に、先ほどコピーした文字列を貼りつけ『<i class=”fa fa-adress-book” aria-hidd 投資』にし、「メニューを保存」をクリックし完了です。

まとめ

  • ヘッダーメニューを作成する方法
  • ヘッダーメニューにアイコン(絵文字)を入れる方法
えいぎょ
えいぎょ

以上の二つの内容について解説してきました。アイコンは様々なものがあり、非常に悩みますがお気に入りのものが見つかると嬉しいです。今回の記事は自分用でもあります。笑 ご不明点等ございましたら、お気軽にお問い合わせください。僕が現時点で知らない内容であっても調べてご連絡します。じゃまた。

コメント

タイトルとURLをコピーしました