みなさんこんにちは〜!1年ほど「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内に貼り付けて更新
ビジュアルエディタを使えば、実際の見え方を確認しながらできるので便利です。何かこの色違うな〜と視覚的に微調整できますしね!
1番下の方に貼り付けましょう。
複数のカテゴリーを同じ色に指定する
別々に記述することもできますが、まとめて記述すれば、CSSも軽くなります。
タイ旅行来関連のカテゴリー「ID83,82,6」の色を同じにしたかったので、以下のように記述しました。
/*タイ旅行記「青」*/ .st-catid82,.st-catid83,.st-catid6{ background:#3366CC; color:#fff; }
「.catname」を削除しても変更できます。
このようにまとめて変更できました!
おわりに
簡単に変更することができました!
カテゴリーは1つの方が見やすいと思いますが、色が違うのであれば関連するカテゴリーは二つほど付けてもカラフルになって可愛い印象になりますね♪
これから、備忘録がてらワードプレスのカスタマイズ記事も更新していきます〜
ではまたっ!
ノシ