こんにちは
下記のようなスタイルではどうでしょうか?
style.css または、カスタマイズの「追加 CSS」等に、
/* Site Featured Image */
.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img {
filter: none;
}
.image-filters-enabled .site-header.featured-image .site-featured-image:after {
background-color: #000 !important;
opacity: 0.2;
}
/* Post Thumbnail */
.image-filters-enabled .entry .post-thumbnail .post-thumbnail-inner {
filter: none;
}
.image-filters-enabled .entry .post-thumbnail:after {
background-color: #000 !important;
opacity: 0.2;
}
ishitaka様
ご回答ありがとうございます!
試してみましたところ、確かに効果がありました!
ただ、画面は明るくはなるのですが、使用した写真の色が浅くなるのが気になっています。
詳しくないので推測ですが、教えていただいたのは、「カスタマイズ」>「色」の中でのメインカラーのフィルターをキャンセルして、別の色や効果を変えたフィルターを与える命令でよろしかったでしょうか?
「アイキャッチ画像にメインカラーのフィルターを適用する」のチェックを外した状態でも、取り込んだ画像はかなり暗い色合いになっているのですが、この暗くする効果をキャンセル・または弱くする方法はありますか?
それができれば、元の画質を保ったまま使用できるのかなと思っています。
恐縮ですが、ご回答いただけましたら幸いです。
opacity: 0.2;
↓
opacity: 0;
では、どうでしょうか?
早速のお返事ありがとうございます。
書き漏れていましたが、そこを試してみましたが、0.2より多少明るくはなるけれど色がぼやけコントラストが浅いという状態はかわらなかった次第です。
おっと、失礼しました。
.image-filters-enabled .site-header.featured-image:after {
opacity: 0;
}
こちらも、追記してみてください。
ishitaka様
お返事が遅くなりすみません。
以下のように試してみましたが、やはり元画像をそのままアップしたときとは違う表示になるので、何かの処理が加わってしまってるんだろうなと思います。
または、アドバイスいただいた追記の仕方が違っていましたでしょうか?
/* Site Featured Image */
.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img {
filter: none;
}
.image-filters-enabled .site-header.featured-image .site-featured-image:after {
background-color: #000 !important;
opacity: 0;
}
/* Post Thumbnail */
.image-filters-enabled .entry .post-thumbnail .post-thumbnail-inner {
filter: none;
}
.image-filters-enabled .entry .post-thumbnail:after {
background-color: #000 !important;
opacity: 0;
}
.image-filters-enabled .site-header.featured-image:after {
opacity: 0;
}
今見返すと、私の元の質問方法が悪かったような…
アイキャッチ画像を「明るくする」ではなく、元の画像のまま表示する方法があればその方がベターなのですが、そういった方法もありますでしょうか?
画像にフィルターがかかっているだけなのでそれを除去すればOKです。なので、
.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img,
.image-filters-enabled .entry .post-thumbnail .post-thumbnail-inner {
filter: none;
}
のみをCSSに追加すればうまくいくと思います。