【簡単】アイキャッチ画像の記事タイトルの文字色をCSSで変える！

アイキャッチ画像を記事のタイトルの画像に変更しました。

ちょっと目立ったほうがいいと考え赤にしました。

でも赤すぎるので、CSSを追記してえんじ色にています。

画像ってCSSで加工できるんです。

このブログのアイキャッチ画像のCSSを紹介します。

追記してるCSS

/* アイキャッチ画像 */
.p-postList__thumb{
        border: solid 1px #d9e3ee;
    filter: grayscale(0.6) invert(0.03);
}
.p-articleThumb{
        border: solid 1px #d9e3ee;
    filter: grayscale(0.6) invert(0.03);
}

アイキャッチ画像の影はSWELLだからですけど、枠線を入れています。

0.6で赤色の文字をえんじ色にしています。

0.03にすることで白色の背景色に少しだけ色を入れています。

上が記事の先頭のアイキャッチ画像で、下が記事一覧ページのサムネイル画像です。

※ このブログで使ってるSWELLなら、このままでも使えます。

背景色を赤くしたい

アイキャッチ画像の文字をえんじ色にしました。

背景色に少し赤を入れたいんだけどできていません。

ちょっと背景色が赤っぽくない？

と思ってるんですけど、目の錯覚です。

角度によって、ちょっと赤が入ってるように見えたりします。

まとめ

アイキャッチ画像に文字を入れたら、CSSで加工すると簡単にいい感じにできます。

CSSを追記するだけなので、あとから調整できます。

色の濃淡は変更できますので、赤青緑のどれかを文字色にしておくといいと思います。