Blogger・QooQの投稿リストにあるラベルをカスタマイズ

トップページの投稿リストにあるラベルは、ヘッダーやサイドバーの見出しと同じ色が反映されていますが、CSS で編集すればラベルだけの色を変えることができます。また、右寄せのラベルを、周囲と同じように左寄せに変更することもできます。

Blogger-QooQ

カスタマイズするにはテーマデザイナーから CSS を追加するか、既存の CSS にある該当箇所を直接書き換えてください。

ラベルの背景色と文字色を変更する

投稿リストのラベルには、ヘッダーと同じテーマデザイナーの「ブランドカラー」が反映されています。そのためラベルに対して CSS で追加指定をすると、ブランドカラーはラベルに反映しなくなるので注意してください。

下記 CSS でラベルの背景色と文字色が変更できます。
.list-item-category-item {
    background: *****;
    color: *****;
}
***** の値にはそれぞれカラーコードを記述してください。

デフォルトでは上記のクラス名で、角を丸める「 border-radius 」や内側の余白「 padding 」なども指定されています。

ラベルの表示位置を変更する

〇〇寄せ、となると「 text-align 」が思いつきますが、flex が指定してあるので以下のプロパティを使用します。
.list-item-category {
    justify-content: *****;
}
***** の値にいずれかを記述。
・flex-start(左寄せ)
・center(中央寄せ)
・flex-end(右寄せ)QooQ のデフォルト

デフォルトでは上記のクラス名で、文字サイズ「 font-size 」や文字の太さ「 font-weight 」なども指定されています。

ラムネグ