ブログデザイン改善奮闘記 -カテゴリ別に記事装飾の切り替え編

こんばんにゃん♪　ねこさんにゃん♪

昨日に引き続き、ブログのデザインをいろいろ調整していきますん。

あまり資料が見つからなかった「設定したカテゴリによって記事の装飾を変える方法」を書いていきますので、誰かの参考になれば嬉しいです。

• このブログは「2人」で書いています
• CSSは「if文」を使えないので「:has()」を使った
• 改善の余地は多いにあり

このブログは「2人」で書いています

このブログは「ねこさん」と「うーさん」が書いているんですよ。

なので、カテゴリーに誰が書いたを明記してるんですが、如何せん以下の通りの表示なもんでな……　分かりづらい。

上がねこさん、下がうーさんが書いた記事ですが、カテゴリに名前が書かれてても、パッと見ではわからないんですよねぇ。

パッと分かるためには色の効果はでかいので、「ねこさん」のカテゴリーがあればオレンジ枠を、「うーさん」のカテゴリーがあればピンク枠を表示しようと思います。

CSSは「if文」を使えないので「:has()」を使った

CSSの難点は、何と言ってもif文が使えないことですなぁ。
「ねこさん」のカテゴリが存在する場合オレンジ枠を～、と書ければいいんですが、そういう条件を記述することができない……

そう思いながら関数を探していたところ「:has()」なるものを発見。
「○○:has(▢▢)」と書くと、「○○の中に▢▢という要素が存在する場合に適応」という関数なんですな。便利っ！！

そんなわけで、以下のように記述しました。

.page-archive .archive-entry:has(.category-ねこさん) {
background: #fff;
border: 3px solid rgba(255,182,117,.8);
margin-bottom: 30px;
padding: 9% 6% 6%;
}
.page-archive .archive-entry:has(.category-うーさん) {
background: #fff;
border: 3px solid rgba(255,163,236,.8);
margin-bottom: 30px;
padding: 9% 6% 6%;
}
.entry:has(.category-ねこさん){
background: #fff;
border: 3px solid rgba(255,182,117,.8);
margin-bottom: 2em;
padding: 8% 5%;
}
.entry:has(.category-うーさん){
background: #fff;
border: 3px solid rgba(255,163,236,.8);
margin-bottom: 2em;
padding: 8% 5%;
}

上2つが記事一覧に対する適応。下2つが記事詳細に対する適応です。
それによって出来上がった枠がこちら。

改善の余地は多いにあり

今回は「background」「padding」などの編集していない値まで書いてしまっていますが、そこは後で省こうかな、と。今はひとまず「意図した表示にできること」を優先したので、精査してないです。

で、精査した後に何ができるようになるかといいますとね……

他のカテゴリーが設定されている時に、背景画像を設定する……なんてこともできちゃうんですよ！！　いいですね！！！

いつかやります。やりましょう。