投稿記事が属しているカテゴリを、投稿リストなどに表してくれるカテゴリラベル。
今回はCocoonのカテゴリラベルのカスタマイズを紹介したい。これらはすべてコピペするだけで簡単にデザインを変えることができる。
カテゴリラベルとは
簡単に説明すると、通常はホーム画面で投稿した記事が一覧で表示されるようになっているが、その投稿リストに表示されている記事がどのカテゴリに属しているのかを一目でわかりやすく表示する機能である。
これにより、一覧に表示されている記事はどのような内容でくくられている記事なのかが一目瞭然となる。
また、このカテゴリラベルは投稿記事だけではなく、関連記事やCocoonのショートコードで出力する新着・人気記事にも使われている。
ただし、このカテゴリラベルは一番下の階層が出力されるようになっている。記事のカテゴリを子カテゴリにしていた場合は子カテゴリが、孫カテゴリにしていた場合は孫カテゴリが出力される。つまり、Cocoonのカテゴリリストは仕組み上、子カテゴリを設定している場合は親カテゴリが出力されず、孫カテゴリまで設定している場合は親・子カテゴリが出力されないようになっている。
よって、上に記載したことには注意しておこう。
カテゴリラベルのカスタマイズ
それでは、カテゴリラベルのカスタマイズをいくつか紹介したい。現在私が使用しているものも忘備録的に書き留めておく。
これから記載するCSSコードは必ず子テーマのstyle.cssにコピペしよう。親テーマにコピペした場合、Cocoonテーマの更新が来るたびにリセットされてしまうからだ。
位置と文字の再調整
まずは、カテゴリラベルが表示される場所がデフォルトのままでは窮屈に感じたので、それを再調節する。
また、同時に文字の大きさや太さ、行の高さも再調節する。
/*Cocoonのcat-label（カテゴリラベル）の位置と文字のカスタマイズ*/
/*ここから*/
.cat-label {
top: 4%;
left: 2.5%;
line-height: 1.8;
font-size: 0.67em;
font-weight: 500;
}
/*ここまで*/カテゴリラベルは絶対位置に設定されているので、上端からの距離と左端からの距離を再調節するだけでよい。
こうすることで、カテゴリラベルとアイキャッチの端の間隔は
いままでこのような狭さだったが
このように窮屈さを感じさせない位置取りとなった。
また文字の大きさを微妙に大きくし、文字の太さを通常よりもう少し太い500に設定、行の高さは本文と同じ1.8にしておくことで、アイキャッチの視認性を上げた。
これでカスタマイズの土台のカスタマイズは完了した。
ラベルデザイン
それでは、いくつかのデザイン例を提示する。子テーマにコピペするだけでよい。
スケルトン
カテゴリラベルの背景を半透明にすることで、アイキャッチの画像全体が見やすくなる。どんなサイトにも調和するオーソドックスで基本的なデザインだ。
/*Cocoonのcat-label（カテゴリラベル）のデザインのカスタマイズ：スケルトン*/
/*ここから*/
.cat-label {
padding: 1px 10px;
background-color: rgba(51, 51, 51, 0.5);
border: 0;
border-radius: 30px;
}
/*ここまで*/このコードを子テーマのstyle.cssにコピペして更新すると、外観はこのようになる。
カスタマイズの内容は下記のようになる。
こうすることで、枠線が消えスッキリとし、さらに全体的に余裕をもった柔らかいデザインとなった。透過率を抑えることでラベルが主張し過ぎないため、どのようなサイトにも調和するだろう。
付箋
アイキャッチ画像に付箋を挟むようなデザインのカスタマイズ。
/*Cocoonのcat-label（カテゴリラベル）のデザインのカスタマイズ：付箋*/
/*ここから*/
.entry-card-thumb .cat-label {
top: 5%;
left: -10px;
padding: 1px 10px 1px 20px;
background-color: #6785F3;
border: 0;
overflow: visible;
}
.entry-card-thumb .cat-label::before, .entry-card-thumb .cat-label::after {
position: absolute;
content: "";
width: 0;
height: 0;
}
.entry-card-thumb .cat-label::before {
top: -6px;
left: 0;
border-bottom: 6px solid #284DD9;
border-left: 10px solid transparent;
}
.entry-card-thumb .cat-label::after {
top: 0;
right: -10px;
border-top: 11.5px solid transparent;
border-bottom: 11.5px solid transparent;
border-left: 10px solid #6785F3;
}
/*ここまで*/このコードを子テーマのstyle.cssにコピペして更新すると、外観はこのようになる。
また、リボン風にしたいときはコードの「::after」の部分をこのように変えよう。
.entry-card-thumb .cat-label::after {
top: 0;
right: -10px;
border-top: 11.5px solid #6785F3;
border-bottom: 11.5px solid #6785F3;
border-left: 10px solid #6785F3;
border-right: 10px solid transparent;
}こうすることで、右端はこのようになる。
カスタマイズの内容はこのようになっている。
このようなラベルにすることで、ポップな仕上がりとなった。日記などのブログに向くデザインだろう。
しおり
アイキャッチに上からしおりを挟むようなデザインのカスタマイズ。
/*Cocoonのcat-label（カテゴリラベル）のデザインのカスタマイズ：しおり*/
/*ここから*/
.entry-card-thumb .cat-label {
top: -6px;
left: 3%;
padding: 11px 10px 1px 10px;
background-color: #6785F3;
border: 0;
border-top-right-radius: 3px;
overflow: visible;
}
.entry-card-thumb .cat-label::before, .entry-card-thumb .cat-label::after {
position: absolute;
content: "";
width: 0;
height: 0;
}
.entry-card-thumb .cat-label::before {
top: 0;
left: -6px;
border-bottom: 6px solid #284DD9;
border-left: 6px solid transparent;
}
/*ここまで*/このコードを子テーマのstyle.cssにコピペして更新すると、外観はこのようになる。
カスタマイズの解説はこうだ。
このデザインは、本やグッズの紹介がメインのブログに合うだろう。ホリデーシーズンはラベルカラーを赤系統に変えるのもいいかもしれない。
プレート
家やマンションの表札、もしくは車のプレート風にするデザインのカスタマイズ。
/*Cocoonのcat-label（カテゴリラベル）のデザインのカスタマイズ：プレート*/
/*ここから*/
.entry-card-thumb .cat-label {
padding: 1px 15px;
background-color: #6785F3;
border: 2px solid #333;
border-radius: 3px;
}
.entry-card-thumb .cat-label::before, .entry-card-thumb .cat-label::after {
position: absolute;
content: ":";
top: -6px;
font-size: 18px;
}
.entry-card-thumb .cat-label::before {
left: 3px;
}
.entry-card-thumb .cat-label::after {
right: 3px;
}
/*ここまで*/外観はこのようになる。
カスタマイズの内容はこのようになる。
このデザインは家や車、DIYなどのブログの雰囲気に合うだろう。背景を白、文字と鋲を黒にしてよりナンバープレートっぽくしてもいいかもしれない。
最後に
現在、私は下記のように表記したスケルトンデザインを使用している。
/*Cocoonのcat-label（カテゴリラベル）のカスタマイズ（全体）*/
/*ここから*/
.cat-label, .related-entry-card .cat-label {
padding: 1px 10px;
background-color: rgba(51, 51, 51, 0.5);
top: 4%;
left: 2.5%;
border: 0;
border-radius: 30px;
line-height: 1.8;
font-size: 0.67em;
font-weight: 500;
}
/*ここまで*/「.cat-label, .related-entry-card .cat-label」としているのは、関連記事も同じデザインの同じコードにしてしまったほうが手っ取り早い。
また、コード自体も省エネとなるので、style.cssファイルも少しだけ軽くなるからである。
今回は、カテゴリラベルのカスタマイズを忘備録がてらに書き記しておいた。
また何かカテゴリラベルのカスタマイズを思いついたら追記しようかと思う。
