今回のカスタマイズ

ブログのサイドバーに表示されるカレンダーを、独自のデザインにカスタマイズします。

カレンダー部分のHTML、CSS構造は以下のようになっています。

HTML構造

カレンダーの背景を写真に

まずは、カレンダーの背景に表示するための画像を作成します。200 × 200ピクセルぐらいの大きさで、全体的に同じ色合いの写真がよいかもしれません。背景画像を作成したら、画像ファイルをTypePadにアップロードします。

画像ファイルをアップロードしたら、「デザイン」->「カスタムCSSを編集」で、以下をカスタムCSSに追加します。 . module-calendarの、background url()の中は、自分で作成・アップロードした背景画像のURLに置き換えます。table内のカレンダーの文字の色は、背景画像の色合いによって調整 してください。

.module-calendar{
  background:#fff url(http://www.sixapart.jp/images/2005/11/css_calender_image2.jpg);
  background-position: center;
  color:#fff;
  padding: 5px;
}

.module-calendar .module-header{
  color:#fff;
}
.module-calendar table{
  border:0 none;
}
.module-calendar th{
  color: #fff;
}
.module-calendar td{
  color: #fff;
}
.module-calendar a{
  display:block;
  background:#fff none;
}

以下のようなデザインになりました。なかなか目を引くカレンダーになりましたね。ぜひ個性的なカレンダーづくりにチャレンジしてみてください。