アメブロカレンダーをちょこっとカスタマイズしてみたよ(・ω・)

サイドバーにあるカレンダーの列の背景色を変更しようと思って作成したものです。

以下の画像の感じとなります。



日曜日と土曜日の列の背景色を変更するために、jQueryを使用して必要となる要素を追加します。
下記に記述しているコードを「プラグインの追加」から「フリープラグイン」を選択し、下記コードを追加します。
jQueryが必要となりますので、そんなもの使ってないって人は、本体のコードもコピペしてください。

また、CSSも編集しますので、CSSが編集できるテンプレートでのみ可能です。

jQuery本体のコード
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
※すでに他のスクリプトで導入している場合は、上記コードは不用です。


追加のコード【JavaScript】

<script>
$(function(){
  function colColor() {
    var cal = [
      '<col class="sun">',
      '<col class="mon">',
      '<col class="tue">',
      '<col class="wed">',
      '<col class="thu">',
      '<col class="fri">',
      '<col class="sat">',
    ];
    var r = 0;
    html = '';
    while(r<cal.length) {
      html += cal[r];
      r++;
    }
    $('.calendar').find('table').prepend(html);
  }

  colColor();
});
</script>

追加のCSSコード【CSS】
「background: 値」と「color: 値」
※値＝お好みの色に変更してください。
例）#ff0000　＝　赤

/* カレンダー */
.calendar td a {
	display: block;
	width: 100%;
	height: 100%;
	background: #1ABC9C;
	color: #ffffff;
}
.calendar td a:hover {
	color: #ff3366;
}
.calendar .sun {
	color: #ff0000;
	background: #ffd9ea;
}
.calendar .sat {
	color: #305aff;
	background: #d0efff;
}