マリのブログメモ

ブログ運営のメモです

アイキャッチ画像が白い背景の時→CSSで少し暗くする

少しずつブログのデザインをカスタマイズしています。

 

当ブログではスクリーンショットをよく使っているのでアイキャッチの背景が白になりがち。

背景が白いとTOPページでちょっと違和感があるのでCSSで画像を暗くする設定にしました。

 

▼ビフォー

f:id:damarin:20190615210916p:plain

 

▼アフター

f:id:damarin:20190615210523p:plain

画像を線で囲んだりもしてみましたが、ちょっとしっくりこなかったので良かったです。

 

CSSはこんな感じです。  

CSS

.page-archive .entry-thumb {
filter:brightness(97%);

}

 「filter:brightness(97%);」の「97%」を色々変えて好みの暗さにできます。

(無料ブログなのでトップページを記事一覧ページにリダイレクト設定?しています。有料版だと「.page-archive 」がいらないかもです)

 

デメリットとして、背景白じゃないアイキャッチも若干暗くなります。 

 

参考サイトはこちら→CSSフィルター:画像の明度を変える | ハックノート