【トール】アイキャッチ画像のカテゴリーラベルのデザイン変更

このサイトのデザインを気に入ってくださった方がいたら嬉しいです。

このブログは、有料テーマ【トール】を、カスタマイズしています!

カスタマイズするためのCSSをご紹介しています。コードや設定を変更するときは、バックアップをとって、自己責任で行ってくださいね

アイキャッチ画像のカテゴリーラベルのCSS

デフォルトでは、アイキャッチ画像の右上にカテゴリーのラベルが表示がされています。

このカテゴリーラベルの色は、設定から個別に変更することができますが、当ブログではcss上で一括で同じ色にしています。

一括設定する際のCSSのコードです。

/*アイキャッチ画像の上の
カテゴリーラベルについて*/
.eyecatch__cat  {
 background-color:#fcf594; /*ラベル背景色*/
}

.eyecatch__cat a {
 padding: 4px 10px; /*ラベル内側の縦横余白*/
 font-weight:bold; /*文字の太さ*/
 color:#444444; /*文字色*/
}

カテゴリー別にラベルの色を設定することもできます。

その場合は、個別に行った色設定が上書きされてしまいますので、上記コードのうちのラベル背景色のコードは使用できません。

カテゴリー別のラベル色はこちらから設定します。

ワードプレスのダッシュボードメニューから、【カテゴリー】→【ラベル色を設定したいカテゴリー名をクリック】→【イメージカラー】

アイキャッチ上のカテゴリーラベルは【トール】のカスタマイズメニューから消す(非表示にする)こともできます。

ワードプレスのダッシュボードメニューから、【外観】→【カスタマイズ】→【アーカイブページ設定】→【記事一覧リスト設定】→【アイキャッチ上のカテゴリを非表示にする】から非表示にできます