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の表示が超残念な感じなのです。全て表示されないうえに、スクロールできないw
せっかくつけたのにww
それが目的でFancyBoxに変えたのにぃ〜
挙動不審www
ということで、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ダメな筈。うう、直してきます。

コメントをどうぞ



PageTop