【WordPress】LION MEDIAのカテゴリーデザインをCSSでカスタマイズ

【WordPress】LION MEDIAのカテゴリーデザインをCSSでカスタマイズ

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

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

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

 

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

 

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

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

 

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

 

デフォルトのカテゴリー表示

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

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

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

 

子テーマにCSSを追加する

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

 

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

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

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

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

 

解説

親カテゴリーは、大文字にして文字の先頭にアイコンを入れています。

サブカテゴリーには、文字の先頭に矢印アイコンを入れてみました。

.widget ul li などのクラス名は変更しないで下さい。

 

見出しデザインをお探しの方はこちら シンプルなデザインの見出しは以下の記事をご覧ください。
 


 
 囲い枠のデザインの見出しは以下の記事をご覧ください。
 

 
 おしゃれなデザインの見出しは以下の記事をご覧ください。
 

 

 

まとめ

カテゴリー表示をカスタマイズ出来ましたか?

これを参考にして更にカスタマイズしてみて下さい。

 
 

LION MEDIAのカスタマイズ連載

 

LION MEDIA カスタマイズ

カスタマイズ一覧表

 

 

 

 

 

 

 

 

 

 

 

 

 

LION MEDIAの魅力を紹介

 

 

 

 

この記事が気に入ったら
いいね ! しよう

LION MEDIAカテゴリの最新記事