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

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

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

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

スポンサーリンク

style.cssを編集する

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

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

今回は子カテゴリのpadding-leftにとりあえず20pxを設定することでカテゴリの親子関係がわかるようにしてみました。こんな感じになります。
スクリーンショット 2015-04-05 15.59.46

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

コメント

  1. にっし~ より:

    はじめまして。

    私もつい2日前からSTINGER5でサイトを作成しています。

    カテゴリーを階層表示したくて、
    書かれていた方法を試したのですが、
    どうしても私の場合は上手くいきません。。。。

    カテゴリーの設定も親子関係にしているので、
    どこがおかしいのか見当がつかない状態です。。。

    もし思いつくところがあれば
    教えていただけるとありがたいです。