2006-10-05 (Thu)

■ Googleカレンダーの土・日の文字色を変更しました

※ここに記述されている CSS の問題を解決した パート2 もあるので、併せてご覧下さい。

---

• Googleカレンダーの土・日の文字色を変更する方法

すごい、これやりたかったんだよねー！！早速導入。素晴しい！まさか日付毎にIDが振ってあるとは気付きませんでした。

そしてこれも…。

できれば日付の背景色を変えたかったんですが、CSSでの指定ができそうにないので文字色の変更で対応してみました。

何とか出来ないものかと思って頑張ってみて、こんな風になりました。自分の場合は週の始めは月曜なのでこんなパターン。あと、左上のミニカレンダーをドラッグすると7週間とか選択出来るので、IDの範囲も広く取りました。

@-moz-document url-prefix(http://www.google.com/calendar/) {
   #dh5,#dh12,#dh19,#dh26,#dh33,#dh40,#dh47,#dh54 {
      color: #00f;
      padding: 0 0.5em 0 85%;
      background-color: #CCF;
   }
   #dh6,#dh13,#dh20,#dh27,#dh34,#dh41,#dh48,#dh55 {
      color: #f00;
      padding: 0 0.5em 0 85%;
      background-color: #FCC;
   }
}

padding の指定方法がちょとアレな感じだけど、うまくやる方法がわかんなくて挫折。

表示結果はこんな。

やっぱカレンダーはこっちの方が断然見やすい。

CSS3 の nth-child セレクタ とか言うのが使えるようになればもっと楽に指定出来そう。

* 追記

marginさんが さらに完成度を高めて くれました。自分は display:block までは試したけど margin-bottom が思い付かなかった。すごい！悔しい！笑

Posted by Kyosuke Takayama at 2006-10-05 (Thu) 12:47