IDOL×IDOL STORY! 感想レビュー サムネイル ナツメグチャンネル
Luxeritas カスタマイズ サムネイルナツメグチャンネル
【Luxeritas】記事一覧カスタマイズ【カード型】 サムネイル ナツメグチャンネル
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02 ナツメグチャンネル

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

2024/09/04Luxeritas

【Luxeritas】メタ情報のカテゴリーのカスタマイズ サムネイルナツメグチャンネル
ナツメグチャンネル プロフィール 02
ナツメグ

ナツメグです

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

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

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

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;
}
Luxeritas メタ情報のカテゴリー 02ナツメグチャンネル

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

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

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

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

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

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

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

Luxeritas メタ情報のカテゴリー 03

こんなやつですね。

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;
}

角を丸くしてみました。

Luxeritas メタ情報のカテゴリー 04
/*メタ情報のカテゴリー*/
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が背景の角を丸くする指示です。

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

ナツメグチャンネル プロフィール 02
ナツメグ

今回は以上です


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

【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】グローバルナビのメニューにアイコンを付ける

Luxeritas