[STINGER5]カテゴリを階層表示してデザインを変更する方法

前回、STINGER5でカテゴリとアーカイブに記事数を表示する方法を紹介しました。

この時にカテゴリが階層表示できることを知ったんですが、デフォルトでは以下の画像のように全てのカテゴリが同列に表示されてしまい、階層構造の親子関係がわかりにくいです。

これはイケてないので、カテゴリの親子関係がわかりやすいように子カテゴリは1段インデントを下げたいところです。

style.cssを編集する

カテゴリウィジェットでは子カテゴリはulタグで定義されchildrenクラスが設定されています。なのでstyle.cssで該当箇所に任意のCSSを適用することでデザインが変更できます。

具体的には以下のような感じです。

今回は子カテゴリのpadding-leftにとりあえず20pxを設定することでカテゴリの親子関係がわかるようにしてみました。こんな感じになります。

なかなかイイ感じじゃないでしょうか。ただしもし他にもulタグでchildrenクラスが設定されているものがあれば、レイアウトに悪影響を及ぼしてしまうので注意が必要です。