ユニークカレンダー - ポエツ | poets

Logs

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
■カレンダーの基本を知る
FC2のカレンダーには2集類があります。
〈テンプレート機能一覧〉で言うところの「一般型」と「横型」です。
しかし共有では「縦型」にカスタムされている場合もあり、この呼び方とは合致しません。
ここでは曜日が区別できるタイプを1型(変数:calender)、「横型」と言われているものを2型(変数:calender2)と呼ぶことにします。

なぜ呼び方からから入ったかというと、さっそく「横型」でないものを横向きに使うネタだからです。このカレンダー1型の基本的な性質を見てみます。

1)曜日が識別できること。
2)そのために各月の起算日を調整するのに、-(ハイフン)が表示される。
3)起算曜日はかならず日曜日からになっている。
4)調整ハイフンも含めて、出力される表示は35日(7日5週)もしくは42日(7日6週)であること。
そんなところが基本となります。

■空白日をどうするか
この1型をフラットに表示させたのが、以前作った「猿さがり」です。
cal_monkey.jpg

これらのカレンダーに共通するのは、数字(日付)を隠し、更新日に画像などを表示させる点ですが、まず「全体」の長さが見えないと、いつの時期(月の前半か後半か)に更新されたのかがわからないので、「更新フラグ」にもなりません。

そのために全体(1ヶ月)の幅(もしくは起点と終点)を表示させます。そうすると空白日(更新のない日)をどうするか。
たとえば、基本には「道路」の画像を入れておいて、更新日にはランナーが走るみたいな仕掛けができます。
「猿さがり」の場合、基本的にはツタ(の画像)が表示されています。1ヶ月まるまる更新のない日でもツタだけは表示されます。そして猿のさがった位置で、月のどの時期に更新されたがわかります。曜日がわかるのは言うまでもありません。
さて今回のカレンダー(命名してないので仮にUC1と呼んでおきます)では、空白日まで画像を入れると表示も重くなるので、全幅をボーダーで囲むだけの処理をしています。

ちなみに1日をwidth:10pxにした場合、4)で説明した調整ハイフンを含めて、全幅は420px必要になります。
でも、各月1日より前に表示される調整ハイフンは最大で6、日数は最大31日ですから、
×37=全幅370pxにして、以降のムダなハイフンはhiddenさせても構わないはずです。
(計算間違えてないですよね)

■UC1シリーズ 4種類
まず「UC1-1」ですが、以上で述べた仕組みの、更新曜日が表示される基本的なタイプです。

サンプル表示

これらのカレンダーはフォントサイズを1pxにすることで、本来表示されている日付(数字)を隠しているだけなので、閲覧者のブラウザが最小フォントサイズを指定した場合、こんな風に見えてしまうおそれが常にあります。

background画像にテキストが重なって判読し難い状態です。

だったら、日付を消さず利用すれば、更新日も分かっていいじゃん、と言うのが「UC1-2」です。
uc1_2.jpg
こちらは曜日もテキストで〈月〉、〈火〉とか入れられるので、画像を使わないタイプを作ることもできます。

上で述べたように「空白日」があることで、更新間隔もわかるのですが、見映えがよくないとか、更新曜日が分かれば充分と思う場合は、これをfloatさせて更新日のみ片側に寄せます。
これが「UC1-3」です。
ちなみに、ここまでのカレンダーは何月を表示しているのか分かりにくかったので、月の表示を入れてみました。

Firefox、Netscape、では少し表示が崩れます。フロートさせた部分が2列になって位置が下がっているようです。

さらに何曜日の更新が多いか一目でわかるように、曜日ごとに寄せたタイプが「UC1-4」になります。この場合は、もう日曜を起算日にする必要はないので、月~日の順に並ぶようにしました。

comment


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

更に

発展してきました。ますます楽しくなっています。

trackback

用FC2,寫部落格日誌也都簡單阿!

検索語抽出

ポップアップ・コメント

poets designed

Ajax検索
AD

台湾留学 完全サポート

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