Googleカレンダーの土日の色 その2
なるほど! こっちのほうがスマートですね。
これに触発されて、CSS3 のセレクタを使えばもっと短く出来そうだと思ってやってみたら、かなり変態的なことになってしまいました(笑
@-moz-document url-prefix("http://www.google.com/calendar/"), url-prefix("https://www.google.com/calendar/") { #decowner > [style*="left: 7"] > .dayOfMonth { color: #00F !important; background-color: #CCF !important; } #decowner > [style*="left: 7"] > .dayNotInMonth { color: #88F !important; background-color: #DDF !important; } #decowner > [style*="left: 7"] > .currentDay { background-color: #99F !important; } #decowner > [style*="left: 8"] > .dayOfMonth { color: #F00 !important; background-color: #FCC !important; } #decowner > [style*="left: 8"] > .dayNotInMonth { color: #F88 !important; background-color: #FDD !important; } #decowner > [style*="left: 8"] > .currentDay { background-color: #F99 !important; } [id^="dp_0_day_"][id$="_5"] { color: #22F; } [id^="dp_0_day_"][id$="_6"] { color: #F22; } }
当日の背景は濃く、その月以外の日の背景は薄くしてあります。 あと左の小さいカレンダーの土日の色も変えてあります。
短くなったのはいいのですが、こういう指定の仕方をすると Google Calendar 側で変更があったときに動かなくなったりするので注意です。
日曜始まり用のも書いておきます。
@-moz-document url-prefix("http://www.google.com/calendar/"), url-prefix("https://www.google.com/calendar/") { #decowner > [style*="left: 8"] > .dayOfMonth { color: #00F !important; background-color: #CCF !important; } #decowner > [style*="left: 8"] > .dayNotInMonth { color: #88F !important; background-color: #DDF !important; } #decowner > [style*="left: 8"] > .currentDay { background-color: #99F !important; } #decowner > [style*="left: 0"] > .dayOfMonth { color: #F00 !important; background-color: #FCC !important; } #decowner > [style*="left: 0"] > .dayNotInMonth { color: #F88 !important; background-color: #FDD !important; } #decowner > [style*="left: 0"] > .currentDay { background-color: #F99 !important; } [id^="dp_0_day_"][id$="_6"] { color: #22F; } [id^="dp_0_day_"][id$="_0"] { color: #F22; } }
追記
当日が土日だと予定の所にも色が付いてしまっていたのを修正しました。
追記
当日の色を少し濃くしてみました。