みなさんこんにちは〜！１年ほど「Afiinger4」を使っている@nanase_nananaviです。
今回は、ブログ構築の内容でお送りいたします。
ある程度、ブログのデザインも落ち着いてきたみなさん。もう少し見栄え良く微調整したい！と思う方も多いのではないでしょうか？
クリックしたくなるようにするためにはカテゴリー名も大事ですが、パッと目に入る色も重要ですよね。
では、さっそく変更していきましょう。
カテゴリーのIDを調べる
投稿の中のカテゴリーページへ行きます。
一覧表示で、カテゴリーがずらりと出てきますよね。しかし、ここにはIDは表示されていません。
どこを見たらいいのかというと？
IDを調べたいカテゴリーをクリックすると･･･
ここに、数字が出てきます。
変えたいカテゴリーのIDは、一気にメモしておきましょう。
テーマの編集で色を変えよう
記述をコピペして、作り替える
Affinger4の「Affinger Child」「子テーマ」のスタイルシートを開きます。
このように既に記述されているので、このままこちらを使います。変更する部分は、
- カテゴリーID
- 背景の色
- 文字の色
また、後で分かりやすいように名前も変更しておきましょう。/*○○○*/ のように、囲むと内容は反映されません。
/*カテゴリID別に色を指定できます
例）IDが7の場合
.catname.st-catid7 {
background:#ff0000;
color:#fff;
}
*/
色の指定は、カラーコード一覧表からコピペ。
/*タイ旅行記「青」*/
.catname.st-catid82 {
background:##3366CC;
color:#fff;
}
背景を青に、文字は白を指定しました。
追加CSS内に貼り付けて更新
ビジュアルエディタを使えば、実際の見え方を確認しながらできるので便利です。何かこの色違うな〜と視覚的に微調整できますしね！
１番下の方に貼り付けましょう。
複数のカテゴリーを同じ色に指定する
別々に記述することもできますが、まとめて記述すれば、CSSも軽くなります。
タイ旅行来関連のカテゴリー「ID83,82,6」の色を同じにしたかったので、以下のように記述しました。
/*タイ旅行記「青」*/
.st-catid82,.st-catid83,.st-catid6{
background:#3366CC;
color:#fff;
}
「.catname」を削除しても変更できます。
このようにまとめて変更できました！
おわりに
簡単に変更することができました！
カテゴリーは１つの方が見やすいと思いますが、色が違うのであれば関連するカテゴリーは二つほど付けてもカラフルになって可愛い印象になりますね♪
これから、備忘録がてらワードプレスのカスタマイズ記事も更新していきます〜
ではまたっ！
ノシ