02.09
Tue
ブログがiPhoneに対応しました
カテゴリー： デザイン
moruzo.comがiPhoneに対応
iPhone用のテーマ
iPhone用のテーマを作成し、iPhoneからも快適にブログを見る事ができるようになりました。
iPhoneの特徴
- Javascriptが使えます
- Flashは対応していません
- 画面の幅は320px
- 画像やファイルがアップできません
- CSS3がたくさん使える
- CSSのセレクトがたくさん使える
Javascriptが使えます
biggerlinkを使いリンクを押す範囲を大きくし、指でクリックしても押しやすくしました。フェードで折りたたみも出来るのでコンテンツがスッキリします。
画面の幅は320px
viewportで画面調節が出来ます。デフォルトは980pxで設定してあり、iPhoneの画面の幅は320pxなので、320pxにしました。文字を拡大することもできます
<meta name="viewport" content="width=320" />
拡大縮小をさせずに固定する事も可能です
<meta name = "viewport" content = "width = device-width, user-scalable = no" />
Youtubeや表、画像などが320pxより大きくなってしまうこともあるため、CSSのmax-widthで最大幅を制限します。
あと携帯の同様で変数のtinyを使う事で画像を縮小させて表示する事も可能です。
/* 最大幅の制限 */
#boxLink img,#boxLink object,#boxLink embed,.entry div,#boxLink table{
max-width: 280px;
}
画像やファイルがアップの対処
記事作成画面で、画像やファイルの追加ボタンを表示させない様にする事にしました。画像は画像URLボタンから直接URLを貼って投稿できます。Google Mapも投稿できます。
CSS3やセレクタをたくさん使えました
text-shadowやbox-shadow、角丸などを使用したり、:nth-child(n)などセレクタを活用しました。
近日、planのiPhoneテンプレートをエクスポートデータとして配布したいと思います。
html5とアプリケーションキャッシュを使用してみたいです。
関連エントリー
上記のエントリーについているタグと関連にするエントリーをいくつかピックアップしています。
- (1) クリスマスのテンプレート
- (1) safari用テーマを公開しました
( 0 )
( 0 )
