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

2018.04.28カスタマイズ

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

記事一覧や個別記事のタイトル下などに表示される「カテゴリ名」の見た目をカスタマイズしてみる。

個別記事の下/デフォルト

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

これを下のようなイメージにカスタマイズします。

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

一覧表示ではこんな感じになります。

カード型

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

タイル型

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

追加するCSS

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

/* metaカテゴリ */
span.category {
	border-radius: 30px; /* 角の丸み */
	background: #f26163; /* 背景色 */
	padding: 0 15px; /* 上下 左右 */
	color: white; /* 区切り記号の色 */
	position: absolute;
}
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に変更してみました。

0
この記事を書いた人
どらみ

パソコン歴はWindows98からの元パソコンインストラクターです。以前はMS Office系のソフトウェアを主に教えていました。 今はWordPressのテーマLuxeritasにはまっています♪ 質問されると、つい親身になってしまう自称「ポジネガ人間」です。

応援する にほんブログ村 ブログブログ ブログノウハウへ

2018.04.28