他のWebサイトのデザインをCSSで勝手に変えるChrome拡張機能「Stylish」をGoogleカレンダーに使ってみた

Googleクロームの拡張機能、「stylish」を使うと、自分がよく使うWebサイトのCSSを勝手にいじることができます。

今回はこれの使い方と、例としてGoogleカレンダーをデザインしてみたので紹介したいと思います。

Stylishとは？？

Stylishとは、Chromeの拡張機能で、自分が見ているWebサイトのCSSを強引にデザインすることができるものです。

もともとはFeedlyをWeb版で見たときにデザインできないかなあと思ってみつけたものでした。

Stylishのインストールはこちらからできます。

chrome.google.com

この拡張機能を使えば、自分が見ているサイトのデザインを自由自在に変えることができます！（アプリはできません）

実際にGoogleカレンダーでやってみた

実際にGoogleカレンダーでやってみました。なぜGoogleカレンダーかと言うと、良くつかうものなのにあんまりデザインが好きでは無かったからです。

最初はこんな感じなのを

f:id:ftmaccho:20151129173147p:plain

こんなふうにイジってみました。

f:id:ftmaccho:20151129173252p:plain

完全に自己満ですがマテリアルデザインにしてみました。「Inbox by Gmail」っぽくしています。うん、完全に自己満です。

やり方

やり方を書いていきます。

Chrome拡張機能をインストール

まずは

chrome.google.com

から拡張機能をインストールしてください。

そうすると右上に「s」の入ったものが着くと思います。

Googleカレンダーを開く

Googleカレンダーを開いて、そこで先ほどの「s」をクリック。

その後、一番下の「Write style for: calendar.google.comgoogle.comthis URL」をクリックしてください。

設定

そうすると下のような図になると思いますので、いろいろと設定をしていきます。

設定前

f:id:ftmaccho:20151129174423p:plain

設定は上の１〜３の部分で

１

１は名前になるので何でも良いです。「MyCalender」とかで良いのではないかと思います。

２

２に、書換えるCSSを入れていきます。

組んだCSSはこんな感じ。

.gb_qd {
     background: #4285F4 !important;
     color: #fff !important;
     box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px, rgba(0, 0, 0, 0.278431) 0px 4px 8px 0px;
}
#gbqfqwb {
     background: #5E97F6 !important;
}
.gbqfif,.gbqfif::-webkit-input-placeholder {
     color: #fff !important;
}
.gb_tb {
     display: none;
}
#gbqfqw{
     border: none !important;
}
.gb_P,
.gb_xb {
     color: #fff !important;
}
#maincell,
.dp-cell,
.dpdiv,
.goog-zippy-expanded,
.goog-zippy-content,
.calList {
     background: #eee !important;
}
.calListRow {
     border: none !important;
}
#gridcontainer {
     box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px, rgba(0, 0, 0, 0.278431) 0px 4px 8px 0px !important;
}