CSS拡張アドオンStylishでサイトの背景を灰色にする方法

PCでネットをしていていつも思うのが

“画面が眩しくて目がチカチカする！”ということ

webサイトの背景が白だと眩しくてたまらない

今回はFirefox/chromeで使えるブラウザ拡張アドオンStylishで

背景色を設定して灰色にする方法を教えよう！

こんな感じに灰色になる

CSS拡張アドオンStylishとは

スタイリッシュは独自に設定したcssを読み込ませることで任意の背景色や画像を読み込ませることができるアドオン

ユーザスタイルマネージャーのStylishで、ウェブをリスタイルしましょう。
Stylishでは複数サイトにテーマとスキンをインストールして、独自のものを作り出せます。

★Redditに暗いモードを与えたり、ミニマリストのFacebookを使ったり
GoogleやTwitterなどお気に入りのサイトの外観を変えられます。

★背景、配色、フォント、アニメーションもカスタマイズできます。

★インストールしたテーマを簡単に無効にしたり、有効にしたり、編集したり、削除したりできます。

CSS拡張アドオンStylishの使い方

以下のページからアドオンをダウンロードする
chrome.google.com

DLが完了したら、右上に表示されたStylishのアイコンをクリックしオプションを選ぶ

新しいスタイルを作成を作る

背景画像を灰色にするCSSテーマ

自分が設定しているCSSテーマを紹介！
コピペして名前はgrayとでもつけてください
#adadadが暗すぎず明るすぎないぐらいで丁度いいけれど
そこは各々の好みで調整してみてください

body {
background-color:#adadad !important;
}

header {　
background-color:#adadad;
}

#sidenavi {　
background-color:#adadad;
}

footer {　
background-color:#adadad;
}

body {
background-color: #adadad;
background-image: url(img/star.png);
}

.contents {
background-color:#CCCCCC;
}

header {
background:#adadad;
}

input {
background-color: #CCCCCC;
}

textarea {
background-color: #CCCCCC;
}

select {
background-color: #CCCCCC;
}

関連：スマホの壁紙を黒背景にすべき3つの理由まとめ

www.au79.work

空が灰色だから コミック 全5巻完結セット (少年チャンピオン・コミックス)