【Simplicity2】サムネイルにカテゴリー名をCSSにコピペだけで表示する方法

現在このブログは、「Simplicity2」の後継テーマ『Cocoon』を使用しています。

トップページの一覧リストを「デフォルト」表示から、「サムネイル大」に変更してみました。

ついでに前々からやってみたかった、サムネイル（アイキャッチ）の上にカテゴリー名を重ねて表示してあるやつ

いろいろ検索しては実験を繰り返したのですが・・・

function.phpや、entry-card.phpなどをさわって高度な技？を見よう見まねで試しても、なぜだか表示されず　(T_T)

心が折れそうになった頃・・・

「Style.cssにコピペするだけ！」という、とても簡単で…わたしにピッタリの方法を見つけてしまいました♪

カテゴリー別に色分けはできませんが（私には無理）、1色でもイイ！

という方にはオススメです。

スタイルシート（Style.css）にコードをコピペ
※ひとつの記事を複数カテゴリーに選択している場合
まとめ

スタイルシート（Style.css）にコードをコピペ

Simplicity2（子テーマ）のスタイルシートに下のコードをコピーして貼り付けます。

→　Simplicity2 child　→　style.css

/* サムネイルにカテゴリー＆アイコン消す */
#list .category .fa {
	display: none; /* アイコン非表示 */
}
#list .entry {
	position: relative;
}
#list .category {
	position: absolute;
	left: 0px;
	top: 0px;
	background: #333; /* 背景色 */
	padding:0;
	opacity: 0.6; /* 透明度0～1 */
}
#list .post-meta .category a {
	color:#fff; /* 文字色 */
	font-size:16px; /* 文字大きさ */
	font-weight:bold; /* 文字太さ */
	text-decoration:none;
	padding:0 4px;
}
#list .post-meta .category {
	padding-right: 0;
}

※カテゴリーのアイコンを非表示にしていますが、不要ならば1～3行目までを削除して下さい。

ちなみに削除すると↓こんな感じでアイコンが表示されます。お好みでどうぞ♪