カテゴリーについて
カテゴリーは、ブログ、サイトの事柄を区別するために設けられたもの。
訪問者の目線に立ってコンテンツや記事を探しやすくするために区分、分類した箱のようなものです。
例えば、一つの家の中には各部屋があり、その部屋の中にはトイレやシャワー室、その中にはシャンプーや石鹸などの小物が存在します。
- 佐伯家
- １階
- 部屋･･･
- １階
これらを分岐して、分類したものがカテゴリーです。
Cocoonのデフォルトのデザインとしては以下の通り。
正直、このままのデザインでもシンプルで好きです。
ただ、少し、カスタマイズを加えたい方もいらっしゃると思います。
階層と投稿数をチェック
階層、投稿数を表示させない場合は無視して次の項目へと行ってください。
カテゴリーの階層、投稿数を表示する方法は以下の通り。
項目「外観」から「ウィジェット」をクリック
サイドバー項目「カテゴリー」の中の以下の項目にチェックを入れる
- ☑ 投稿数を表示
- ☑ 階層を表示
設定を保存するために「保存」をクリックする
Font Awesome 5 にチェック
Webアイコンを利用するので、Font Awesome 5にチェックを入れてください。
Font Awesome 4で利用する場合、また、Font Awesome 5で利用する場合のそれぞれの設定方法に関しては以下のリンクで解説しています。
カテゴリーの大まかな仕組み
Cocoonのカテゴリーの大まかな仕組みは、
カテゴリー見出し（大：階層１以下）
カテゴリー見出し（中：階層２以下）
カテゴリー見出し（小：階層３以下）
に分けられます。
それぞれのソースコードを見てみましょう。
カテゴリー見出し（大）
カテゴリー見出し（大）【中・小以下、含む】を編集するソースコード
.widget_categories ul li a{
/*ソースコードを書く*/
}また、見出しの前にアイコンを付けたい場合は《before》を利用します。
.widget_categories ul li a::before{
/*ソースコードを書く*/
}カテゴリー見出し（中）
カテゴリー見出し（中）【小以下、含む】を編集するソースコード
.widget_categories ul li ul li a{
/*ソースコードを書く*/
}また、見出しの前にアイコンを付けたい場合は《before》を利用します。
.widget_categories ul li ul li a::before{
/*ソースコードを書く*/
}カテゴリー見出し（小）
カテゴリー見出し（小）【小以下、含む】を編集するソースコード
.widget_categories ul li ul li ul li a{
/*ソースコードを書く*/
}また、見出しの前にアイコンを付けたい場合は《before》を利用します。
.widget_categories ul li ul li ul li a::before{
/*ソースコードを書く*/
}基本的には《ul》《li》の数を１セットとして、《a》の前に追加すれば次の階層を指定することができます。
サンプル例「矢印の国」
一つ目のサンプル例は「矢印の国」
サンプル（ソースコード）の前に画像で示すと、
アイコンの矢印はシンプルで良いですね。結構、気に入っています。
.widget_categories ul li a{
}
.widget_categories ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f152";
color: #000000;
padding-right: 7px;
font-weight: 900;
}
.widget_categories ul li ul li a{
}
.widget_categories ul li ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f0da";
color: #000000;
}サンプル例「あっちむいてほい」
二つ目のサンプル例は「あっちむいてほい」
サンプル（ソースコード）の前に画像で示すと、
人差し指を強調するアイコンもありました。まさに、あっちむいてほい！
.widget_categories ul li a{
}
.widget_categories ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f358";
color: #000000;
padding-right: 7px;
font-weight: 900;
}
.widget_categories ul li ul li a{
}
.widget_categories ul li ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f0a4";
color: #000000;
}サンプル例「ノートにチェック」
三つ目のサンプル例は「ノートにチェック」
サンプル（ソースコード）の前に画像で示すと、
文字を少し小さくして形を整えています。デザインとしては有りがちな点線を用いました。
.widget_categories ul li a{
border-bottom:dashed 1px #DCDCDC;
}
.widget_categories ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f039";
color: #000000;
padding-right: 7px;
font-weight: 900;
}
.widget_categories ul li ul li a{
font-size:16px;
}
.widget_categories ul li ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f00c";
color: #000000;
}サンプル例「野菜と空」
四つ目のサンプル例は「野菜と空」
サンプル（ソースコード）の前に画像で示すと、
灰色の下線に青と緑の矢印。文字の大きさはハッキリとしたベースを維持しています。
.widget_categories ul li a{
border-bottom:solid 1px #DCDCDC;
}
.widget_categories ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f103";
color: #000000;
padding-right: 10px;
font-weight: 900;
color:#0000ff;
}
.widget_categories ul li ul li a{
}
.widget_categories ul li ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f105";
color: #228b22;
}サンプル例「オールイン矢印」
五つ目のサンプル例は「オールイン矢印」
サンプル（ソースコード）の前に画像で示すと、
階層４まで表示させています。階層が多いのに分かりやすく表示されているように思います。
.widget_categories ul li a{
}
.widget_categories ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f14a";
color: #000000;
padding-right: 10px;
font-weight: 900;
color:#000000;
}
.widget_categories ul li ul li a{
}
.widget_categories ul li ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f101";
color: #000000;
}
.widget_categories ul li ul li ul li a{
}
.widget_categories ul li ul li ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f105";
color: #000000;
}
.widget_categories ul li ul li ul li ul li a{
}
.widget_categories ul li ul li ul li ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f0da";
color: #000000;
}カテゴリーのカスタマイズを楽しもう！
できる限り、シンプルにカテゴリーのデザインを編集してみました。
カスタマイズして分かったことはアイコンの矢印はカテゴリーの見出しを惹き立てるということ。カテゴリーのそれぞれが自然に強調されるため、シンプルではあるものの、かなり良い見た目になります。
また、カテゴリーの各階層を編集する場合は《ul》《li》の数に注目してください。
もしも、カテゴリーのデザインに迷われている方は参考にしてカスタマイズしてくださいませ。
コメント