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テンプレートを使えば、おしゃれなホームページやブログが誰でも自分で作れます。面倒な設定が不要なミニマル設計なのでWEB初心者でも簡単。集客やファン獲得に効果抜群です!
おすすめWordPressテーマ10選
by
Minimal WPオススメのレンタルサーバー
WordPressがワンクリックで簡単にインストールできる機能が付いている下記レンタルサーバーがオススメです。【保存版】初心者向けにドメイン・サーバーの取得からWordPressのインストールまでの手順をイチから完全解説しました。→WordPressサイトの始め方・完全手順

シンプルでおしゃれなワードプレステーマ「Minimal WP」