スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログのカレンダーの今日の日付などに丸印を

JavaScriptとCSSの組み合わせで、カレンダーの今日の日付のところに丸印をつけてみました。あと来月の祝日と、ついでにデルのキャンペーンの締切の日にも印をしてみました(笑) トップページから見ないと分かりにくいかもしれません。

元のテンプレートに依存する部分が大きいのですが、いちおうこちらから.jsファイルがダウンロードできます。


あとテンプレートのHTMLの中で、こんな感じでfunctionをひとつ定義して
<script language="JavaScript">
<!--
function myblogcalendar() {
	var c = new blogCalendar;
	c.findToday("calendar_today");
	c.findDate("2006/01/10","calendar_check");
	c.findDate("2006/02/11","calendar_yasumi");
}
// -->
</script>

プロフィール画像のonloadで実行させています。
<img src="http://(略)sayu.gif" onload="myblogcalendar()" />

これが実行されますと、今日の日付のところをclass="calendar_today"に、2006年1月10日の日付をclass="calendar_check"に、2月11日をclass="calendar_yasumi"に設定しますので、テンプレートのCSSの中でそれらのclassを定義しておきます。うちのは↓こんな感じです。
.calendar_today {
  background:url("http://(略)/maru1.gif") no-repeat center;
}
.calendar_check {
  background:url("http://(略)/dell.gif") no-repeat center;
}
.calendar_yasumi {
  background:url("http://(略)/maru2.gif") no-repeat center;
}

class名は適当でよいですし、こんなにふうにいっぱい書いておいてもOKです。
	c.findDate("2006/03/21","calendar_yasumi");
	c.findDate("2006/04/29","calendar_midori");
	c.findDate("2006/05/03","calendar_golden");
	c.findDate("2006/05/04","calendar_golden");
たぶん。

ただし、ブログのテンプレートの中で、カレンダーがTABLEタグで出来ていて、そのTABLEがid="calendar"になっていて、年月がその中のCAPTIONタグで2005年01月のような形式で表示されるようになっていないとうまく動きません(;´ー`)

スポンサードリンク

コメント (コメントを書く)

トラックバック

トラックバックURLはこちら
http://symnkn.blog7.fc2.com/tb.php/142-44b26a74

-

管理人の承認後に表示されます

  • 2013/10/18(金) 23:52:47 |

その他最新の記事

その他最近のトラックバック

コメントの投稿

管理者にだけ表示を許可する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。