【Cocoon】カテゴリーラベルを右寄せにする方法

Cocoonのカテゴリーラベルを右側に寄せたいなぁ…と思ったことはありませんか？

特にCocoon：2.8.3から自動でアイキャッチ画像を作成できるようになったものの、アイキャッチ画像の文字もカテゴリーラベルも左寄せなので、アイキャッチ文字が読みにくい…

そこでここでは、Cocoonのカテゴリーラベルを右側に寄せるテクニックをご紹介します！

変更前

変更後

前提条件

この記事は、Cocoon用のカスタマイズ方法です。
他のワードプレステーマでは不可能（または動作未確認）です。
また、Cocoonでもバージョンにより動作や設定が異なる場合があります。

【WordPress】6.7.2
【テーマ：Cocoon】2.8.4.1

なお当ブログ自体は別のテーマを使用していますが、姉妹サイト「株は人生の縮図ですか？」はCocoonで作っています。完成例としてご覧ください。

株は人生の縮図ですか？

株は人生の縮図ですか？ 大儲けも大損もない 平凡サラリーマンのリアル株取引

カテゴリーラベルの右寄せ方法

やり方は簡単で、以下のコードをCocoon Childのスタイルシート（style.css）に追記するだけ！

.cat-label, .related-entry-card .cat-label{
	left: auto;
	right: 5px;
}

たったこれだけで完成です！

応用編

さらにカスタマイズして、より個性的なカテゴリーラベルにすることもできます。

文字を大きくする

カテゴリーラベルの文字サイズは気持ち小さめなので、カテゴリーラベルの文字を大きくすると読みやすくなります。
ただし、大きすぎるとアイキャッチ画像が見にくくなるので、バランスを取りましょう！

.cat-label, .related-entry-card .cat-label{
	left: auto;
	right: 5px;
	font-size: 0.67em; /*カテゴリーラベルの文字の大きさ*/
}

角を丸める

カテゴリーラベルの角を丸めることで、可愛らしい感じにすることもできます。

border-radiusという設定を使用します。
値が大きいほど大きく角が丸くなりますが、値が大きいほどカテゴリーラベルの文字が読みにくくなります。

.cat-label, .related-entry-card .cat-label{
	left: auto;
	right: 5px;
	font-size: 0.67em; /*カテゴリーラベルの文字の大きさ*/
	border-radius: 10px; /*角を丸める*/
}

完成イメージ

まとめ

Cocoonのカテゴリーラベルを右側に寄せると、アイキャッチ画像の文字が被りにくくなります！

そこまで難しいカスタマイズではないので、ご自身で少し調べるだけで更なるカスタマイズも十分可能かと思います。
より分かりやすいカテゴリーラベルを作りましょう！