wordpressのテーマxeory baseのカテゴリー欄ですが、初期状態だと親子関係が分かりずらくてなんだか見にくいと感じる方も多いのではないでしょうか？
という訳で今回はwordpressのテーマxeory baseの見にくいカテゴリー欄のカスタマイズ方法についてご紹介していきたいと思います。
目次
wordpressのxeoryのカテゴリーカスタマイズ方法（超簡単）
wordpressのテーマxeory baseの初期状態は下記のような感じになっています。
これだと親子関係の区別がつきにくいですし、使いにくいですよね。
ということでこれを少しカスタマイズしてみます。
小カテゴリーを少し右に寄せて見やすくする方法（初心者向け）
ワードプレスの画面左側メニューにある「外観」から「カスタマイズ」を選び、「追加CSS」をクリックしてCSSを書き足します。
そして下記のコードを「追加CSS」のところにコピーアンドペーストして貼り付けます。
li.cat-item .children {
padding-left: 30px !important;
}
貼り付け後追加CSS画面の上部にある「公開」ボタンを押すことで以下のようにカスタマイズされるかと思います。
加えたCSSはたった一行だけですが、これだけでも大分見やすくなりましたね。
各子カテゴリーの下の下線を消す
更に各カテゴリーの下の下線を消す場合は、「外観」＞「カスタマイズ」＞「追加CSS」で下記のように書き足します。
li.cat-item .children li {
border-bottom: none;
}
これで親カテゴリーと親カテゴリーの間にしか区切り線が付かなくなったので、より親同士がはっきり区別された感じになりました。
ちなみに子カテゴリーだけでなく、すべての下線を消したい場合は下記のように書くとできます。
#categories-2 ul li {
border-bottom: none;
}
font awesomeを使ってxeoryのカテゴリーを更におしゃれに！
WEBアイコンフォントを表示させてくれる「font awesome」を使えば、更にカスタマイズの幅が広がります。
ちなみにfont awesomeをワードプレスに導入する方法は下記の記事でご紹介しています。
今回はfont awesomeの右矢印のシンプルなアイコン「angle-right（コードf105）」を表示させてみたいと思います。
CSSに関しては、下記のコードになります。
#categories-2 ul {
position: relative;
}
#categories-2 ul li a{
background-image: none; /* デフォルトのアイコン画像を非表示にする */
}
#categories-2 ul li a:before {
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: 900;
position: absolute;
left: 5px;
}
#categories-2 ul li.cat-item .children li a:before{
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: 900;
position: absolute;
padding-left: 30px !important;
}
これでデフォルトのアイコンを消す代わりに、font awesomeのアイコン（ここではアイコン「angle-right（コードf105）」）をリストマークとして表示させることができました！
画像のアイコンは小さめですが、font-sizeプロパティでサイズを指定すると、アイコンの大きさを調節できます。
font awesomeには他にも様々なアイコンがあるので、自分好みのアイコンをチョイスして、カテゴリーのデザインに組み込んでいくと良いでしょう。
まとめ
以上wordpressのテーマxeory baseの見にくいカテゴリー欄のカスタマイズ方法について、簡単なものからfont awesomeを使った方法までご紹介していきました。
簡単な方法を用いれば、xeoryのデフォルトの分かりづらいカテゴリー欄もお手軽に分かりやすく表示させられるので、カテゴリーの部分を何とかしたい場合は是非カスタマイズしてみると良いのではないでしょうか？
コメント