【Luxeritas】メタ情報のカテゴリーのカスタマイズ

2023/07/022024/09/04Luxeritas

もうダサくしないカスタマイズ第4回。

今回は
Luxeritas（ルクセリタス）の
メタ情報のカタゴリーの
カスタマイズをして行きます。

メタ情報のカタゴリーというのは
記事一覧のこの部分ですね。

メタ情報のカタゴリーのカスタマイズは
検索すると出て来ると思いますが
最終的に記事一覧のデザインを調整するので
『ナツメグチャンネル』でもやります。

最終的にはスマホの画面の記事一覧に
沢山記事を並べるのが目標になります。

こんなデザインにして行きます。

メタカテゴリーをスマホ画面で綺麗に並べるには
原則的に1記事に1カテゴリーにすると良いです。

文字数も少なくして下さい。

【Luxeritas】メタ情報のカテゴリーのカスタマイズ

スタイルシートにCSSを書き込みます。

/*メタ情報のカテゴリー*/
span.category{
	background: #fff;
	padding: 2px 6px;
	color: #0099ff;
	border: 1px solid #0099ff;
}

span.category a{
	text-decoration: none; 
	color: #0099ff;
}

span.category i{
	display: none;
}

span.category a:hover{
    color: #cceaff;
}

今回は青を基調にした知的なデザインの
ブログのしたかったのでこんな感じに仕上げました。

CSSの説明をすると
span.categoryは青い外枠の大きさと色。

span.category aは文字の色です。

text-decorationは文字の下の線で
noneを指定する事で文字の下の線が消せます。

span.category iはアイコンで
noneを指定する事で消しました。

span.category a:hoverはマウスホバー時の文字の色。

オーソドックスな
メタ情報のカタゴリーデザインは
白抜きの文字で
背景に色が付いているタイプだと思います。

こんなやつですね。

CSSはこう。

/*メタ情報のカテゴリー*/
span.category{
	background: #0099ff;
	padding: 2px 8px;
	color: #0099ff;
}

span.category a{
	text-decoration: none; 
	color: #fff;
}

span.category i{
	display: none;
}

span.category a:hover{
    color: #cceaff;
}

角を丸くしてみました。

/*メタ情報のカテゴリー*/
span.category{
	border-radius: 15px;
	background: #0099ff;
	padding: 2px 8px;
	color: #0099ff;
}

span.category a{
	text-decoration: none; 
	color: #fff;
}

span.category i{
	display: none;
}

span.category a:hover{
    color: #cceaff;
}

border-radiusが背景の角を丸くする指示です。

色や背景のサイズの数値を変更して
好みのデザインにして下さい。

もうダサくしないカスタマイズ

【Luxeritas】もうダサくしないカスタマイズ
【Luxeritas】サムネイルは正方形か長方形か!?
【Luxeritas】サムネイルを長方形に統一
【Luxeritas】記事一覧カスタマイズ【カード型】
【Luxeritas】文字の色はどうしよう!?【文字リンク】
【Luxeritas】SNSシェアボタンを消します
【Luxeritas】ブログカードのカスタマイズ
【Luxeritas】デベロッパーツールの使い方【Google Chrome】
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】
【Luxeritas】カルーセルスライダーのカスタマイズ【JIN風】
【Luxeritas】メニュー（グローバルナビ）とフッターの色を揃える
【Luxeritas】ページネーションのカスタマイズ
【Luxeritas】ヘッダー上の帯メニューのカスタマイズ
【Luxeritas】記事内のカスタマイズ【Snow Monkey Editor】
【Luxeritas】目次のカスタマイズ
【Luxeritas】サイドバーカテゴリーのカスタマイズ【AFFINGER風】
【Luxeritas】サイドバーカテゴリーのカスタマイズ【JIN風】
【Luxeritas】サイドバープロフィールのカスタマイズ
【Luxeritas】カテゴリーと記事一覧にタイトルを付ける
【Luxeritas】パターン登録の使い方
【Luxeritas】新着記事のカスタマイズ
【Luxeritas】グローバルナビのメニューにアイコンを付ける