Stinger8のカテゴリ一覧表示を、CSSでツリー状にデザインする[wordpress][Stinger8]

最近ですが、wordpressを使って別サイトを運営するようになりました。

テンプレートはStinger8を使っているのだけど、いかんせん初期のデザイン設定が最低限にとどめられており、カスタマイズするにはCSSファイルを自分でイジっていくしかないみたいです。

というわけで、デザインをイジっていく過程をこっちのブログにメモしておきます。こちらのブログは はてなですがｗ

今回は、サイドバーに表示されるカテゴリ一覧の表示をツリー状にかっちょよく表示してみます。

まず、サイドバーのカテゴリー一覧を階層状に表示する

デフォルトでもサイドバーにカテゴリー一覧は表示されているんですが、カテゴリー親子関係を無視してバラバラに表示されています。
今回はツリー状にデザインしたいので、しっかり親子関係を保ったまま表示させたいです。

これは、stinger8の外観設定から手動で設定可能です。

下記画像で示したとおり、
ダッシュボード→外観→ウィジェット→サイドバーウィジェット→カテゴリー
とアクセスし、カテゴリーの設定画面にて、「階層を表示」にチェックしてください。

これで、カテゴリー一覧の階層表示ができたはずです。

ツリー状にデザインする

次に、CSSでカテゴリー一覧をツリー状にデザインします。

こちらのサイトを参考にさせていただきました。
coliss.com

こちらを多少イジった、Stinger8用のコードは以下です。
Stinger8をお使いの方でカテゴリーのCSSが初期のままならば、こちらをコピペすれば大丈夫です。

/*カテゴリ階層*/
.cat-item ul{
    margin-left:10px; 
    position:relative;
}
.cat-item ul:before{
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid #ccc;
}
.cat-item li{
    margin:0;
    padding:3px 12px;
    text-decoration: none;
    text-transform: uppercase;
    font-size:13px;
    line-height:20px;
    color:#ccc;
    font-weight:normal;
    position:relative;
}
.cat-item li a{
    text-decoration: none;
    text-transform: uppercase;
    font-size:14px;
    line-height:20px;
    color:#ccc;
    font-weight:bold;
    position:relative;
}

.cat-item li a:hover,
.cat-item li a:hover+ul li a {
    color: RGBA(213, 235, 227, 1);
}

.cat-item ul li:before {
    content:"";
    display:block;
    width:8px;
    height:0;
    border-top:1px solid #ccc;
    position:absolute;
    top:10px;
    left: 0;
}
/*カテゴリ階層　終わり*/

これで、ツリー状になります。

以上でした。