PR

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

スタイルシート(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行目までを削除して下さい。

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

アイコン表示

※ひとつの記事を複数カテゴリーに選択している場合

カテゴリーは複数にわけて表示するよりも、一つに絞ったほうがいい・・・なんて言われてますが

どっちのカテゴリーにも記事の内容があてはまる場合ってありますよね(汗)

ただ、カテゴリーを複数指定している場合、表示は横並びになってしまうのでご注意下さい。↓

複数カテゴリーわけ

まとめ

CSSにコピペするだけ!この方法ならばデザインを変更したくなっても、カンタンに削除することができて便利!

背景色・テキストの色・透明度などなど…サイトデザインに合わせてカスタマイズしてみて下さいね♪

カラー見本→原色大辞典


Simplicity2 コピペで簡単カスタマイズ一覧【まとめ】
初心者の私にもできるSimplicityの使い方やコピペするだけの簡単CSSカスタマイズ方法一覧【まとめ記事】です。