WordPress Cocoon

【Cocoon】サイドバーのカテゴリーのデザインをカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーのカテゴリーウィジェットをCSSでカスタマイズしました。

サイドバーの見出しデザインのカスタマイズはこちらの記事で紹介しています。

【Cocoon】サイドバーの見出しデザインをカスタマイズ
...

子カテゴリーを設定している場合でも使えるようにしたので、よかったら参考にしてみてください。それではやっていきましょう〜!

まずはベーシックタイプ

子カテゴリーにも対応したり細かい調整をしてたら、やたらコードが長くなってしまいました。なるべく分かりやすいようにコメント入れてます↓

見出しのデザインは関係ありませんが、上記のコードでこんな感じになります↓

マウスホバーでアイコンや文字色をフワッと変えるようにしています。

記事数のところも背景をつけたりしていますが、デフォルトのままで良い場合は「.widget_categories ul li a .post-count」と「.widget_categories ul li a:hover .post-count」の部分を削除してください。

アイコンはFont Awesomeでお好きなものをどうぞ。

カテゴリーごとにアイコンを分けてみる

カテゴリーごとにアイコンを分けることもできます。

そのためにカテゴリーのIDを調べる必要があるので、管理画面のメニューから「投稿 > カテゴリー」を開いて、IDを調べたいカテゴリーの上にマウスカーソルをのせます↓

するとブラウザ画面の一番左下に長いURLが表示されると思うので、「tag_ID=」の後ろの数字を確認しましょう↓

…/wp-admin/term.php?taxonomy=category&tag_ID=9&post_type=post…

IDを確認できたらCSSでカテゴリごとにアイコンを指定します。例えば当ブログの「Wordpress」のカテゴリだとこうなります↓

「cat-item-9」の数字のところを調べたIDにして、あとは好きなアイコンのコードにするだけですね。上記コードではWordpressのアイコンにしてみました↓

シンプルなデザインのバージョン

もう1つシンプルなタイプも紹介しておきます。前提としてカテゴリーウィジェットの表示設定で「投稿数を表示」、「階層を表示」のチェックを外している場合です。コードも短くこんな感じ↓

マウスホバーで背景色と文字色も変えるようにしていて、こんな感じになります↓

アイコンの種類や各要素のカラーで雰囲気もだいぶ変わると思うので、サイトに合わせて調整してみてください。ではまた〜♪

コメント