(cache) Googleカレンダーの土日に色を付ける方法

ブラウザでGoogleカレンダーを見ると背景が真っ白なカレンダーが表示されます。日本では多くの場合は土曜日は青色、日曜日は赤色と色が付けられているのでGoogleカレンダーの表示も変えてみることにしました。

なぜ土日に色が付いているのか？

日本で販売されているカレンダーの多くは土曜日は青色、日曜日や国民の祝日は赤色で表示されています。

この色分けの由来は諸説あるようですが、古くから多くの国で共通しているのが「休日は赤で表記する」と言うことで、それにならい日曜日や国民の祝日が赤く表記されているわけです。
土曜日を青く表記するのは、昔は官公庁も民間企業も土曜日は午前中だけ仕事をして午後はお休み（いわゆる半ドン）していたことから平日とも休日とも違うという意味でつけられた色だと思われます。

ちなみに、カレンダーに曜日ごとの色を付ける国は少数派だそうです。

土日に色を付ける手順

冒頭で申し上げたとおり、ブラウザから閲覧するWeb版のGoogleカレンダーは背景が真っ白なカレンダーです。日本人からすると土日に色が付いていないのはなんとも見にくいのでカスタマイズしたいとおもいます。

Googleカレンダーに色を付ける手順はブラウザごとに異なります。

Mozilla Firefox

Mozilla Firefoxの場合はアドオン『Stylish』をインストールし、スタイルシートを追加すれば色を付けることができます。

Mozilla Firefoxから「Stylish :: Add-ons for Firefox」へアクセスし「Firefoxへ追加」をクリックします。
画面右上に『Stylish』のアイコンが表示されるのでGoogleカレンダーを表示してからクリックするとメニューから“新しいスタイルを書く”→“calendar.google.com 専用”を選択できるのでクリックします。

エディタが表示されるので以下のコードを上書き（既に入力済みの文字列は消す）します。

コードは “月曜始まり” と “日曜始まり” の2つがあります。使用しているカレンダーに合わせて選択してください。

月曜始まりの場合

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("calendar.google.com") {

	/*** メイン：土曜日 ***/
	.st-dtitle:nth-child(6) {
		color: #6A6AFF !important;
	}

	.st-bg:nth-child(6) {
		background-color: #D8E2F2 !important;
		color: #6A6AFF !important;
	}

	/*** メイン：日曜日 ***/
	.st-dtitle:last-child {
		color: #FF6A6B !important;
	}

	.st-bg:last-child {
	background-color: #F6E4E4 !important;
		color: #FF6A6B !important;
	}

	/*** サイド：土曜日 ***/
	.dp-dayh:nth-child(6),
	.dp-cell:nth-child(6),
	.dp-weekend-selected:last-child {
		color: #22F !important;
	}

	.dp-weekend:nth-child(6).dp-offmonth,
	.dp-weekend-selected:nth-child(6).dp-offmonth {
		color: #88F !important;
	}

	/*** サイド：日曜日 ***/
	.dp-dayh:last-child,
	.dp-weekend:last-child,
	.dp-weekend-selected:last-child {
		color: #E22 !important;
	}
	.dp-weekend:last-child.dp-offmonth,
	.dp-weekend-selected:last-child.dp-offmonth {
		color: #E88 !important;
	}
}

日曜始まりの場合

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("calendar.google.com") {

	/*** メイン：土曜日 ***/
	.st-dtitle:last-child {
		color: #6A6AFF !important;
	}

 	.st-bg:last-child {
		background-color: #D8E2F2 !important;
		color: #6A6AFF !important;
	}

	/*** メイン：日曜日 ***/
	.st-dtitle:first-child {
		color: #FF6A6B !important;
	}

	.st-bg:first-child {
		background-color: #F6E4E4 !important;
		color: #FF6A6B !important;
	}

	/*** サイド：土曜日 ***/
	.dp-dayh:last-child,
	.dp-weekend:last-child,
	.dp-weekend-selected:last-child {
		color: #22F !important;
	}
	.dp-weekend:last-child.dp-offmonth,
	.dp-weekend-selected:last-child.dp-offmonth {
		color: #88F !important;
	}

	/*** サイド：日曜日 ***/
	.dp-dayh:first-child,
	.dp-weekend:first-child,
	.dp-weekend-selected:first-child {
		color: #E22 !important;
	}
	.dp-weekend:first-child.dp-offmonth,
	.dp-weekend-selected:first-child.dp-offmonth {
		color: #E88 !important;
	}

}