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

2018年3月31日WordPressWordPressカスタマイズ

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タグ内に入れる必要があります

.widget_categories{} 全体
.widget_categories ul:not(“.children”){} 子カテゴリを含む親カテゴリグループ
.widget_categories li:not(.children) {} 親カテゴリ
.widget_categories li:not(.children) a{} 親カテゴリのリンク内
.widget_categories .children ul{} 子カテゴリグループ
.widget_categories .children ul li{} 子カテゴリ
.widget_categories .children ul li a{}

子カテゴリのリンク内

親カテゴリ名に背景色

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;
}

2018年3月31日WordPressWordPressカスタマイズ

Posted by Yousuke.U