ブログをコード1行でiPhoneで見やすいよう改造する方法


このエントリーをはてなブックマークに追加

ここからちょっと広告です。

広告は以上です。

「小鳥ピヨピヨ」をiPhone対応させました。
URLは変わらず「http://coolsummer.typepad.com/kotori/」です。iPhoneでアクセスすると、こんな感じに見えます。

 
Iphone2008073001

 
やり方は簡単。以下のmetaタグをの前に加えるだけです。

書き方:
<meta name="viewport" content="width=【ブログの横幅】, initial-scale=【拡大率。widthで指定した横幅をある程度拡大して、僕の場合は本文領域のみを表示】, " />

例:
<meta name="viewport" content="width=850, initial-scale=0.611, " />
※ 「850」が小鳥ピヨピヨの横幅。
※ 「0.611」は「850×0.611=520」で、だいたい小鳥ピヨピヨの本文表示領域と同じ横幅に。

と、いうわけで、単に拡大してサイドバーを表示域の外に出してるだけという、なんちゃって対応です。
本当は弾さんのところみたく、iPhone専用にcssを書いたり、あるいはiPhone専用にhtmlを改造したりするのが良いのでしょうが、面倒なので……

上記を知るにあたり、以下のサイトを参考にさせていただきました。ありがとうございました!

 
 
……え?
おなじみの小鳥マークが見えなくて寂しい

大丈夫です。これは拡大しているだけなので、右に画面をスライドさせればほら、

 
Iphone2008073002

 
ちゃんと小鳥が現れます。ホッとしましたねー(僕も)。
(ちょっとしたトリビア。このちょっと切なくて可愛い小鳥は100%ORANGEさんに書いてもらったものです。大感謝!)。

 
 
100%ORANGE AtoZ (Pooka+)
Pooka編集部 (編さん)

[Amazonで詳細を見る]

 
 
まるさんかくぞう
及川 賢治 (著), 竹内 繭子 (著)

[Amazonで詳細を見る]

Ads by Google

コメント

コメントは、Twitterやはてブに、以下のボタンから本記事のアドレスつきでツイート/ブクマしていただくと、上にあるzenbackのウィジェットに反映されます。
  このエントリーをはてなブックマークに追加
または同ウィジェット内のFacebookコメントでお願いしますー。

Facebookのシェアは……されても誰だかわからないのですが、シェア自体は嬉しいので、下にボタンを置かせていただきます。よろしくお願いします。