WordPressテーマ「Xeory Base」で子カテゴリーを見やすくするために、親カテゴリーに対して１段下げるカスタマイズを紹介します。
Xeory Baseのテーマでは、ウィジェットの「カテゴリー」設定で「階層を表示」という欄にチェックを入れた場合でも、一見したくらいでは親カテゴリーと子カテゴリーの見分けがつきません。
上の図のような状態で表示されるからです。（所有している他のブログの画像を使っているため、文字は塗りつぶしています）
上の図では、下の２つ（上から４番目と５番目のカテゴリー）は上から３番目のカテゴリーの子カテゴリーなのですが、ぱっと見ではわからないと思います。
そこで子カテゴリーを親カテゴリーに対して１段下げて、見やすくするカスタマイズをしたいと思います。
今回のカスタマイズでは、サイト「つまらない理系夫の日常」さまのこちらの記事を参考にさせていただきました。
このカスタマイズでは、最終的にカテゴリーの表示は下の図のようになります。
※ファイルを直接いじる場合には、事前にバックアップをとっておくことをお勧めします。ファイルの改変は全て自己責任でお願いいたします。（詳しくはトップページのメニューにある利用上の注意をご覧ください。）
子カテゴリーを見やすくする １段下げるカスタマイズ
メニュー「外観」→「テーマの編集」から、「base.css」を選択します。
base.cssのコードの一番下に、
li.cat-item .children {
padding-left: 30px !important;
}
というコードを貼り付けてください。
どんなカスタマイズを後でしたか後でわかりやすくするために、上の図のようにコードの前に説明文を追加しても大丈夫です。
/*– 子カテゴリを１段下げる –*/
li.cat-item .children {
padding-left: 30px !important;
}
コードを追加したら、「ファイルを更新」ボタンを押せば終了です。
これでXeory Baseでの子カテゴリーを見やすくする、１段下げるカスタマイズは終了です。