Jan 18, 2009

iPhone/iPod touch向けの表示設定をした

昨年12月にiPod touchを買ったら当初の予想以上に使用頻度が高いんだこれが!

という訳でこのブログもiPhone/iPod touchで見やすくしたい…とはいえユーザーエージェントごとの振り分け?なんてよく分からんし調べる心の余裕は無いぞオイル交換やチェーン注油だってまだだしー
と仕事に追われながら悶々としている最中にふと以前見た記事を思い出して仕事中断、大いに参考にさせていただきました。感謝。

 404 Blog Not Found:本blogをiPhone/iPod Touchフレンドリーに

上記リンク先を見よう見まねでHTMLとCSSにほんの数行書き足したらtouchで実際の見た目を確認して完了。本文の表示領域を拡大してサイドバーの位置をずらしてます。

090118-1.jpg

設定画面>デザイン>HTML ヘッダに1行書き加え
<meta name="viewport" content="width=740" />

管理画面>デザイン>デザイン一覧 CSSに以下を追記して出来上がり。
@media screen and (max-device-width: 700px) {
/* iPhone + iPod touch */
#container { width: 700px }
#content { min-width: 700px; max-width: 1280px }
}
740とか700といった数値や各名称はブログの構造やデザインよって調整が必要ですが、書き足す記述は僅か数行、削除したくなった時もそこを削除するだけで済むから気が楽です。

「@media screen and (max-device-width: 700px) 」っていうのは表示領域700px以下のデバイスにのみこの設定を適用しますよ、という意味らしいがきちんと理解はしていない。もしどこか不具合が生じていたらご指摘下さい。

090118-2.jpg

サイドバーは「#links { display:none }」を書き足して非表示にした方がいいかもしれないけど、自分で時々使いそうだから取りあえずは日記本文の下に流し込んでます。

iPod touchで見やすいサイトが更に増えると嬉しい。[私欲]


tag: ipod iPhone CSS
posted by junji at 18:15 | Comment(2) | TrackBack(0) |
この記事へのコメント
うほっ これはイイ対応。
touchで見れない!と思っていたところだったので。
 ながの
2009/01/19/ 21:08
今のところほぼながのさんとゆっけさん(+自分)の為の仕様(笑)なので、喜んでもらえると何よりです。
 JUNJI
2009/01/21/ 17:20
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。