「追悼」サイト全体を白黒にする

昨年、有名歌手の喬任梁さんが亡くなったときのことを覚えていますか。百度画像は異例にも彼のために白黒のウェブページを用意し、すべてのユーザーが百度画像で喬任梁さんを検索すると、サイト全体が白黒で表示されるようにしました。追悼が必要な日には、自分のウェブサイト全体を白黒にして哀悼の意を示したいと考える人も多いでしょう。

ここでは、サイト全体を白黒にする方法とコードを紹介します。CSSを1行定義するだけでよく、ウェブサイト全体をグレー調にするために、画像を1枚ずつ色調変更する必要はありません。CSSファイルのHTMLノードに次の定義を1つ追加するだけです。コードは以下のとおりです。

html {-webkit-filter: grayscale(100%);}

ウェブサイトでCSSファイルを読み込んでいない場合は、次のHTMLコードを直接記述できます。

<style type="text/css">html {-webkit-filter: grayscale(100%);}</style>

上記のコードは、QQブラウザ、360ブラウザ、IEブラウザで有効であることが確認されています。