【WordPress】カテゴリ一覧のCSSデザイン

2018年2月25日2019年6月12日WordPress,WordPressカスタマイズ

WordPressのサイドバーに表示するカテゴリ一覧はデフォルトだと味気ないから、見た目の気に入るデザインにしたいところですね

CSSでデザインする為に、まずHTMLコードを確認します

デフォルトのHTML出力

<div class="widget_categories">
 ～ウィジェット名とか～
 <ul>
 <li class="cat-item cat-item-xx"><a href="xxx">親カテゴリ名</a></li>
 <li class="cat-item cat-item-xx"><a href="xxx">親カテゴリ名</a>
 <ul class="children">
 <li class="cat-item cat-item-xx"><a href="xxx">子カテゴリ名</a></li>
 <li class="cat-item cat-item-xx"><a href="xxx">子カテゴリ名</a></li>
</ul>
</li>
 <li class="cat-item cat-item-xx"><a href="xxx">親カテゴリ名</a></li>
</ul>
</div>

カテゴリ一覧のデザインに使うCSSセレクタ名

サンプルでは親要素となる「widget_categories」をベースにCSSを記述してみます

環境によっては「widget_categories」のdivで定義されているidを利用した方が良いかも知れません

また記事数の表示がWordPressデフォルトのままだとレイアウトが崩れますので記事数表示の部分をaタグ内に入れる必要があります

【CSS】not()で複数条件（AND・OR）セレクタを除外するサンプル

CSSでセレクタ指定時に除外できるnot()疑似クラス AND条件やOR条件の指定方法です divを除外 div以外の ...

 https://naruhodo.repop.jp/css-not-and-or/

親カテゴリ名に背景色

See the Pen WordPress Category Design01 by yochans (@yochans) on CodePen.

.widget_categories ul{
  list-style-type:none;
  padding-left: 0;
}
.widget_categories li:not(.children) a{
	display: block;
	padding: 4px;
  margin: 1px;
	color: #fff;
	background: #47bea0;
  transition: .5s;
}
.widget_categories .children li a{
	color: #000;
	background: #FFF;
}

マウスホバー時に背景色を変更

See the Pen WordPress Category Design02 by yochans (@yochans) on CodePen.

.widget_categories ul{
  list-style-type:none;
  padding-left: 0;
}
.widget_categories li:not(.children) a{
	display: block;
	padding: 4px;
  margin: 1px;
	color: #fff;
	background: #47bea0;
  transition: .5s;
}
.widget_categories li:not(.children) a:hover{
	background: #009966;
}
.widget_categories .children li a{
	display: block;
	padding: 4px;
  margin: 1px;
	color: #000;
	background: #FFF;
  transition: .5s;
}
.widget_categories .children li a:hover{
	background: #E0E0E0;
}

子カテゴリをスライドにしてマウスホバーで開く

See the Pen WordPress Category Design03 by yochans (@yochans) on CodePen.

.widget_categories ul{
  list-style-type:none;
  padding-left: 0;
}
.widget_categories li:not(.children) a{
	display: block;
	padding: 4px;
  margin: 1px;
	color: #fff;
	background: #47bea0;
  transition: .5s;
}
.widget_categories li:not(.children) a:hover{
	background: #009966;
}
.widget_categories .children li a{
	display: block;
	padding: 4px;
  margin: 1px;
	color: #000;
	background: #FFF;
  transition: .5s;
}
.widget_categories .children li a:hover{
	background: #E0E0E0;
}
.widget_categories .children li{
overflow: hidden;
height: 0;
transition: .5s;
}
.widget_categories li:not(.children):hover li{
overflow: visible;
height: 2em;
}