2011.03.05

変えたことを公にメモる

サイトの更新ついでに、デザインを変更しました。
しかし！今回の更新は、なんか追加したり、cssをいじり倒したりしましたが、IEのテストを全然しておりません。ヾ(；´Д`A
一応考え得る対策はしたけれど、もしかするとお見苦しいかも…。
IEには悩まされ、その存在を呪ったりもしますが、IE6あたりはないと困るような気がします。
古いOSに対応するブラウザがどんどん無くなってゆくから〜。Mac OS9使いにも共通する切実な問題ですので同病相憐れむって訳です。（XPは何故！という疑問は残ります。もったいない）
では、今回変更したことなどをつらつらと。
この間から画像をクリックで拡大ポップアップするjavascript、PopBoxを使わせて貰っておりました。
今回、HTMLをポップアップ（iframeで）させたく別のスクリプトを探してみました。
見つけたのが、有名どころのFancyBox。

当サイト使用例（下の方です）

なかなか良いです。
設置に苦労はあまりありませんでした。苦労した？分Popboxの方が設置は面白かったかなぁ。
ただ、リンク追加の更新とか変更とか兎に角手軽なのは、FancyBox。
<head>内にちょこっとscriptコピペして、<a>にクラス指定するだけ！すごい！まさにOじろーのような素人向きっす。
そんなFancyBoxにも1つだけ問題が。
FancyBox自体の影とか閉じるボタンとかの画像がIEで表示できないようだす。
cssの相対パスが原因とのこと。うん、cssならなんとか触れるよ。絶対パスに書き直しました。
参考サイト　Wasters haven. さん
css周りで大幅に変更したのは、「footerをブラウザの下部に固定表示する」関連でございます。
こちらも有名どころのCSS Sticky Footer を使わせてもらいました。
前回使っていたcssもほぼ同様の仕組みだったのですが、wrapper関係でheaderにposition: absolute; を使う羽目になっており、ちょっと煩雑でしたので、すっきり。
あと、iPhone用に一部のページを分けました。
iPhoneのsafariはiframeの表示が超残念な感じなのです。全て表示されないうえに、スクロールできないｗ
せっかくつけたのにｗｗ
それが目的でFancyBoxに変えたのにぃ〜
挙動不審ｗｗｗ
ということで、iPhone用には、普通にHTMLをリンクすることにしました。
まず、iPhone用に同様のページを作成（iframeの為のクラス指定を<a>から外しただけ）。
各方面からリンクをしている元のページに「iPhoneを専用ページに飛ばすjavascript」を設置。

これで、pcとMacからはiframe使用、iPhoneはiframe不使用のページに振り分けできました。
ポップアップしていたページ自体は両方同じものを使うので、<link media>を使い、読み込ませるcssをiPhone用とそれ以外用に分ける。

ちなみにIEは<link media>を理解しないので、<!–[if IE]>にて別途指定。
ちゅー感じにしてみました。備忘録。
ただ、忘れていたのが2が出ると巷で話題のiPadの存在。
こちらのsafariもたしか、iframeダメな筈。うう、直してきます。

CATEGORY : css&html web関連

コメントをどうぞ



PageTop