BlogをiPhone対応にしました

blog_iphone

BLOGをiPhoneでの閲覧時に最適化されるようにしました。
最新のエントリー10件しかみれませんが、おそらく深く読み進める人はいないだろうということでカテゴリとかなしにした。単に面倒だったというのもあるけど。

iWPhoneというWordPress用プラグインを利用しています。
iWPhoneはiPhoneからのアクセス時に自動で判定してiPhone用のテーマで表示してくれるという物で、一応iPhoneのUIぽいテーマがデフォルトで入っています。
そのテーマを自作したものにしています。

iPhone用のサイト制作ということでいろいろと参考にさせていただきましたが、マークアップ的には小さい画面用のsafari特化サイトを制作するという感じでしょうか。
ボタンとかのCSSの使い方がおもしろかった。
あくまでもサイトなのでiPhoneぽいUIを感じさせつつ、独自のデザインを取り入れるみたいなデザインにしたつもりです。
エントリー中の画像なんかはPC用のものそのまま使ってるんですが、iPhoneの画面横サイズである320px以上のものもあるので、そういう画像はjQuery使ってサイズを小さくしてます。
jQueryも今回ので初めてちょっとさわってみたけど、おもしろいっすね。

マークアップ時に参考にしたのが下記サイト。公式です。

ボタンやリストなどのサンプルコードもあるので便利です。リンク切れてるけど。

また、iPhoneぽい画面遷移エフェクトを実現するJSのライブラリもあります。

どれも使うとおもしろそうですが、Webアプリぽいものを制作するためな感じがして今回使うのをやめた。
jQuery使ってるのでjQTouchを一番調べてみたんですが、JSやれる人ならよさげですよ。

トラックバック

http://blog.eternitydesign.net/archives/2009/12/blog_iphone.html/trackback