メニュー 閉じる

ヘッダーのオーバーレイ除去

Last Updated on

アイキャッチ画像が暗いのです。

Hestia

トップページの雰囲気は気に入ってるんですよ。
画像の上に暗めのフィルター(オーバーレイ)が重なっていても。
でも、デザインによっては邪魔ですよね。

あと私のサイトの場合、トップページはデザイン推しでも、ブログのアイキャッチはしっかりと元の写真の色で見せたいんですよね。

特に Hestia の場合、アイキャッチがヘッダー画像として表示されるので。
で、CSS でオーバーレイを除去します。

でも、全てのヘッダー画像がこれに影響を受けるので、いろいろと事後処理が必要です。

まずはトップページのヘッダー画像、これは暗い方がカッコいいので画像そのものを暗く加工します(笑)

さらに、投稿のアイキャッチ画像で設定したヘッダー画像からオーバーレイが無くなると困るのが、ヘッダー画像の上に表示されるタイトル。

デザイン上、白文字は変えたくないので白っぽいアイキャッチを設定してもタイトルが見えるように、文字に影を付けます。

rgba の最後の数字を変えれば影の濃淡を調整できます。

0.1が薄く、0.9が濃い影です。

関連記事