先日からチョコチョコと空き時間に作っていた動物病院ホームページサンプルです。
今回の技術テーマは「Movable Type」 + 「jquery」 + 「PNG画像（アルファーチャンネル付き画像）」 + 「PCサイト」 + 「携帯サイト」です。
とくに、今回の自分の中でやってみたかったのは、Movable Typeで特定カテゴリー「病院からのお知らせ」だけを携帯サイトへ吐き出すテンプレートの作成。
最初は手こずるかと思っていたけど、ものの1時間でDOCOMO・au・SBの3キャリア対応テンプレートが出来あがってしまったよ。
反対に、今回のデモサイトで以外に時間がかかってしまったのが、jqueryを使ってオンマウスでボタン画像を130％拡大する仕組みと、カテゴリーごとの<body>で使うcss（backgroundプロパティ ）です。
本当はbackgroundプロパティに関しては、もっと良い対処方法が有ったんだけど、marginプロパティ・paddingプロパティでIE6のバグに泣かされる羽目に・・・・。 結局はPNG画像をIE6でどうやって処理するかの問題なんだけどね。
お暇な方は、一度サンプルサイトを見てやってください。
動物病院サンプルサイトはこちら
コメントする