LION MEDIA サイドバーのカテゴリーデザインをCSSでカスタマイズ

WordPressのテーマである「LION MEDIA」では、ウィジェットを使ってサイドバーにカテゴリー一覧を表示させることができます。

カテゴリーの一覧を表示させることでユーザビリティが向上し、目的のカテゴリーへ誘導させることができるのです。

しかし、LION MEDIAのカテゴリー表示のデザインは味気ないためCSSでカスタマイズしてみました。

これからカスタマイズする完成形

[adcode]

サイドバーにカテゴリーを表示

まずは、WordPressのダッシュボードからウィジェットを使ってサイドバーにカテゴリーを表示させます。

カテゴリーの▼を押して投稿数と階層を表示させます。

LION MEDIAのデフォルト設定ではなんとなく味気ないですよね。

このカテゴリーの表示で満足であれば、特に何もする必要はありません。

ちょっと独自のCSSでカスタマイズしてみようと思われたら次に進んで下さい。

LION MEDIAには子テーマが付属されています。CSSの追加は子テーマに追加しましょう。

テーマのスタイルシートを直接カスタマイズすると、テーマがバージョンアップされた場合、今までカスタマイズしてきたCSSが全て消えてしまいます。
そのため、子テーマにCSSを追加してテーマがバージョンアップされても今までのCSSを引き継いでくれるうようにします。

LION MEDIAでは子テーマも一緒に配布されているので、必ず子テーマを使って下さい。

では、カテゴリー表示をカスタマイズするCSSを紹介します。

子テーマに、そのままコピペして下さい。

サイドバーのカテゴリーデザインを変更CSS

CSSを見るには右の「＋」をクリックしてください: .widget ul li {
font-weight:bold;
}
.widget ul li::before {
font-family: FontAwesome;
content: “\f07c “;/*アイコン*/
padding-right:3px;/*アイコンから文字までの隙間*/
color: #FFC042; /*アイコン色*/
}
.widget ul li .cat-item{
font-weight:normal!important;
}
.widget ul li .cat-item::before{
font-family: FontAwesome;
content: “\f105 “;/*アイコン*/
padding-right:3px;/*アイコンから文字までの隙間*/
color: #FFC042; /*アイコン色*/
}
.widget ul li {
margin-bottom: inherit!important;
border-top: inherit!important;
}
.widgetSticky {
padding-top: 130px;
}