Cocoon カテゴリー・タグ表示のカスタマイズ方法とデザインサンプル8（アイキャッチラベル、記事下）

Cocoonのカテゴリー・タグ表示のデザインをカスタマイズする方法と、デザインサンプルを紹介します。

また、アイキャッチラベル（アイキャッチ画像左上のカテゴリー表示）の表示・非表示の設定の仕方も説明します。

編集するのはスタイルシート（CSS）のみです。

Cocoonのカテゴリー・タグ表示のカスタマイズ方法

デフォルトのカテゴリー・タグ表示のデザイン

通常、Cocoonでは投稿記事下にこのようなカテゴリーとタグの表示があります。

カテゴリー・タグ表示のHTML構成

この記事下のカテゴリー・タグは以下のようなHTMLの構成になっています。

<div class="entry-categories-tags>
<div class="entry-categories">
<a class="cat-link></a>
</div>
<div class="entry-tags">
<a class="tag-link></a>
</div>
</div>

基本的にはカテゴリーは「cat-link」、タグは「tag-link」というクラスをCSSで編集すればデザイン変更することができます。

カテゴリー・タグ表示のデザインサンプル

すべてカテゴリー（「cat-link」）で書いているので、タグの場合は「tag-link」に置き換えて使ってください。

１．シンプル

.cat-link {
 background-color: #fff;
 color: #222;
}

背景を白に、文字を黒（濃いグレー）にしています。

２．アイコンなし

.cat-link {
 background-color: #fff;
 color: #222;
}
.cat-link::before{
 display:none;
}

カテゴリーのフォルダアイコンを非表示にしました。
何のリンクか分かりにくくなる可能性もありますが、よりすっきりした感じになります。

３．背景色＋枠なし

.cat-link {
 background-color: #f6f6f6;
 color: #222;
}

デフォルトの状態から背景色、文字色を変更しただけです。

４．背景色＋枠あり

.cat-link {
 background-color: #f6f6f6;
 color: #222;
 border: 1px solid #333;
}

枠線付きです。

５．下線のみ

cat-link {
 background-color: #fff;
 color: #222;
 border-bottom: 1px solid #f0e5ad;
 border-radius: 0;
}
.cat-link::before{
display:none;
}

枠線で囲むよりもさらっとした印象です。

６．背景がグラデーション

.cat-link {
 background-color: #fff;
 color: #222;
 background: linear-gradient(to right, #6255ccab ,#dc8bb3bd ,#f6e2acb8);
}
.cat-link::before{
 display:none;
}

ポップなデザインのサイトには似合うと思います。
グラデーション（「background: linear-gradient」）の色や色数は変更可能です。

７．下線がグラデーション

.cat-link {
 background-color: #fff;
 color: #222;
}
.cat-link::before{
 display:none;
}
.cat-link::after {
 content: "";
 display: block;
 height: 1px;
 background: linear-gradient(to right, #6255cc ,#dc8baf ,#f6e2ac);
}

背景全体のグラデーションほどうるさくはないので、サイトの他の部分の色と合わせれば良いアクセントになると思います。

８．丸く囲む

.cat-link {
 background-color: #f6f6f6;
 color: #222;
 border-radius: 20px;
 padding: 8px 15px;
}

タグ一覧などでよく使われているデザインです。

アイキャッチラベル表示・非表示の設定

Cocoonでは、記事一覧ページと記事ページ上部（本文上）のアイキャッチ画像にカテゴリーが表示（アイキャッチラベル）されています。

【記事ページ上部（本文上）】

【記事一覧ページ】

これらを非表示にする方法を説明します。

記事ページ上部（本文上）のアイキャッチラベルの表示設定

記事ページ上部（本文上）のアイキャッチラベルの表示設定は、[Cocoon設定]内で行うことができます。

WordPress管理画面左側にある[Cocoon設定]→[Cocoon設定]→[画像]タブ内にある、「アイキャッチラベルを表示する」というチェックマークを入れると表示、外すと非表示になります。

記事一覧ページのアイキャッチラベルの表示設定

記事一覧ページのアイキャッチラベルは、CSSで変更します。
以下のCSSコードをCocoonの子テーマに貼り付けてください。

/* アイキャッチカテゴリーラベル非表示 */
.entry-card .cat-label,
.related-entry-card .cat-label{
 display: none;
}

さいごに

カテゴリー・タグのデザインはかなり細かいところなので、細部までデザインにこだわりたい場合や、練習がてらCSSを書いてみたいときにやってみると良いと思います。