こんばんにゃん♪ ねこさんにゃん♪
昨日に引き続き、ブログのデザインをいろいろ調整していきますん。
あまり資料が見つからなかった「設定したカテゴリによって記事の装飾を変える方法」を書いていきますので、誰かの参考になれば嬉しいです。
このブログは「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」などの編集していない値まで書いてしまっていますが、そこは後で省こうかな、と。今はひとまず「意図した表示にできること」を優先したので、精査してないです。
で、精査した後に何ができるようになるかといいますとね……
他のカテゴリーが設定されている時に、背景画像を設定する……なんてこともできちゃうんですよ！！ いいですね！！！
いつかやります。やりましょう。