Facebook
RSS Feed
May 2, 2013

カテゴリーウィジェットで「階層を表示」を有効にする方法

スクリーンショット 2013-05-02 8.51.40

どうもこんにちは。

Minimal WPのテーマはカテゴリーウィジェットの「階層を表示」が無効になっているテーマがあるのですが、
これを有効にする方法を解説します。

カテゴリーウィジェットで「階層を表示」を有効にする方法

ダッシュボード>外観>テーマ編集>スタイルシート(style.css)

以下のコードをスタイルシート内に追加すればOKです。

/* 階層表示 */

#sidebar ul.children{
margin-bottom: -6px;
display: block;
padding: 5px 0 0 0;
}

#sidebar ul.children li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}

#sidebar ul.sub-menu{
margin-bottom: -6px;
display: block;
padding: 5px 0 0 0;
}

#sidebar ul.sub-menu li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}

さらに、

#sidebar li a{
}
内に
display: inline-block;
を追加。

ーーー

トップページのカテゴリーウィジェット等でも使う場合は、
以下のコードを追加すればOKです。

#topbox ul.children{
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}

#topbox ul.children li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}

#topbox ul.sub-menu{
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}

#topbox ul.sub-menu li{
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}

さらに、

#topbox li a{
}
内に
display: inline-block;
を追加。

以上です。

コードを修正する時は必ずバックアップを取ってから作業することをオススメします!

ーーー

テーマによっては最後のborderの色が濃すぎたりするかもしれないので調整してください。
Young Loveだと#eeeです。

階層表示にするときは、カテゴリーウィジェットの「階層を表示」にチェックを入れるだけです。

お試しあれ〜。

*HTML編集については無料サポートを行なってませんので、
詳しいスタイルシートの記述方法等はGoogleで調べながらどうぞ。

Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト