このサイト明るすぎて目が痛い！って時に使うディスプレイの設定を変えずに画面を暗くするブックマークレット。

たぶん需要はほとんどない、いやむしろ全くないと思う無駄スクリプトのご紹介です。

本スクリプトご紹介する前にブックマークレットというものについて軽く説明しておきます。

ブックマークレットというのはブックマークの機能を利用してURLのとこにjavascriptなどの？コードを入力しておくことでブックマークを利用するかのように、スクリプトを手軽に実行できる裏技的なものです。

例えばどんなことができるのかというと

• 通常はリピート再生できないYouTube動画をリピート再生する
• YouTubeの動画ページで起動すると、通常はない｢ダウンロード｣ボタンが出現します。

とかできるようですね。

もっと詳しい説明と上記のようなブックマークレットのご紹介はこちらのサイトにありました。

このようにブックマークレットも誰かが配布してくれてたりするので、こんなのできないかな～？って思ったら探してみてもいいかもしれません。

もちろん自分で作っても良いでしょう。

さてそれでは今回のスクリプトはこちらです。

下記をドラッグアンドドロップでブックマークバーに追加すれば使えるはず！

暗転

スクリプトの中身としては下記になります。

javascript:
if (document.getElementById('ranaRuta')) {
  document.getElementById('ranaRuta').remove();
} else {
  let d = document.createElement('div');
  d.id = 'ranaRuta';
  d.style.cssText = 'top:0; left:0; width:100%; position: fixed; height:100%; background-color:black; opacity:0.5; z-index:10000; ';
  let b = document.getElementsByTagName('body')[0];
  b.insertBefore(d, b.firstChild);
}

（あ、なんかすげえ見づらいけど、ま、いいか）

真っ黒だけど半透明なdivで画面全部覆ってだけです。

divで覆ってしまうので画面内のボタンとか押せなくなります。

もう一度使うと元に戻りますので戻してから操作してください。

下記のcssの部分をいじれば色をかえたり、明るさを調節できますね。

top:0; left:0; width:100%; position: fixed; height:100%; background-color:black; opacity:0.5; z-index:10000;

一体なんのためにつくったのか、それは画面が明るすぎると目が痛いけど、ディスプレイの設定をいちいち変えるのが面倒だからです。