ルクセリタスのカテゴリ名の表示(見た目)をカスタマイズする

CSS

「カテゴリ名」の見た目をカスタマイズする

タイトル下に表示される「カテゴリ名」の見た目をカスタマイズする

個別記事の下

デフォルトで表示されるカテゴリ名はこんな感じですね^^
カテゴリ名のカスタマイズ01

カスタマイズ後

こんな感じにカスタマイズしてみたいと思います。
カテゴリ名のカスタマイズ02

一覧表示の場合

カード型

カテゴリ表示のカスタマイズ03

タイル型

カテゴリ名のカスタマイズ04

スタイルシートに追記する

子テーマのCSSに以下のコードを追加します。

/* metaカテゴリ */
span.category {
	border-radius: 30px; /* 角の丸み */
	background: #f26163; /* 背景色 */
	padding: 0 15px; /* 上下 左右 */
	color: white; /* 区切り記号の色 */
}
span.category a{
	text-decoration: none; /* 下線を消す */
	color: white; /* リンク文字の色 */
	font-size: 12px;
	font-size: 1.2rem;
}
.meta > .fa-folder:before {
	display: none; /* カテゴリ名の前のアイコンを非表示 */
}

その他のカラーサンプル

4行目の背景色を書き換えます。カテゴリーが二つ以上ある場合は以下のような表示になります。

ba2636 ba2636
d9333f d9333f 紅赤
006400 006400 darkgreen
432f2f 432f2f 黒鳶
4191e0 4191e0 青系
f29193 f29193 ピンク系
1e73be 1e73be 青系
e44d26 e44d26 オレンジ系
555 555555 グレー系
f26163 f26163 ピンク系

あとがき

当サイトでは、カテゴリーやアーカイブの記事一覧表示にはカード型を採用しており、カテゴリ名を表示していません。
カラー選びのポイントは、サイトの基本色の中から選ぶこと、です。
文字の色がホワイトですので、背景色には基本色の中の色を少し濃くした色がオススメです。

当サイトの配色はBlueとPinkが基本色で、アクセントにOrangeとピンポイントにGreenを使用しているので
Pinkの濃いめのカラー(#f26163)を使用してみました。(2018.04.28現在)

2018.04.29 追記

スマホで見るとパディングがおかしなことになっていた(position: absolute; を追加した)のと、更新日も表示されているとカテゴリ名が2行になってしまうのを、小手先のやり方で、パディングの左右の数値を20pxから15pxに変更してみました。

3

カスタマイズ

Posted by どらみ