WordPressテーマ「SWELL」カスタマイズの備忘。
どうやってやるのかなあと個人的に疑問に思ったので色々調べてやってみました、今回は記事一覧リストのカテゴリーラベルの背景色をテゴリーごとに変更する方法です。
まず前提として、SWELLではカスタマイザーにある「記事一覧リスト→カテゴリーの表示設定」にある項目を設定することで、カテゴリーがサムネイル画像の上に表示されたときの見た目を自由にカスタマイズすることができます。
デフォルトではメインカラーと同じ色が設定され、カラーコードを変更すれば一括でカテゴリーラベルの色などを変更することができるのですが、これを「カテゴリーごとに違う色にする」にはちょっとした手間が必要になります。
とは言ってもいつものごとく、カスタマイズの方法としては追加CSSに独自のコードを追記するのみなので、そこまで難しいものでもないかなと思います。
具体的な方法としては、こちらのコードをお好みで修正してもらって追加CSSに追記してみましょう。もちろんカスタマイズ前に子テーマの導入を忘れずに。
.c-postThumb__cat[data-cat-id="カテゴリーID"] {
background-color: #35bbf7;
}このコードをそのまま貼り付けても何も起きないので、
- カテゴリーID：投稿→カテゴリーで変えたいカテゴリーの「ID」の数字を代わりに入力する
- #35bbf7：好きなカラーコードに変更する（一応これは水色っぽいカラーコードです）
このようにカテゴリーIDとカラーコードをそれぞれご自身のものへと置き換えた上で、追加CSSに追記するようにしてみてください。
また、必要であればcolor: #好きなカラーコード;というコードを追記することでカテゴリーラベルの「文字色」を変更することもできます。とは言ってもデフォルトの白文字から変えるようなこともないですかね〜。
ちなみに1つのカテゴリーだけ色を変えるのは違和感があるので、サイトにあるカテゴリーのIDをそれぞれ調べて、こんな感じでそれぞれのカテゴリーに対して別々のカラーコードを指定してあげると良いかなと思います。
.c-postThumb__cat[data-cat-id="1"] {
background-color: #35bbf7;
}
.c-postThumb__cat[data-cat-id="2"] {
background-color: #333333;
}
.c-postThumb__cat[data-cat-id="3"] {
background-color: #f15a33;
}このサイトでは実装していないカスタマイズなので、もし試してみて「うまくいったよ！」とか「うまくいかなかったよ！」ということがあれば気軽にお教えください〜。
あと調べた限りではトップページのカテゴリーラベルはこうしてカスタマイズできるものの、各投稿ページにおけるカテゴリーラベルの色については、CSSだけでカテゴリーごとに変更することはできないんじゃないかなあという感じでした。おそらく…！
