Hatena::ブログ(Diary)

Marginal Leaves RSSフィード

2006-10-06

margin2006-10-06

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;
  }
}

追記

当日が土日だと予定の所にも色が付いてしまっていたのを修正しました。

追記

当日の色を少し濃くしてみました。

追記

Stylish を使っている人は以下から簡単に導入できます。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証