【プミポン国王陛下に謹んで哀悼の意を捧げます】
タイ国王崩御を受けて、Webサイトを白黒にしている企業様が多いかと思います。
応急処置ですが、やり方を簡単にまとめます。
CSSの使用上 [Internet Explorer] には対応できませんが、タイ国内におけるシェアは19%(2014年現在)です。現にタイ人向けメディアでもIE対応している所はほとんど見受けられません。(2016/10/14 現在)
(参照：http:// https://www.statsmonkey.com/sunburst/12933-thailand-web-browser-market-share-usage-statistics-2014.php)
※本記事はWordpress ユーザー向けに書かれていますが、ファイルをサーバーにアップする点や、cssの記述は共通事項なので応用していただける箇所があるかと思います。
▼この記事の内容
1. Wordpress へファイルをアップする方法を確認
Wordpressを使用している場合、上記3種類の方法が考えられます。
まずは、今使っているプラグインを調べて、「一斉にレイアウトを変更できそうな箇所」があるかどうか調べてみて下さい。
英語の場合は、"general setting" みたいな場所を見てみましょう。
header, footer などを1つ1つ変更しても大丈夫ですが、どうしても抜け漏れが出てきます。
著者の場合は、Dashboard→Appearance から、プラグインを選択し、下部にあった "custom css" を変更することによって対処しました。
どうしてもプラグインの触り方が分からない 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); }
完成図(自作サイトでの実験):
ここで、「* (ユニバーサルセレクタ) を使えば良いのでは？ 」という突っ込みがあるかもしれないので、続けます。
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); }
- 対象 * (ユニバーサルセレクタ) の時
* { -webkit-filter: grayscale(0.7); -ms-filter: grayscale(0.7); filter: grayscale(0.7); }
対象を body にすると、body タグ内で"1度" grayscale が実行されるのに対し
* (ユニバーサルセレクタ)が対象になると、body が読み込んだ後、より下位層のタグ(h1, p, div, section, header...)において
"それぞれ一度ずつ" grayscale が実行されるからだと考えられます。
実験するべく、便宜上graysacake(0.7) にて設定しましたが
値を1.0, 100% に設定しておくと、カラフルな色は出力されません。