2013-05-02

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

スクリーンショット 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で調べながらどうぞ。

ホームページからの集客できてますか?

ワードプレステーマ「Minimal WP」
Minimal WPのWordPressテンプレートは、月間45万PV超のメディアサイト運営のノウハウを詰め込んだ、ミニマルデザインなテンプレート。HTML不要で初心者でも簡単におしゃれなホームページが作れます!集客力アップ、ブランディングを成功させましょう!
by
関連記事