お絵かきできるイラストSNS [Chixi(ちぃ)]

iUIとは、WEBページをiPhoneライクの
インターフェースに置換してくれるライブラリです。

以下のURIよりダウンロードができます。
■iUIダウンロード
http://code.google.com/p/iui/

デフォルトのスタイルシートのままサイトを作った場合、
以下のようになります。


この場合、ＷＥＢページをホームに追加すると
以下のように上部が隠れてしまいます。


そこでメニューバー分余白を設け、
以下のようにアレンジしてみました。


ホームに追加し、実行するとこんな感じ。

■コードの修整は以下の通りです。

iphone2\iui
iui.css

body > .toolbar {
height: 45px;
→65px;へ変更

body > *:not(.toolbar) {
top: 45px;
→65px;へ変更

.toolbar > h1 {
padding-top: 10px;
→20px;へ変更

.button {
top: 8px;
→20px;へ変更

以下の画像を置換
\iui\t\default\toolbar.png

↓実際のＷＥＢページ


お手軽スマホ対応。
是非お試しあれ！

■参考にしたページ
http://ameblo.jp/linking/entry-10766619832.html