カテゴリーの階層表示


私のサイトでは、カテゴリーの「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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

TOP