Chrome Google

Stylusを使ってGoogleドライブの画面を目に優しくする

2021年7月3日

突然ですが、PCでGoogleドライブを使っていて目が疲れることってありませんか？

白くて目が疲れる......。でもダークモードは好きじゃない、かえって目に良くないという話もある......ならCSSを変更して背景を白からグレーにすれば良いじゃない。ということでChrome拡張機能のStylusが役に立ちます。

完成形

これが完成形です。ちょっと調整が甘い部分がありますがそこはご愛嬌です。

Stylus

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

StylusはChromeウェブストアからダウンロードできます。WebサイトのCSS（レイアウト）を自由に編集できちゃいます。WindowやMac、ChromeOSでも動きます。

編集方法

ChromeでF12を押すとサイトのHTML構造を確認できます。

を押してから色を変更したい部分にカーソルを合わせるとそこのID名が確認できます。あとはこの情報を元にそこの背景や文字を編集すれば良いのです。

body{
.a-ec-Gd .Kzazxf.x6jRSb {
    background:#e8f0fe;
}

.wO3c5d {
    color:#000;
}

.gb_5e {
     background:#e8f0fe;
}

.gb_ee {
    background:#adadad;
}

.a-D-B-x {
    background:#adadad;
}

.YEXPof {
    background:#adadad;
}

.aabwZd .WYuW0e .M3pype[data-column-field="6"] {
    color:#000000;
}

.a-da-Mf-B::before {
     background:#adadad;
}

.a-da-Mf-B-lc {
    background:#adadad;
}

.ub-ml-Pr {
     background:#adadad;
}

.a-da-ub-ce {
    background:#adadad;
}

.PEfnhb {
    background:#adadad;
}

.a-da-U>.a-U-xc {
    background:#adadad;
}

.a-D-B-x {
    background:#adadad;
}

.lVcy9.aabwZd .O5x1db {
     background:#adadad;
}

.Kk7lMc-Yb-Il-j {
    background:#adadad;
}

.a-t-j .a-gd-j {
     background:#adadad;
}
}

自分はこうしました。

まとめ

当然ですがGoogleドライブ以外のサイトでも使用可能なのでStylusはおすすめの拡張機能です。オンオフも簡単にできるので重宝しています。Stylusを利用してよく使うWebサイトを自分好みにカスタマイズしてください！

-Chrome, Google
-, ,