CSS: fit-contentを使ってWordPressのカテゴリリストを縦にニ階層、横に二列表示でsidebar.phpに配置
こんにちは！
はじめに、この記事の概要と目次です。本編は少しスクロールすると始まります。
今回は、僕がとても苦労したことの記録。WordPressで投稿した記事のカテゴリ欄の表示スタイルを紹介します。①親カテゴリ、子カテゴリを親子関係で表示、②タブレットデバイスからのアクセス向けに、ニ列で表示した際にデザインが崩れないようにするCSSをまとめています。
今回のやることリスト
- WordPressで投稿した記事のカテゴリ一覧をリスト形式で表示
- リストには、それぞれのカテゴリの件数を含める
- 作成したカテゴリ一覧を、モバイルとPC(サイドバー)では1列表示、タブレットでは縦に2列で表示するようCSSで調整
カテゴリ一覧をコピペで作成
カテゴリ一覧の表示は、以下のコードをコピペして、sidebar.phpの任意の場所に貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<ul class="categories"> <?php $parent_categories = get_categories([ 'parent' => 0, 'hide_empty' => false, 'orderby' => 'name', 'order' => 'ASC' ]); foreach ($parent_categories as $parent_cat) { echo '<li>'; echo '<a href="' . get_category_link($parent_cat->term_id) . '">' . esc_html($parent_cat->name) . ' (' . $parent_cat->count . ')</a>'; $child_categories = get_categories([ 'parent' => $parent_cat->term_id, 'hide_empty' => false, 'orderby' => 'name', 'order' => 'ASC' ]); if (!empty($child_categories)) { echo '<ul class="child-categories">'; foreach ($child_categories as $child_cat) { echo '<li>'; echo '<a href="' . get_category_link($child_cat->term_id) . '">' . esc_html($child_cat->name) . ' (' . $child_cat->count . ')</a>'; echo '</li>'; } echo '</ul>'; } echo '</li>'; } ?> </ul> |
無事に表示されましたか？作成のポイントはこちらです。
- カテゴリ名の隣に、それぞれの記事数を表示
- カテゴリ名はABC順(名前順)に表示
- 子カテゴリはある場合のみ表示
- 親カテゴリにクラス名: categoriesをセット
- 子カテゴリにクラス名: child-categoriesをセット
- divなどの追加要素も、必要に応じカスタマイズ可能
CSSで調整
CSSはモバイルファーストのレスポンシブデザインを作成し、その後、タブレット向け、PC向けに追加の設定を行います。
モバイルファーストのCSS基本設定
基本的なCSSは、margin-leftなどスペースに関する設定と、モバイルやタブレットデバイス向けに、<a>リンクタグにdisplay: blockの設定がおすすめです。ご自身でCSSを設定されている場合は、そちらに併せてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
aside ul.categories{ margin: 0 1em 0 1.5em; } aside ul.categories li a{ padding: .15em 0; display: block; } aside ul.categories ul.child-categories{ margin-left: 1em; } |
- <a>タグにdisplay: blockを設定することで、タップの反応範囲が画面幅最大まで広がります。この設定は、特にモバイルからの閲覧者のユーザビリティがアップします。
- display: block;と同様に、<a>タグの縦幅を少し広げています。これも、モバイルユーザーがタップしやすくなるための調整です。
- 細かく操作できるPCでは、display: inline-block等で、クリック範囲を元に戻すこともできます。
タブレットでは2列表記
横幅の広くなるタブレットでは、縦長で右にスペースが空きすぎることを避けるため、2列で表記します。今回の設定で1番苦労した部分です。
|
1 2 3 4 5 6 7 8 |
@media screen and (min-width: 767px){ aside ul.categories{ column-count: 2; width: fit-content; min-width: 100%; } } |
- display:flexは親カテゴリの数に併せて余分なスペースが空くため、今回の場面では使えません。
- min-widthは他のCSS設定を考慮して、使わなくてもうまく適合する場合もあります。
display: flexで色々試しましたが、結果うまく並ばず。最終的にfit-contentを設定することで綺麗に収まりました。
PCでは1列表記に戻す
PCでのサイドバーは縦長に表示するため、モバイルのような1列表記に戻します。
|
1 2 3 4 5 6 7 8 9 10 11 |
@media screen and (min-width: 1025px){ aside ul.categories{ display: block; column-count: 1; } aside ul.categories li a{ padding: 0; } } |
- タブレットユーザー向けに2列表記した<ul>は、列数を1に戻してPCユーザー向けに設定します。
- モバイル、タブレットユーザーがタップしやすいように設定していたリンクタグのpaddingは、PCでは逆に間延びしたデザインになるため、元の範囲に戻します。
まとめ
当サイトに限って言えば、閲覧者のほとんどがPCからのため、モバイル向けやタブレット向けの表記はあまり意識しなくても良いのかもしれませんが、とはいえデザインが崩れていると、サイトとしてはあまり健全ではありません。
codepiaもまだまだ発展途上ですが、より良いデザインでたくさんの方に見てもらえたら嬉しいです。
コメント