Cocoonのカテゴリーラベルのカスタマイズ

Cocoon

投稿記事が属しているカテゴリを、投稿リストなどに表してくれるカテゴリラベル。

今回はCocoonのカテゴリラベルのカスタマイズを紹介したい。これらはすべてコピペするだけで簡単にデザインを変えることができる。

スポンサーリンク

カテゴリラベルとは

簡単に説明すると、通常はホーム画面で投稿した記事が一覧で表示されるようになっているが、その投稿リストに表示されている記事がどのカテゴリに属しているのかを一目でわかりやすく表示する機能である。

これにより、一覧に表示されている記事はどのような内容でくくられている記事なのかが一目瞭然となる。

また、このカテゴリラベルは投稿記事だけではなく、関連記事やCocoonのショートコードで出力する新着・人気記事にも使われている。

ただし、このカテゴリラベルは一番下の階層が出力されるようになっている。記事のカテゴリを子カテゴリにしていた場合は子カテゴリが、孫カテゴリにしていた場合は孫カテゴリが出力される。つまり、Cocoonのカテゴリリストは仕組み上、子カテゴリを設定している場合は親カテゴリが出力されず、孫カテゴリまで設定している場合は親・子カテゴリが出力されないようになっている

よって、上に記載したことには注意しておこう。

カテゴリラベルのカスタマイズ

それでは、カテゴリラベルのカスタマイズをいくつか紹介したい。現在私が使用しているものも忘備録的に書き留めておく。

これから記載するCSSコードは必ず子テーマのstyle.cssにコピペしよう親テーマにコピペした場合、Cocoonテーマの更新が来るたびにリセットされてしまうからだ。

私はCocoonのスキンを使用していない。よって、Cocoon設定からスキンを選んで使用している場合は注意してほしい。

位置と文字の再調整

まずは、カテゴリラベルが表示される場所がデフォルトのままでは窮屈に感じたので、それを再調節する。

また、同時に文字の大きさや太さ、行の高さも再調節する。

CSSコード
/*Cocoonのcat-label(カテゴリラベル)の位置と文字のカスタマイズ*/
/*ここから*/
.cat-label {
	top: 4%;
	left: 2.5%;
	line-height: 1.8;
	font-size: 0.67em;
	font-weight: 500;
}
/*ここまで*/

カテゴリラベルは絶対位置に設定されているので、上端からの距離と左端からの距離を再調節するだけでよい。

こうすることで、カテゴリラベルとアイキャッチの端の間隔は

いままでこのような狭さだったが

このように窮屈さを感じさせない位置取りとなった。

また文字の大きさを微妙に大きくし、文字の太さを通常よりもう少し太い500に設定、行の高さは本文と同じ1.8にしておくことで、アイキャッチの視認性を上げた。

単位を「px(ピクセル)」ではなく「%(パーセント)」で設定した理由は、カテゴリラベルの設定を使いまわすためである。カテゴリラベルは関連記事やカルーセルなどのアイキャッチ(サムネイル)サイズが違う様々な場所で使われているため、ピクセルを用いて絶対距離で設定すると小さいアイキャッチではラベルの位置が崩れてしまうからである。ただし、アイキャッチの場所ごとにラベルのデザインも細かく変えるのであれば、パーセントで設定する必要はない

文字サイズの「em」は、Cocoon側で設定しているサイトの基本の文字サイズとの相対的な大きさを表す単位である。これも上記で説明している「%(パーセント)」のように使うことができる。

これでカスタマイズの土台のカスタマイズは完了した。

ラベルデザイン

それでは、いくつかのデザイン例を提示する。子テーマにコピペするだけでよい。

スケルトン

カテゴリラベルの背景を半透明にすることで、アイキャッチの画像全体が見やすくなる。どんなサイトにも調和するオーソドックスで基本的なデザインだ。

CSSコード
/*Cocoonのcat-label(カテゴリラベル)のデザインのカスタマイズ:スケルトン*/
/*ここから*/
.cat-label {
	padding: 1px 10px;
	background-color: rgba(51, 51, 51, 0.5);
	border: 0;
	border-radius: 30px;
}
/*ここまで*/

このコードを子テーマのstyle.cssにコピペして更新すると、外観はこのようになる。

カスタマイズの内容は下記のようになる。

カスタマイズ解説
  • paddingを再設定し内側の横の幅を広げた。
  • 背景の透過率を0.7から0.5に高くすることで、よりアイキャッチが透けて見えるように設定した。
  • 「border: 0;」にすることで、カテゴリラベルを囲っていた白い枠を消した。
  • 要素の輪郭を丸めて楕円にした。

こうすることで、枠線が消えスッキリとし、さらに全体的に余裕をもった柔らかいデザインとなった。透過率を抑えることでラベルが主張し過ぎないため、どのようなサイトにも調和するだろう。

付箋

アイキャッチ画像に付箋を挟むようなデザインのカスタマイズ。

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」の部分をこのように変えよう。

CSSコード
.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;
}

こうすることで、右端はこのようになる。

カスタマイズの内容はこのようになっている。

カスタマイズ解説
  • このカテゴリラベルは「投稿リスト」のみで使うため、CSSは必ず「.entry-card-thumb .cat-label:」にする
  • top:とleft:の位置を再調節する。その際は必ずleft:はピクセルで設定しなければならない。相対位置ではサムネイルのサイズによって位置が崩れてしまう
  • カテゴリラベルを囲うborder:は使わないので0にした
  • 「overflow: visible;」に設定しなおすことで、ラベルからはみ出した要素を可視化できるようにした。Cocoonのデフォルト設定では「overflow: hidden;」に設定されているからだ。
  • 折り返しやリボンは疑似要素である「::before」と「::after」を使う。この際、デザインの崩れを防ぐため、position:はカテゴリラベルの絶対位置を使用する。
  • 「content: “”;」を使うことで疑似的な要素を形成する。これは要素のオマケの要素のようなものである。
  • 疑似要素で三角形を作る際は、幅「width:」と高さ「height:」を「0(ゼロ)」にすることで、border:の四辺は三角形になる(もともとborder:は4つの台形の集まりなのだ)。
  • 最後は::beforeと::afterの疑似要素をborder:を使って三角形にし、pxで長さを調節して辺にぴったり合うように整えて完成。

疑似要素のborder:の幅は絶対的な値であるpxしか使えないため、ラベルの文字のサイズが大きかったり小さかったりするとラベル自体の太さが変わるためデザインが崩れてしまう。

そのため、コピペしてデザインが崩れている場合は、文字サイズの設定と合わせて疑似要素のborder:のサイズも変えることで柔軟に対応してほしい。

このようなラベルにすることで、ポップな仕上がりとなった。日記などのブログに向くデザインだろう。

しおり

アイキャッチに上からしおりを挟むようなデザインのカスタマイズ。

CSSコード
/*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にコピペして更新すると、外観はこのようになる。

カスタマイズの解説はこうだ。

カスタマイズ解説
  • 基本的には上で説明した「付箋」とあまり変わらないカスタマイズになる。
  • このデザインの場合はtop:をピクセルの絶対距離に設定し、left:はパーセントの相対距離に設定する。
  • 「border-top-right-radius:」を設定することで、折り曲げて被せているように見せる。6pxではなく3pxなのは、6pxでは丸すぎて角張ってる感が出なかったため。
  • 最後は疑似要素の三角形を整えて完成。

ちなみに、このカスタマイズで下端を装飾しなかった理由は、カテゴリ名の長さによってラベルの長さも変わるからである。

なぜなら、border:の数値の単位はpxしか使えないので、3文字のカテゴリ名や10文字のカテゴリ名ではリボンのような装飾を施しても崩れてしまう。

ただし、例えばカテゴリラベルの長さを「width: 100px;」などのように、絶対的な単位を使っている場合は問題なく疑似要素で装飾できるが、その際はカテゴリ名の長さに気を付けなければならない。長すぎるとラベルからはみ出してしまうからだ。

このデザインは、本やグッズの紹介がメインのブログに合うだろう。ホリデーシーズンはラベルカラーを赤系統に変えるのもいいかもしれない。

プレート

家やマンションの表札、もしくは車のプレート風にするデザインのカスタマイズ。

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;
}
/*ここまで*/

外観はこのようになる。

カスタマイズの内容はこのようになる。

カスタマイズ解説
  • カテゴリラベルの硬質感を出すために、border:を利用した。この際、幅は2pxで色は黒に近い#333を使用することによって、車のプレートのような金属に近い質感に仕上がった。
  • 四隅が角張ったままでは威圧感があったため「border-radius: 3px;」に設定し、丸すぎず尖りすぎもしないデザインにした。
  • 鋲は半角英数字の「:」を使用、そのままでは小さいのでfont-size:を18pxにして違和感のない大きさにした。
  • 最後は鋲の位置を修正して完成した。

このデザインは家や車、DIYなどのブログの雰囲気に合うだろう。背景を白、文字と鋲を黒にしてよりナンバープレートっぽくしてもいいかもしれない。

最後に

現在、私は下記のように表記したスケルトンデザインを使用している。

CSSコード
/*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ファイルも少しだけ軽くなるからである。


今回は、カテゴリラベルのカスタマイズを忘備録がてらに書き記しておいた。

また何かカテゴリラベルのカスタマイズを思いついたら追記しようかと思う。