【cocoonのカテゴリー】アイコンを付けるカスタマイズを分かりやすく解説！

2023-07-08

この記事は広告を含みます

cocoonは利用者も多いのでカスタマイズの方法を調べるとたくさんのサイトが出てきますよね！

でも初心者には分かりにくかったり、元々の設定のせいでうまく表示されない場合もあってなかなか思うように設定できないこともありませんか？

いろは

私も実際にいくつかのサイトを参考にしましたが、うまく表示されなかったCSSコードもありました。

今回は、「カテゴリーの前にアイコンを付けるカスタマイズ」「CSSコードの貼り方」「文字の大きさや行間の変更」など分かりやすく紹介していきます♪

実際に自分好みのカテゴリーにできたので、悩んでいる方は参考にしてみてくださいね！

当ブログはcocoonからswellに移行しました。

【cocoonのカテゴリー設定】カテゴリーの前にアイコンを付けたい

カテゴリーの前のアイコンとは、こんな感じのものです！

何も設定していないと味気ないカテゴリーになってしまったので、CSSを利用して設定してみました！

参考にしたのはこちらのサイトです。
▶COCOON カテゴリのカスタマイズ、アイコン追加、行間を狭くする方法コピペでOK | フィフきゅん (kyuncomic.com)

いろは

そのままコピペしたらうまくいかない部分があったので、少しカスタマイズしました！

これから紹介するCSSコードを「外観」➝「テーマエディター」➝「Cocoon Childのスタイルシート（style.css）」に貼り付け、「ファイルの更新」をしましょう！

コピペする「CSS」はこちら

いろは

私が利用しているCSSコードはこちらです！

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

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

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

【アイコンの設定】
親カテゴリーは「”¥f07b”（１０行目）」、子カテゴリーは「”¥f105″（３０行目）」で設定しています。

➝好きなアイコンを設定したい場合はFont Awesomeのサイトから探しましょう。