ブログ運営

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

ブログ運営
スポンサーリンク

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

Hello! 赫茄子です!

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

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

Font Awesomeをサイトで使うには、本来ダウンロード等の作業が必要ですが、「COCOON」テーマにはなんと標準で搭載されていますので、面倒なこと無しで、指定のコードを入力すれば簡単に使うことが出来てしまいます~!

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

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

COCOONのバージョンを最新にする方法

WordPressのメニューの「外観」→「テーマ」に行き、COCOONテーマに「新しいバージョンが利用できます」と表示されていたら、最新バージョンへアップデートできます。「今すぐ更新」をクリック。

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

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

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

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

このページに書いてあるコードは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; /*アイコンの太さ*/
}

まずは上記のコードをコピーし、テーマの追加CSSに追加してみましょう。

外観→カスタマイズから、追加CSSをクリックしてそこに貼り付けます。
すでに何か貼り付けてある場合は、下側に追加しましょう。

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

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

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

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

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

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

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

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

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

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

前項目でつかったコードと違うものを使うので注意

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

おつかれさまでした!

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

赫茄子

Hello!
とまと大好き赫茄子(あかなす)と申します!
日米ハーフの20代女で、東京から愛知にきて農家の嫁やっています。
趣味はゲーム、生き物飼育です(*´ェ`*)
フェレット、ウロコインコ、爬虫類、たくさんの生き物に囲まれています。
グルメや旅行、美容にも興味あり♪

Follow Me !!
スポンサーリンク
Follow Me !!
にょろらぶ

コメント

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