【応急処置】ウェブサイトをモノクロ・グレーにする手順・css

【プミポン国王陛下に謹んで哀悼の意を捧げます】

タイ国王崩御を受けて、Webサイトを白黒にしている企業様が多いかと思います。

応急処置ですが、やり方を簡単にまとめます。

CSSの使用上 [Internet Explorer] には対応できませんが、タイ国内におけるシェアは19%(2014年現在)です。現にタイ人向けメディアでも対応している所はほとんど見受けられません。(2016/10/14 現在)
(参照：http:// https://www.statsmonkey.com/sunburst/12933-thailand-web-browser-market-share-usage-statistics-2014.php)

※本記事はWordpress ユーザー向けに書かれていますが、ファイルをサーバーにアップする点や、cssの記述は共通事項なので応用していただける箇所があるかと思います。

1. Wordpress へファイルをアップする方法を確認

使っているプラグインを隅から隅まで調べる。
cssファイルを直接触る。
zip ファイルを作成してサーバーにアップロードする。

Wordpressを使用している場合、上記3種類の方法が考えられます。

まずは、今使っているプラグインを調べて、「一斉にレイアウトを変更できそうな箇所」があるかどうか調べてみて下さい。

英語の場合は、"general setting" みたいな場所を見てみましょう。

header, footer などを1つ1つ変更しても大丈夫ですが、どうしても抜け漏れが出てきます。

著者の場合は、Dashboard→Appearance から、プラグインを選択し、下部にあった "custom css" を変更することによって対処しました。

f:id:zuzukii:20161014200411p:plain

どうしてもプラグインの触り方が分からない or 自分でFTPファイルを使っている なんて方は、直接css ファイルを変更していくことになります。

cssファイルを直接触って編集できれば作業時間は5分で完了しますが、お使いのバージョンによっては管理権限などを弄る必要も出てきます。(style.cssファイルを参照して下さい。)

この辺りは全くの初心者が触ることはセキュリティ上おススメできません。

以下を参考に3番目の方法を試してください。

→具体的なやり方
(参考：http://smaafi.net/information/1339)

2. css ファイルの最下部に filter 機能を追記。

スタイルを一斉変更できるcssファイルへ記述していきます。

※全ページに対応するcss ファイルがない場合は、新たにcss ファイルを作成し、全ての<head>タグ内からパスを通してください。

この時、<script> や <link> タグが複数ある場合は、一番下へ新たに<link rel...>と付け加えてください。

css ファイルへの追記

さあ、いよいよcss ファイルへ追記していく訳ですが、必ず最下部へ付け加えてください。

css ファイルは上から順番に読み込まれるため、上の行で設定したものが下の行の設定へと読み変えられてしまうためです。

後にカラー版へ戻す時の事を考えても、一番下に記述しておけば探す際も楽です。

実際に記述する値は...

　body {
　　-webkit-filter: grayscale(1.0);
　　-ms-filter: grayscale(1.0);
　　filter: grayscale(1.0); 
　}

完成図(自作サイトでの実験):

f:id:zuzukii:20161014172605p:plain

ここで、「* (ユニバーサルセレクタ) を使えば良いのでは？」という突っ込みがあるかもしれないので、続けます。

3. body, * どちらを使った方が良いのか？

結論から言うと、body にて設定した方が良いです。

自作Webサイトを使って解説していきます。

* (ユニバーサルセレクタ)を使うと、全てのタグへ一回ずつ読み込ませるため、表示速度が遅くなる（ことがある）。

試しにgrayscale(0.7)を設定してみます。

(※背景(background-color)は、赤く設定しています。)

対象をbody にすると色が残るが、* (ユニバーサルセレクタ)にするとグレーになっている。

対象 body の時

　body {
　　-webkit-filter: grayscale(0.7);
　　-ms-filter: grayscale(0.7);
　　filter: grayscale(0.7); 
　}

f:id:zuzukii:20161014170402p:plain

対象 * (ユニバーサルセレクタ) の時

　* {
　　-webkit-filter: grayscale(0.7);
　　-ms-filter: grayscale(0.7);
　　filter: grayscale(0.7); 
　}

f:id:zuzukii:20161014170420p:plain

対象を body にすると、body タグ内で"1度" grayscale が実行されるのに対し

* (ユニバーサルセレクタ)が対象になると、body が読み込んだ後、より下位層のタグ(h1, p, div, section, header...)において

"それぞれ一度ずつ" grayscale が実行されるからだと考えられます。

1回だけ読み込まれる<body>タグと各要素1度ずつ何度も呼ばれる * (ユニバーサルセレクタ)、答えは明らかで、<body>タグを使用した方がユーザーにとって良いでしょう。

実験するべく、便宜上graysacake(0.7) にて設定しましたが

値を1.0, 100% に設定しておくと、カラフルな色は出力されません。

zuzukiiのブログ

バンコク在住の駆け出しエンジニアです。バンコクやらITについて書いていきます。