【COCOON】カテゴリーとメニューのアイコンを可愛くしたい【Font Awesome】

デコレーションのための準備をしよう

Hello！　赫茄子です！

今回は、WordPress無料テーマ、「COCOON」で、 「Font Awesome」を使い、カテゴリーアイコンなどをデコレーションしてみようと思います！

Font Awesomeとは、様々なアイコンを、文字として使用可能にしたツールのことです。
簡単に言うと、「かわいいアイコンが文字として使えるサイト」です。

COCOONのバージョンを確認する

Font Awesomeを使うに当たって、現在最新であるバージョン５（ Font Awesome 5）を使用することを推奨します。
バージョン５に対応しているCOCOONは、2.0.0以降になります。

Font Awesomeのバージョンを切り替えよう

Font Awesomeにはバージョンが有り、2020年2月現在、「COCOON」ではバージョン４と５に対応していますが、どちらを使うかによって切り替える必要があります。

まずはその設定を切り替えてみましょう！
5のほうが種類も多く、最新なのでこれから主流になるはずです。旧版にこだわる理由がなければ、最新バージョンである 「Font Awesome 5」を選択しましょう。

Cocoon設定→全体タブに、サイトアイコンフォントという項目があります。
Font Awesome 5を選択し、変更をまとめて保存を押しましょう。

ウィジェットのカテゴリーにアイコンをつける

こんな感じで、シンプルだったカテゴリーにアイコンを付けて可愛くしてみましょう！
色やアイコンは、もちろん好きなものに変えられますよ。

/*親カテゴリーのカスタマイズ*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}
.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f005"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px; /*アイコン右側空間*/
  font-weight: 900; /*アイコンの太さ*/
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}

/*子カテゴリーのカスタマイズ*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f105"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px; /*アイコン右側空間*/
  font-weight: 900; /*アイコンの太さ*/
}

それぞれのコードの右側に、そのコードが何を指定しているかをメモしたので、自分が変えたい項目を書き換えてみましょう！

色番を指定すれば、自分の好きな色に変えることが出来ます。

色見本サイトはこちら

ユニコードを変えれば、好きなアイコンに変更出来ます。

Font Awesome5　はこちら

☆好きなアイコンを選び、画像のカーソル位置のコードをクリックすると、指定の画像のユニコードがコピー出来ます。追加したCSSのユニコード欄に張り替え、好きなアイコンに変えてみましょう！

下線の種類、上部ボーダーを消す部分などはお好みで

カテゴリーを仕分ける下線等のコードも混ざっています。
必要なければ、消しちゃってくださいね～！

メニューのカテゴリーにアイコンをつけてみよう

上記画像のメニューに、それぞれアイコンがついていますね(*´艸｀*)！
これの方法です。

「外観」→「メニュー」に行きます。

画像のように、ナビゲーションラベルに Font Awesome 5 のコードを貼ることで表示することが出来ます。

Font Awesome 5で好きなアイコンを選び、上記カーソルのある長い方のコードを使用します。

おつかれさまでした！

サイトを可愛くすることはできたでしょうか？？
他にもアイコンを変えられる箇所はありますので、この要領でほかを変更したいときもチャレンジしてみてください。最後までありがとうございました！ではまた～！