Language

BelarusianCatalanChineseDutchEnglishFrenchGermanItalianJapaneseKoreanLatinRomanianRussianSpanishThaiVietnamese

http://nananavi.com

Webデザイン

【WordPress】5分で出来る!Affinger4一覧表示のカテゴリーの色をCSSで変更する方法

更新日:

みなさんこんにちは〜!1年ほど「Afiinger4」を使っている@nanase_nananaviです。

今回は、ブログ構築の内容でお送りいたします。

ある程度、ブログのデザインも落ち着いてきたみなさん。もう少し見栄え良く微調整したい!と思う方も多いのではないでしょうか?

クリックしたくなるようにするためにはカテゴリー名も大事ですが、パッと目に入る色も重要ですよね。

では、さっそく変更していきましょう。

カテゴリーのIDを調べる

投稿の中のカテゴリーページへ行きます。

一覧表示で、カテゴリーがずらりと出てきますよね。しかし、ここにはIDは表示されていません。

どこを見たらいいのかというと?

IDを調べたいカテゴリーをクリックすると・・・

ここに、数字が出てきます。

変えたいカテゴリーのIDは、一気にメモしておきましょう。

テーマの編集で色を変えよう

記述をコピペして、作り替える

Affinger4の「Affinger Child」「子テーマ」のスタイルシートを開きます。

このように既に記述されているので、このままこちらを使います。変更する部分は、

  1. カテゴリーID
  2. 背景の色
  3. 文字の色

また、後で分かりやすいように名前も変更しておきましょう。/*○○○*/ のように、囲むと内容は反映されません。

/*カテゴリID別に色を指定できます
例)IDが7の場合
.catname.st-catid7 {
background:#ff0000;
color:#fff;
}
*/

色の指定は、カラーコード一覧表からコピペ。

/*タイ旅行記「青」*/
.catname.st-catid82 {
background:##3366CC;
color:#fff;
}

背景を青に、文字は白を指定しました。

追加CSS内に貼り付けて更新

ビジュアルエディタを使えば、実際の見え方を確認しながらできるので便利です。何かこの色違うな〜と視覚的に微調整できますしね!

1番下の方に貼り付けましょう。

複数のカテゴリーを同じ色に指定する

別々に記述することもできますが、まとめて記述すれば、CSSも軽くなります。

タイ旅行来関連のカテゴリー「ID83,82,6」の色を同じにしたかったので、以下のように記述しました。

/*タイ旅行記「青」*/
.st-catid82,.st-catid83,.st-catid6{
background:#3366CC;
color:#fff;
}

「.catname」を削除しても変更できます。

このようにまとめて変更できました!

おわりに

簡単に変更することができました!

カテゴリーは1つの方が見やすいと思いますが、色が違うのであれば関連するカテゴリーは二つほど付けてもカラフルになって可愛い印象になりますね♪

これから、備忘録がてらワードプレスのカスタマイズ記事も更新していきます〜

ではまたっ!

ノシ

-Webデザイン
-

Copyright© nananavi.com , 2019 All Rights Reserved Powered by AFFINGER4.