サポート » テーマ » twenty nineteenのアイキャッチ画像を明るくする方法を教えていただけますか?

  • goshiphoto

    (@goshiphoto)


    twenty nineteenのアイキャッチ画像は設定すると自動で暗い色になりますが、もう少し元の明るさに近づけるなどの調整方法はありますか?
    カスタム>色>アイキャッチ画像にメインカラーのフィルターを適用する
    での色付けではなく、明暗についてです。
    お手数ですが、どなたかご回答よろしくお願いいたします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • ishitaka

    (@ishitaka)

    こんにちは

    下記のようなスタイルではどうでしょうか?

    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;
    }
    goshiphoto

    (@goshiphoto)

    ishitaka様
    ご回答ありがとうございます!
    試してみましたところ、確かに効果がありました!
    ただ、画面は明るくはなるのですが、使用した写真の色が浅くなるのが気になっています。

    詳しくないので推測ですが、教えていただいたのは、「カスタマイズ」>「色」の中でのメインカラーのフィルターをキャンセルして、別の色や効果を変えたフィルターを与える命令でよろしかったでしょうか?

    「アイキャッチ画像にメインカラーのフィルターを適用する」のチェックを外した状態でも、取り込んだ画像はかなり暗い色合いになっているのですが、この暗くする効果をキャンセル・または弱くする方法はありますか?

    それができれば、元の画質を保ったまま使用できるのかなと思っています。
    恐縮ですが、ご回答いただけましたら幸いです。

    ishitaka

    (@ishitaka)

    opacity: 0.2;

    opacity: 0;

    では、どうでしょうか?

    goshiphoto

    (@goshiphoto)

    早速のお返事ありがとうございます。
    書き漏れていましたが、そこを試してみましたが、0.2より多少明るくはなるけれど色がぼやけコントラストが浅いという状態はかわらなかった次第です。

    ishitaka

    (@ishitaka)

    おっと、失礼しました。

    .image-filters-enabled .site-header.featured-image:after {
    	opacity: 0;
    }

    こちらも、追記してみてください。

    goshiphoto

    (@goshiphoto)

    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;
    }
    goshiphoto

    (@goshiphoto)

    今見返すと、私の元の質問方法が悪かったような…
    アイキャッチ画像を「明るくする」ではなく、元の画像のまま表示する方法があればその方がベターなのですが、そういった方法もありますでしょうか?

    RICK

    (@rickaddison7634)

    画像にフィルターがかかっているだけなのでそれを除去すれば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に追加すればうまくいくと思います。

    • この返信は6 ヶ月前に  RICK さんが編集しました。
8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「twenty nineteenのアイキャッチ画像を明るくする方法を教えていただけますか?」には新たに返信することはできません。