はてなブログのカレンダーを弄るやつ

サイドバーにカレンダーが付きました。
曜日とか見れて便利！
でも、出来たばかりだから白黒で少し味気ないです。
ちょっと色とか付けてみたい。

やってみよう、大はてな実験　で。

※月末の土曜日の色付けが間違えていたので修正しました。

f:id:psne:20141113212402p:plain

カレンダーモジュールが付いたので、色を付けてみよう！

デザインのCSS部分に以下のスタイルを追加します。

/* カレンダー本体 */
.archive-module-calendar .calendar-day {
	/* カレンダー本体 */
	color: #919191;
}

.archive-module-calendar .calendar-day a {
	/* カレンダー本体 a */
	text-decoration:none;
}

.archive-module-calendar .calendar-day .archive-module-calendar-highlight {
	/* カレンダー本体 平日 a span (背景部分) */
    color: #256fba;
	background-color: #DADADA;
	display: inline-block;
    width: 100%;
}

.archive-module-calendar .calendar-day:nth-child(7) {
	/* カレンダー本体 土曜日 */
	color: #AAF;
}

.archive-module-calendar .calendar-day:nth-child(7) .archive-module-calendar-highlight {
	/* カレンダー本体 土曜日 a span (背景部分) */
	color: #FFF;
	background-color: #4D4DFF;
}

.archive-module-calendar .calendar-day:first-child {
	/* カレンダー本体 日曜日 */
	color: #FAA;
}

.archive-module-calendar .calendar-day:first-child .archive-module-calendar-highlight{
	/* カレンダー本体 日曜日 a span (背景部分) */
	color: #FFF;
    background-color: #FF4A4A;
}

/* カレンダー */
.archive-module-calendar .calendar-sunday {
	color: #F66;
}
.archive-module-calendar .calendar-saturday {
	color: #66F;
}

日本語にしてみよう！

レイアウトがテーブルで組んであるので、ちょっとしたテクニックが必要です。
誰かキッチリ真ん中へ表示させるやつお願いします*1

/* 曜日を変更する場合は適当に弄ってください */
.archive-module-calendar th {
    font-family: "Osaka−等幅","ＭＳ ゴシック",monospace;
	overflow: hidden;
    text-indent: -1.45em;
    visibility: hidden;
}
.archive-module-calendar th:after {
    visibility: visible;
}

.archive-module-calendar .calendar-sunday:after {
	content: "日";
}
.archive-module-calendar th:nth-child(2):after {
	content: "月";
}
.archive-module-calendar th:nth-child(3):after {
	content: "火";
}
.archive-module-calendar th:nth-child(4):after {
	content: "水";
}
.archive-module-calendar th:nth-child(5):after {
	content: "木";
}
.archive-module-calendar th:nth-child(6):after {
	content: "金";
}
.archive-module-calendar .calendar-saturday:after {
	content: "土";
}