天塚財閥

プロブロガー目指し奮闘中!月間6万PV26歳大卒ニートの成長過程を綴る雑記ブログ

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

f:id:uchan79:20190404190657p:plain

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

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

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

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

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

f:id:uchan79:20190404184751p:plain
こんな感じに灰色になる

CSS拡張アドオンStylishとは

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

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

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

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

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

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

f:id:uchan79:20190404185148p:plain

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



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



新しいスタイルを作成を作る
f:id:uchan79:20190404190121p:plain

背景画像を灰色にする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巻完結セット (少年チャンピオン・コミックス)

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