ラベルとは
ラベルとは、記事のカテゴリーを表示したものです。
Cocoonのラベルは、アイキャッチ画像の左上に表示されます。
以下の画像の左上にあるのがラベルです。
ラベルはジャンル（カテゴリー）を指す重要な役割を持っています。
ラベルが存在しないと画像のみの表示となってしまうので訪問者からすると、どのカテゴリーの記事なのかを判別することができません。
Cocoonのラベルはシンプルで見やすいラベル。
今回は、このラベルをカスタマイズしていきます。
ラベルの要素
Cocoonのラベルをカスタマイズする前に、ラベルに使われた各要素を見ていきます。
各要素の見つけ方は以下のリンク先でも解説しています。
上記の方法を試して要素を見つけ出した結果、記事タイトルに利用されているセレクタは以下の《.cat-label》クラスということが分かりました。
.cat-label {
}しかし、これは、複数のラベルを一つのCSSで装飾する場合です。例えば、冒頭のアイキャッチ画像と記事内のアイキャッチ画像のラベルの装飾を別々に施したい場合には向いていません。
冒頭のアイキャッチ画像と記事内のアイキャッチ画像のラベルの装飾を別々に施したい場合は子孫セレクタで以下の２つのセレクタを指定します。
上記のソースコードはインデックス（サイトの冒頭ページ）のラベルのみを指定しています。
.entry-card-thumb .cat-label {
}全体のラベル（冒頭ページと記事ページ）も変更する場合は、以下のソースコードを追加します。
.eye-catch .cat-labe{
}Font Awesomeを使う場合の設定変更
ラベルにWebアイコンを使用する場合はCocoon側の設定を変更します。
Webアイコン、フォントは以下のような物です。
このようなアイコンを利用する場合は、Font Awesomeを利用します。
その場合として、Font Awesome 4 からFont Awesome 5 に変更することを推奨します。
以下、リンク先にてFont Awesomeの設定変更手順について解説しています。
Cocoonのラベル（デフォルト）
Cocoonのラベルのデフォルト（元々）の表示は以下の通りです。
まず、先程の画像にて紹介したサイト冒頭ページのアイキャッチ画像。
次に、記事ページの冒頭の画像。
両方共に画像の左上にラベルが表示されているはずです。
ラベルのカスタマイズ《サンプル》
シンプルにラベルにカスタマイズを施してみました。
以下、サンプルをコピーして利用頂いても問題ありません。
サンプル「グリーン・枠・カラー」
一つ目のサンプル例は「グリーン・枠・カラー」
実際に表示させてみると以下の画像のようになります。
ライトグリーンで枠を設定しました。透過、文字色は操作していません。
以下はソースコードになります。
.entry-card-thumb .cat-label {
border: 2px dashed #00ff00;
}
.eye-catch .cat-label{
border: 2px dashed #00ff00;
}サンプル「シンプル・ブラック」
二つ目のサンプル例は「シンプル・ブラック」
実際に表示させてみると以下の画像のようになります。
背景を黒色にし、一部の角に丸みを付けています。
透過を無くし、背景は黒に白い文字にすることで、ラベルの文字が見やすくなったような気もします。
以下はソースコードになります。
.entry-card-thumb .cat-label {
margin: 3px 0px 0px 3px;
background-color: #000000;
border: 2px dashed #000000;
border-radius: 10px 0px 10px 0px;
}
.eye-catch .cat-label{
margin: 3px 0px 0px 3px;
background-color: #000000;
border: 2px dashed #000000;
border-radius: 10px 0px 10px 0px;
}サンプル「ボトム・トップシンプル」
三つ目のサンプル例は「アンダー・トップシンプル」
実際に表示させてみると以下の画像のようになります。
よくあるタイプのラベルです。
下線、上線を引いています。シンプルですがラベルが目立って見えるので個人的には好きです。
以下はソースコードになります。
.entry-card-thumb .cat-label {
margin: 3px 0px 0px 3px;
background-color: #000000;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 0px dashed #FFFFFF;
border-right: 0px dashed #FFFFFF;
}
.eye-catch .cat-label{
margin: 3px 0px 0px 3px;
background-color: #000000;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 0px dashed #FFFFFF;
border-right: 0px dashed #FFFFFF;
}サンプル「ブルー・アイコン」
四つ目のサンプル例は「ブルー・アイコン」
実際に表示させてみると以下の画像のようになります。
背景を青色にし、角に丸みを付けています。
Font Awesomeを利用してカテゴリーアイコンを付けています。
以下はソースコードになります。
.entry-card-thumb .cat-label {
margin: 3px 0px 0px 3px;
background-color: #4169e1;
border: 1px dashed #4169e1;
border-radius: 15px;
}
.eye-catch .cat-label{
margin: 3px 0px 0px 3px;
background-color: #4169e1;
border: 1px dashed #4169e1;
border-radius: 15px;
}
.entry-card-thumb .cat-label:before {
color: #FFFFFF;
margin-right: 3px;
margin-left: 3px;
font-family: "Font Awesome 5 Free";
content: "\f07b";
font-weight: 900;
}
.eye-catch .cat-label:before {
color: #FFFFFF;
margin-right: 3px;
margin-left: 3px;
font-family: "Font Awesome 5 Free";
content: "\f07b";
font-weight: 900;
}サンプル「グラデーション・ブラック」
五つ目のサンプル例は「グラデーション・ブラック」
実際に表示させてみると以下の画像のようになります。
背景を黒色から灰色にグラデーションにしてみました。
また、全体を斜めに傾けています。
更に、Font Awesomeを利用してカテゴリーアイコンを付けています。
以下はソースコードになります。
.entry-card-thumb .cat-label {
margin: 3px 0px 0px 3px;
border: 0px dashed #4169e1;
transform: skew(-10deg);
background-image: -webkit-gradient(linear, left top, right top, from(#000000), to(#696969));
background-image: -webkit-linear-gradient(left, #000000 0%, #696969 100%);
background-image: linear-gradient(to right, #000000 0%, #696969 100%);
}
.eye-catch .cat-label{
margin: 3px 0px 0px 3px;
border: 0px dashed #4169e1;
transform: skew(-10deg);
background-image: -webkit-gradient(linear, left top, right top, from(#000000), to(#696969));
background-image: -webkit-linear-gradient(left, #000000 0%, #696969 100%);
background-image: linear-gradient(to right, #000000 0%, #696969 100%);
}
.entry-card-thumb .cat-label:before {
color: #FFFFFF;
margin-right: 3px;
margin-left: 3px;
font-family: "Font Awesome 5 Free";
content: "\f07b";
font-weight: 900;
}
.eye-catch .cat-label:before {
color: #FFFFFF;
margin-right: 3px;
margin-left: 3px;
font-family: "Font Awesome 5 Free";
content: "\f07b";
font-weight: 900;
}Cocoonのラベルをカスタマイズしてみよう！
ラベルのカスタマイズ方法についてサンプル付きで解説しました。
といっても、Cocoonで用意された元々のラベルは完成度が高いため、わざわざカスタマイズする必要も無いと思います。
ラベル自体が目立たないため、少し雰囲気を変更したいとお考えの方は一考の余地はあります。
もしも、カスタマイズが面倒だという方で、気に入ったラベルのサンプルが御座いましたら、利用してみてはいかがでしょうか。
コメント