iPhoneでもブログがちゃんと表示されるように

新しく買った大人のおもちゃ、iPod touch、うひうひなんです。
いろんなサイトを見てまわっているうちに、「そうだ、自分のサイトも見てみよう」。
早速アクセスをしてみたんです。
そしたら……キャー! いったい何なんですか、これは!
小さいのですよ、小さい。画面がメチャクチャ小さくて文字が見えません!
こんなん読めるかー!

iPhone(iPod touch)ではホームページの表示が小さい、小さい

どうもこれ、通常のパソコンで見るような大きなサイズのページでも、液晶画面内にすべてを表示させようとして、メチャクチャ縮小して表示するようなんですね。
もうね、液晶画面上にアリンコが這っているのかと思うようなぐらいにメチャクチャ小っさいな字がゴチャゴチャゴチャと。
いや、そりゃもちろん、液晶画面上で指を広げるマネをして、縮小している画面を拡大させることはできるのですよ。
ただ、それは違うと思うのですね、全然違います。
アクセスした瞬間から、ちゃーんと見えるように表示してもらいたいじゃないですか。

そんな訳で、ブログを全然更新しないくせに、こういうことはついつい乗り出しちゃうのです。
ブログを、iPhone/iPod touchに合わせて表示するように、ちょっと手を加えてみます!
が、しかし……あれえ。
本来だったら用意されたテンプレートをそのまま当てはめれば簡単にできるそうなんですが、うまくいかないのですよ。
何というか、これまでにも色々とシステム上をいじくりすぎてきたのがよくないのでしょうか。
思ったような動作をせずに、仕方なく妥協することにしました。
嗚呼……ブログの個別記事の出力先が、気持ち悪い。

さらにデザインも思ったような表示にならなくて、スタイルシートで四苦八苦。
スタイルシートをいじくり回しているうちにドツボにはまってしまいました。もう訳判りません。
そうこうしているいちに、きゃー、もうあと数時間で起きなければならない時間に!
とりあえずTOPページだけは何とか思うようなデザインになりましたので、よしとしましょう。

まずはTOPページが完成

が、しかし。
ここからの道のりが長かった……。
TOPページから、それぞれの個別ページを見てみるとちゃんとできているのです。
ほら、このとおり。

パッと見た感じでは、中身もできあがっていそうなんです

しかし、よくよく見てみるとどうもおかしいのですよ、おかしい。
本文がちゃんと表示されているページもあれば、文字の右側にえらくスペースが空いてしまっている記事もあるのです。
いったい何がそうなってしまうのか、記事によって右側に大きなスペースがあったり、なかったり、小さくあったりと、もうガッタガタなんです。

右側に謎のスペースが生じてしまいました

ここでドツボにはまってしまったんですね。
原因を探すこと数時間、ようやく「あ、写真……」と判りました。
そうなんです、写真が悪いんです。
通常の写真であれば、このように画面内に収まっているので本文もちゃんと表示されているのですね。

通常の記事だと画面右側はジャストフィット

ところが、ちょっと調子に乗って大きな写真を載せてしまうと、このとおり。
写真が画面サイズに収まるように全体が縮小表示され、それでこのように右側が大きく空いてしまうのです。

大きな写真の右側がはみ出してしまっていたからのようです

調べてみると、なるほど。
このテンプレートの横幅サイズが480ピクセルで設定されていたので、それ以上の大きさの写真になると、はみ出ちゃうようです。
だったら写真をすべて480ピクセル以下に縮小させちゃえばいいのですが……うーん、これまで何百枚とアップした写真を1枚1枚そんなことできませんよ……勘弁してください。

そこで色々と検索してみると、「スタイルシートで画像表示を強制的に480ピクセル以下になるように設定したらいいよ」との情報をゲット!
やったね!
こうして横幅を強制的に480ピクセル以下にしたところ……うわーん!
横幅は見事にぴったりフィットしたのですが、縦の長さがそのままだから、妙に長細い写真になっちゃいましたよ!

波しぶきが余計に高くなった「細長くなった写真」

こうして今日も1日悩んでいたのですが……いやー、色々と考える方もいらっしゃるものですね。
さすがはインターネッツ様。
なんとJavaScriptを使えば、縦・横の比率をそのままに、横幅を縮小してくれるそうなんですよ。
なぜそんなことができるのか、実はサッパリ判っていませんが、説明どおりに設定してみると……やったね!
調子に乗ってサイズを大きく設置した写真も、見事、このとおり! ジャストフィットしましたよ!

ようやく中身も完成しました

そんな訳で、一応は狙ったとおりのことができるようになったし、これ以上はもう訳が判らないので、今回の作業はとりあえず、ここまでにしましょう。
(誰か、リダイレクトの正規表現を教えてくださいましー! そしたらすべてが完了するんです)

そんなこんなですべては手が回りませんでしたが、ひとまず完了です。
iPhoneやiPod touchをお持ちの方は、ぜひぜひぜひぜひ、このブログをご覧になってください。
(といっても見え方が違うだけで、中身はそのままですのでご了承ください

そうそう、アイコンもちゃんと設定しているんですよ。
と言っても、いつものワンコなんですが。
アイコンも用意しました