【WordPress】meta情報のカテゴリやタグをCSSでデザインする

WordPressWordpressデザイン, WordPressテーマ

記事一覧や記事中に表示されるカテゴリやタグのmeta情報をCSSデザインしました

まるっと。さんの記事「ルクセリタスのカテゴリ名の表示(見た目)をカスタマイズする」をほぼほぼ参考にさせて頂きました

meta情報のCSSセレクタ名

利用中のテンプレート「Luxeritas」でのCSSセレクタ名になりますので、テンプレートが違う場合は参考までに

meta情報

投稿日 span.date(.published)
更新日 span.date
カテゴリ span.category
タグ span.tag

アイコン

投稿日 .meta > .fa-clock-o:before
更新日 .meta > .fa-repeat:before
カテゴリ .meta > .fa-folder:before
タグ .meta > .fa-tags:before

meta情報のカテゴリをCSSでデザインする

記事一覧および記事中のmeta情報カテゴリにCSSを適用します

span.category a{
	padding:2px 6px;
	color:white;
	border-radius:4px;
	text-decoration:none;
	background:#47bea0;
}

マウスホバー時に背景色を変更したい場合

span.category a:hover {
	background: #009966;
}

マウスを離した時もふわっとさせたい時は「transition」を追加します

span.category a{
	padding:2px 6px;
	color:white;
	border-radius:4px;
	text-decoration:none;
	background:#47bea0;
	transition: 0.7s;
}

span.category a:hover {
	background: #009966;
}

複数のカテゴリやタグがある場合、間にカンマが入ってしまいますが気になる場合はspan.categoryの文字色をブログの背景色と同化させるか対応したファイルのphpを編集するかだとおもいます

こちら、あまり目立たないのでそのままにしてあります

meta情報のアイコンを非表示にする

まるっと。さんの記事「ルクセリタスのカテゴリ名の表示(見た目)をカスタマイズする」をそのま使わせて頂きました

.meta > .fa-folder:before {
	display: none;
}