サイドバーのカテゴリ一覧を更に見やすくする方法：Hueman

サイトを開設してからというもの、賢威やXeoryのカスタマイズ記事ばかり書いてきましたが、今回は Hueman というWordPressテーマのカスタマイズについて書いてみたいと思います。

このHuemanというテーマ、これまで使ったことがなかったんですが、今回少し使ってみたらテーマファイルの編集無しに色々とカスタマイズできて本当に高機能なんですよね。

無料でデザインも良く、テーマオプションから細かい設定ができるとなれば、ここ最近Huemanブログが増えてきているのも納得です。

今回はそんな Hueman のサイドバーに表示される子・孫カテゴリを右寄せして、カテゴリの階層をより分かりやすくする方法について紹介したいと思います。

カスタマイズ前

↓ 子や孫のカテゴリも、親カテゴリと同じように並んでいる

↓ 子や孫カテゴリを右寄せ

↓ 子、孫カテゴリの境界線を無しに

↓ 子、孫カテゴリの手前に「-」を追加

[ad]

それではCSSファイルを編集していきましょう。
Huemanでは子テーマのCSSファイルを編集するよう推奨されているので、親テーマ（Hueman本体）のstyle.cssではなく、子テーマのCSSファイルに以下のコードを追加します。

.sidebar .widget_categories ul ul {
    margin-left: 20px;
}

これで子、孫カテゴリが右寄せされました。

今度は子、孫カテゴリの下に表示される境界線を非表示にしてみます。

先ほどと同じように、子テーマのCSSファイルに以下のコードを追加します。

.sidebar .widget_categories ul ul li {
    border-bottom: none;
}

コード追加後、子、孫カテゴリ下の境界線が非表示になりました。

ちなみにサイドバーのカテゴリに表示される境界線を全て非表示にする場合は、以下のコードを使用します。
（上のコードとは ul の数が違う）

.sidebar .widget_categories ul li {
    border-bottom: none;
}

これは画像を見てもらった方が早いかもしれませんが、子、孫カテゴリの手前に「-」という記号を入れて、階層になっていることを分かりやすくする、というカスタマイズです。

こちらについても、以下のコードを子テーマのCSSファイルに追加します。

.sidebar .widget_categories ul ul li:before {
    content: "-";
}

↓ コード編集後（子、孫カテゴリの手前に「-」が追加された）

「-」の記号が表示されました。
今回はこれで完成です。