カテゴリーの階層表示

私のサイトでは、カテゴリーの「IT」と「ブログ開設記」は親子関係にあります。

カテゴリーの親子関係をわかりやすくするには、WordPressの管理画面の「外観」→「ウィジェット」→「サイドバー」内の「カテゴリー」→「階層を表示」にチェックを入れます。
これによって親カテゴリーの下に子カテゴリーが一段下げて表示されます。

しかし私のオリジナルテーマ「ringo」では、子カテゴリー周囲に無駄な線が引かれ、下部に余計なスペースができています。

子カテゴリーのセレクタはデベロッパーツールでみると、「ul li.cat-item cat-item-3 ul.children」でした。

これをもとに、WordPressの管理画面の「外観」→「テーマエディター」→「スタイルシート（style.css）」を編集します。

まずは「border:none;」で子カテゴリーの枠線を消します。

「margin:0」で余分な余白を消します。

「padding-left:10px;」で子カテゴリーを少し右にずらし、子カテゴリーであることを強調します。

どのカテゴリーに何記事あるか表示したいので、管理画面の「外観」→「ウィジェット」→「サイドバー」内の「カテゴリー」→「投稿数を表示」にチェックを入れます。

結果このような見た目になりました。

2019-07-12

• ブログ開設記