風待ち日記

2006.10.04

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

Google, web, css, Firefox

gcal_061004_2

以前紹介したFirefoxのuserContent.css（ユーザースタイルシート）を編集すると、Googleカレンダーで一ヶ月表示させたときの土・日の文字色を変更することができます。以下はその方法です。

まずは以下のフォルダを開きます。

Windows 95/98/Meの場合は
C:\Windows\Application Data\Mozilla\Firefox\Profiles\（英数字）.default\chrome\

Windows 2000/XPの場合は
C:\Documents and Settings\(ユーザー名)\Application Data\Mozilla\Firefox\Profiles\（英数字）.default\chrome\

この場所にあるuserContent-example.cssを複製して（初めてuserContent.cssを編集する場合）、userContent.cssというファイル作ります。

userContent.cssをテキストエディタで開き、接続方法に応じて以下のどちらかの記述を追加します。CSSについて知識のある方は、どちらの場合も必要な箇所だけ追加してもらってもよいです。

まずはSSL通信なし(http://www.google.com/calendar/)で接続している場合

@-moz-document url-prefix(http://www.google.com/calendar/) {
 #dh0,#dh7,#dh14,#dh21,#dh28,#dh35 {
  color: #f00 ;
 }
 #dh6,#dh13,#dh20,#dh27,#dh34,#dh41 {
  color: #00f ;
 }
}

そしてSSL通信で(https://www.google.com/calendar/)で接続している場合

@-moz-document url-prefix(https://www.google.com/calendar/) {
 #dh0,#dh7,#dh14,#dh21,#dh28,#dh35 {
  color: #f00 ;
 }
 #dh6,#dh13,#dh20,#dh27,#dh34,#dh41 {
  color: #00f ;
 }
}

自分がどちらの接続方法を使っているか、ということはブラウザーのURL欄を見れば分かると思います。最後にテキストエディタを閉じてFirefoxを起動（再起動）します。

gcal_061004_1さて、どうでしょうか？うまく色が付きましたか？左の画像は私のカレンダー表示ですが（クリックすると別ウインドウで表示されます）、全体の文字サイズを80%に縮小、日付部分を太字にして、さらに平日の日付の色を黒に設定しています。以下にその記述方法を貼っておきますので参考にしてみてください。

@-moz-document url-prefix(https://www.google.com/calendar/) {
 body {
  font-size: 80% !important ;
 }
 .dayOfMonth {
  color: #000 !important ;
  font-weight: bold ;
 }
 #dh0,#dh7,#dh14,#dh21,#dh28,#dh35 {
  color: #f00 ;
 }
 #dh6,#dh13,#dh20,#dh27,#dh34,#dh41 {
  color: #00f ;
 }
}

実のところ、英語版で公開されたときから土・日の表示をもっと分かりやすくできないかなー？と思ってたんですが、こんなふうに考えるのは私だけなのかな？できれば日付の背景色を変えたかったんですが、CSSでの指定ができそうにないので文字色の変更で対応してみました。お役に立てば幸いです。

週の始まりを月曜日に設定している場合は

一週間の始まりを月曜日に設定している場合は、文字の色がズレてしまいます。この場合は以下のように書き換えてください。

@-moz-document url-prefix(https://www.google.com/calendar/) {
 #dh5,#dh12,#dh19,#dh26,#dh33,#dh40 {
  color: #00f ;
 }
 #dh6,#dh13,#dh20,#dh27,#dh34,#dh41 {
  color: #f00 ;
 }
}

ものすごく簡単に説明しますと、#dh5とか#dh12というのはカレンダーの日付の数字部分を指しています。一番左上の日付の数字が#dh0で、その右隣が#dh1といった具合。なので#dh6は一番右上の数字、つまり月曜始まりの場合は第一日曜日の数字ということになります。で、"color: #f00"というcssでその文字色を赤に設定しているわけですね。

gcal_061005_01

追記

gcal_061006_01鷹の島さんで決定版と思われるユーザースタイルシートが公開されました。私のように日付の数字の左側にいろいろ表示させてる場合でも、背景にしっかり色が付きます。左の画像をクリックしてご覧ください。鷹の島さんに感謝！！

鷹の島 - Google カレンダーの土日の背景色を変更するワザ - パート2

さらに追記

id:marginさんがさらに簡潔にまとめてくれました。素晴らしい！！id:marginさんに感謝！！それからhttpとhttpsの両方に適用する場合は、以下のように書くとまとめて指定できるっぽい。

@-moz-document url-prefix("http://www.google.com/calendar/"), 
               url-prefix("https://www.google.com/calendar/") {

勉強になりました！

Marginal Leaves - Googleカレンダーの土日の色 その2

シゴトはネットで片づける!
シゴトはネットで片づける!
posted with amazlet at 08.06.24
私saito-kazuoこと、齊藤和生の記念すべき初の単著。Google カレンダーに限らず、たくさんのGoogleサービスやGTDツールを徹底的に使いこなすことで、効率的に仕事を進めることができます。この本で紹介しているサービスの多くは、WEB 2.0と呼ばれるものですが、この本を読めば「シゴト2.0」も夢じゃない！？ケータイとも連携し、あらゆる場所からメールチェックやスケジュール確認が可能に！！Googleサービスを紹介した本は数多くありますが、仕事にすぐに生かせるのはこの本だけ！1冊買って同僚や先輩に「デキるヤツ」であることを見せ付けましょう！！！
Amazon.co.jp で購入する

Permalink | コメント(6) | トラックバック(1) Googleカレンダーの土・日の文字色を変更する方法 - 風待ち日記 を含むブックマーク はてなブックマーク - Googleカレンダーの土・日の文字色を変更する方法 - 風待ち日記 Googleカレンダーの土・日の文字色を変更する方法 - 風待ち日記 のブックマークコメント

0764545884
Book Netscape Mozilla Source Code Guide
Wiley William R. Stanek
クリック: 1回
B000FQ4WQW
Health and Beauty コパトーン アフターサンオイルフリージェル
コパトーン
コメントを書く

しまくましまくま 2006/10/04 22:28 すばらしい！
この設定を実現したいためだけに、Firefoxをインストールしました。

無事に成功！と思いきや、月曜が赤色で、日曜が青色に！！

確かに週の開始日を月曜にしている私がいけないのですが、
どのようにしたら解決できるでしょうか。

cssが理解できず、全くの他力本願で恐縮ですが、ご教示下さい。

saito-kazuosaito-kazuo 2006/10/04 22:54 あーしまくまさん、気が付いてもらえました？実は「日付を黒で、さらに太字で」っていうのは、しまくまさんの件があったのでやってみたんですよ。喜んでもらえて嬉しいです。
で、日曜が青で月曜が赤になっちゃう件ですが、週の初めを月曜に設定している方のために追記してみましたので、このように書き換えてみてください。
最初に紹介したCSSでは「カレンダーの右端の日付の文字を青に、左端の日付の文字を赤に」みたいな設定をしています。なのでしまくまさんのように週の始まりを月曜にしている場合は色の設定がズレてしまう、と。この場合は「右端の日付の文字を赤に、その左側の日付の文字を青に」としなければなりません。それが追記で紹介した方法です。

お試しください！

しまくましまくま 2006/10/05 09:51 早速にありがとうございます。
月曜始まりバージョンも無事に成功しました。
ホントにありがとうございます。

おまけとして、見よう見まねで
font-weight: bold ;
の次の行に
font-size: 110% !important ;
と追記したら日付の文字が大きくなりました！
これでだいぶ使いやすくなりました。

monthlyだと日付が見づらくても何とかなりますが、
monthlyだとスケジュールが一覧できないので
私は3weeksで使っています。この場合、今日の日付によって他の日付の場所（何段目）が変わるので、
日付が見づらいと使いづらかったのです。
大変助かりました。

もともとYahoo(us)のカレンダーと、無料配布されているシンクロソフトを使っていたのですが、Yahooの文字コードが先月くらいからUTF8Nになって、うまくoutlookとシンクロできなくなり、googleに移ってきました。
当初うまくいっていたoutlook(xp)でのicalインポートがうまくいかなくなるなど、まだまだ悩みはつきませんが、
firefox+saitoさんcssで、google calに完全移行する決心がつきました。

今後ともどうかよろしくお願いします。

saito-kazuosaito-kazuo 2006/10/05 13:09 おー、成功しました報告嬉しいですねー！ありがとうございます。実は「もしかしたら週の始まりを月曜にしてる人もいるのかもなー」なんて思ってたんですが、それにしてもしまくまさんの場合はさらに3週間表示ですか。凝ってますねー。
また自ら文字サイズを大きくするなど非常によいです。素晴らしいです。私も普段はユーザースタイルシートなんて見向きもしないのですが、Googleカレンダーについてだけはどうしてもイジりたくなりますね。一般のウェブサイトと違ってGoogleカレンダーはパーソナルなツールですし、自分好みの見た目っていうのがどうしてもありますから。
そういう意味ではまだまだカスタマイズの可能性があると思います。例えば各日付に……、おっ！イイこと思いついた！
というわけで今日もひとつGoogleカレンダーネタを書こうと思います。でもあんまり実用性ないなー。なのでヒマなときにでも試してみてくださいね。
それからYahooカレンダーから移行されてきたとのことですが、コレも嬉しいッスねー。私はGoogleとはなんの関係もないダメリーマンなんですけど、一人のGoogleオタとしてユーザーが増えるのはとても嬉しいです。
というわけで今後ともよろしくお願いします。
あと、また「こんなことできないかなー？」っていうのがあったら書き込んでみてください。私はプログラマではないのであんまり複雑なことはできないんですが、もしかしたらココを見てくれている別の人が「こんなんできたよー」なんて言ってくれるかもしれないですから。

しまくましまくま 2006/10/06 13:34 トラックバックをたどっていったら、みなさんすごい技を繰り広げられていました。わたしはcssは全然何もわかっていないですが、みようみまねというか、あてずっぽうで次のようなセッティングにたどり着きました。

当月じゃないところを変更するのは、marginさんの(http://d.hatena.ne.jp/margin/20061005/1160031325)をみて、dayNotInMonthを使うんだぁ〜とおもってやってみました。
ちなみに文字を灰色にするのは、marginさんが青や赤を灰色っぽくするときに、#00F→#88F、#F00→#F88とされていたので、「8を付ければいいかなぁ？」と勝手に推察してやってみたものです。あと、文字の太さを標準に戻すのも、適当に「normalでいけるんじゃないかな」と思ってやってみたものです。

見出し行を変えるのは、朝顔日記さん(http://diary.noasobi.net/2006/10/diary_061005a.html)を参考にしました。

で、saitoさんも気にされていた土日の日付の背景に色を付ける方法は、前出のmarginさんやGoing My Wayさん(http://kengo.preston-net.com/archives/002841.shtml)、鷹の島さん(http://espion.just-size.jp/archives/06/278124742.html)がやっておられたのですが、私は止めました。
その理由は、GoogleDoodlesなどのアイコン形式の表示がうまくいかなくなるのです。わたしが http://gimite.ddo.jp/rails/weather/ をつかって数カ所の天気予報を表示しているせいか、背景を変える設定をやると、表示があふれるのか「＋」と表示されて（しかも前日に）、アイコンが見えなくなるのです。そういうわけで、日付の背景はいじっていません。

「こんなことできないかなー？」は、１つあります（もともとはもう１つ見出し行のことがあったのですが、それはすでに実現できました）。
イベントの表示文字を大きくしたいのです。saitoさんが以前に紹介された方法だと、ページのすべての文字の大きさが大きくなりますよね。そうじゃなくて、カレンダー名とかの表示は大きくしないで、予定の表示だけ文字の大きさをいじってみたいのです。


@-moz-document url-prefix(”https://www.google.com/calendar/”) {
body {
font-size: 100% !important ;
}
.dayOfMonth {
color: #000 !important ;
font-weight: bold ;
font-size: 105% !important ;
}
.dayNotInMonth {
color: #888 !important ;
font-weight: normal ;
font-size: 95% !important ;
}
#dh5,#dh12,#dh19,#dh26,#dh33,#dh40,#dh47,#dh54 {
color: #00F;
}
#colheaders>div+div+div+div+div+div {
font-weight: bold ;
background-color:#CCF;
color:#FFFFFF;
}
#dh6,#dh13,#dh20,#dh27,#dh34,#dh41,#dh48,#dh55 {
color: #F00;
}
#colheaders>div+div+div+div+div+div+div {
font-weight: bold ;
background-color:#FCC;
color:#000000;
}
.dayNotInMonth > #dh5, .dayNotInMonth > #dh12,
.dayNotInMonth > #dh19, .dayNotInMonth > #dh26,
.dayNotInMonth > #dh33, .dayNotInMonth > #dh40,
.dayNotInMonth > #dh47, .dayNotInMonth > #dh54 {
color: #88F;
}
.dayNotInMonth > #dh6, .dayNotInMonth > #dh13,
.dayNotInMonth > #dh20, .dayNotInMonth > #dh27,
.dayNotInMonth > #dh34, .dayNotInMonth > #dh41,
.dayNotInMonth > #dh48, .dayNotInMonth > #dh55 {
color: #F88;
}
}

saito-kazuosaito-kazuo 2006/10/06 14:05 おっと、しまくまさんもいろいろやってますねー。すっかり”カススタイラー”じゃないですか。イイ感じです。
日付部分のカスタマイズについては、すでにいろんなところで様々な方法が紹介されてますね。私の方法はすでに時代遅れというか（笑）
そうそう、私も日付の左側に天気アイコンやGoogleロゴを表示させているので、背景色まで変更するとしまくまさんと同じ状態になってしまいます。コレが実現できればもっと見やすくなると思うんですけど…。次の仕様変更に期待することにしましょう。
さてイベントの文字サイズなんですが、ユーザースタイルシートに以下の記述を追加してみてください。もちろん、必要な部分だけでいいですよ。

@-moz-document url-prefix(https://www.google.com/calendar/) {
#eventowner .adc {
font-size: 120% !important ;
}
}

”font-size:”のあとの○○%はお好みでどうぞ。たぶんptとかpxという単位（前者が”ポイント”で後者が”ピクセル”）も使えると思います。ちなみに”#eventowner”という記述を省くと、月ごとの表示だけではなく全ての表示でイベントタイトルが大きくなります。お試しください。

それから文字の色については下のページが参考になるかもしれません。
http://diet.gr.jp/sub/tool/web_col00.htm

グレー系の色だと#cccとか#e4e4e4とかいう感じの文字列になりますね（cssに記述する場合、#ccccccは#cccと省略することができます）。いろいろイジってみてください。

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

トラックバック - http://d.hatena.ne.jp/saito-kazuo/20061004/p1