【Cocoonカスタマイズ】メニューにアイコンを入れる方法

こんにちは、さくらです。

突然ですが、高校時代に絵しりとりをして、私が描いた絵がこちら↓

ラッコです(^^)/天才的にうまいね！

・・・はい。当時友達に「何これ、和式便所？」って本気で悩まれました。

絵は下手でもブログに可愛いアイコンを入れたーーい！！って思いませんか？

本日はこのくらい壊滅的に絵が描けない人でもブログ内にこんな感じ↓のアイコンを入れられる方法をご紹介していきます。

Font awesomeの設定

まずは準備をしていきます。

「Cocoon設定」⇒「全体」⇒「サイトアイコンフォント」⇒「Font Awesome5」を選択してください。

この４と5はバージョンの違いなのですが、これから使い始めるよーという方は「５」を選んでおけば問題ありません。

意味が分からないって人もとりあえずこのまま進んでください。笑

ヘッダーメニューにアイコンをつける方法

冒頭でご紹介した、ヘッダーメニューにアイコンを入れる方法をご説明していきます。

まずは「Cocoon設定」⇒「外観」⇒「メニュー」⇒「編集するメニュー」でご自身がヘッダーに登録しているメニューを選んでください。

何をヘッダーメニューに入れているかは人それぞれだと思いますが、アイコンを入れたい項目を画像のように開いてください。

下記の画面が開けましたでしょうか。

「ナビゲーションラベル」のところに今は文字しか入っていないと思いますが、ここにアイコンを追加していきます。

次に、こちらのサイトにアクセスしてください。

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

画面左上に検索窓があるので、そこに「英語で」欲しいアイコンのイメージを検索してください。

今回はプロフィール用のアイコンなので「profile」と検索します。

そうすると、プロフィールらしい人型のアイコンが沢山出てきます。

使いたいアイコンをクリックしてください。

使いたいアイコンを開いたら、アイコンの上にあるコードをコピーしてください。

クリックをすればコピーできます。

WordPressに戻って、先ほどのメニューの「プロフィール」の文字の前にこのコードを貼り付けます。

私はコードと文字の間に半角のスペースを入れています。

これで、「メニューを保存」を押すと・・・

こんな感じで文字の前にアイコンが入りました！！

「お問い合わせ」も同じ要領で「mail」と検索してアイコンを設定しています。

サイドバーメニューのカテゴリーを可愛くする方法

次にサイドバーのカテゴリーメニューもFont Awesomeを使って可愛くカスタマイズしていきましょう。

「外観」⇒「ウィジェット」⇒「カテゴリー」⇒「サイドバー」⇒「ウィジェットを追加」で左のカテゴリー一覧表は作成できますが、ちょっと味気ないですよね。

これを右側のようにアイコン付きの可愛いカテゴリー一覧にカスタマイズしていきます。

まずは、「外観」→「メニュー」→「メニュー項目を追加」→「カテゴリー」から、サイドバーのカテゴリー一覧に表示したいものを選んで「サイドバーメニュー」を作成してください。

次に、「外観」→「ウィジェット」を開いて、「ボックスメニュー」をサイドバーに追加します。

サイドバーのボックスメニューのタイトルを「カテゴリー」にして、メニュー名で先ほど作成した「サイドバーメニュー」を選択します。

これを保存すると、下記のような星マークがついたカテゴリーの一覧がサイドバーに出てきます。

ここの星マークのアイコンをFont Awesomeを使って変更していきます。

「外観」→「メニュー」をもう一度開いて先ほど作成した「サイドバーメニュー」を選択してください。

画面右上の「表示オプション」→「詳細メニュー設定を表示」→「CSSクラス」にチェックを入れてください。

チェックを入れたら、下記のところに「CSS class」という欄が出てきます。

先ほどと同じくFont Awesomeのサイトを開いて、好きなアイコンを選択してください。

アイコンの右下ある「アイコンを使用する」または「Start Using This Icon」のボタンを押します。

コードが出てくるので、「 <i class =” 」と「 “></i> 」以外の部分をコピーしてください。

wordpressに戻って、先ほどのサイドバーメニューの 「CSS class」の欄に貼り付けます。

保存をかけると、

このようにアイコン付きのカテゴリーメニューが完成しました！

他のカテゴリーも同じようにアイコンを設定してください。

まとめ：【Cocoonカスタマイズ】メニューにアイコンを入れる方法

如何でしたでしょうか。

このようにCocoonではFont Awesomeを使うことで簡単に可愛いアイコンを入れることができます。

これだけで一気にオシャレなサイトになりますよね(^^)/

「オシャレなサイトにするためには有料テーマにしなくては！」と思っている初心者さんは多いと思いますが、Cocoonで出来るカスタマイズは本当に沢山あります。

下記の記事ではCocoonでできるカスタマイズを他にもご紹介しています。

【Cocoonカスタマイズ集】初心者でも簡単におしゃれなブログを作れます！

Cocoonのカスタマイズは初心者には難しい？そんなことはありません！ 初心者の私でも簡単にできたカスタマイズを一気にご紹介していきます。

sakura-matsui.com

2021.08.28

もし分からないところがあれば解説しますので、お気軽にコメントを頂ければと思います。

最後まで読んで頂き、ありがとうございました！