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

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

2024/06/13Luxeritas

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

もうダサくしないカスタマイズ第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が背景の角を丸くする指示です。

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

今回は以上です。

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

【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