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

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

　

　
やり方は簡単。以下の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を改造したりするのが良いのでしょうが、面倒なので……

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

• ブログをiPhone閲覧用に最適化してますか？ ： webdog
• iPhone対応サイトの作り方 ： iPhone 3G Wiki
• iPhone / iPod touch 向けのmeta要素 viewport ： ProjectDD Blog
• Apple Developer Connection - Web Apps Dev Center - Designing Content

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

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

　

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

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

[Amazonで詳細を見る]

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

[Amazonで詳細を見る]