スマートフォン対応してみた。HappyLifeCSSに関するネタを中心に色々書いてます。→スマートフォン対応してみた。(先代の)を借りたので、勉強がてらiPhone対応と言うかスマートフォン対応してみました。何かを実験するには自分のサイトが一番手っ取り早くて良いですね。サイト持ってない方は、ホント何でもいいので、何かしら作ったほうがいいかなーと思います。ドメイン取得して、サーバレンタルして、構成練って、デザイン・コーディングして、FTPクライアントでファイルアップしてみたり、MTやWPインストールしていじったり、CSS3の実験したり色々使えて便利ですし、カッチリ作れば実績にもなりますしね。それは良いとして、スマートフォン対応したんです。付けていただく感じです。iPhoneとかのスマートフォンでiPhone用のトップを閲覧すると次のような感じで見れると思います。ちなみに、自動的に振り分けとかは、PC版で見たいかもしれない場合に対応できないので敢えてしてません。それだとせっかく用意したページに気づいてもらえないなーとか思ったので、通常のトップページを表示するとこんな感じになるようにしてみました。スマートフォンで閲覧した場合のみ、左上にドーンと誘導用のリンクが表示されます。個別のページでも同じような感じでリンクが表示されます。他のページのキャプチャも。全エントリーの一覧は次のような感じでタイトルと日付がズラーっと表示されます。PC用のトップに戻りたい場合は、フッターにある「PC用トップページ」から戻れるようです。いい感じで、ロリポの広告が表示されてますね。言うの作ってると多少なりテンションが上がるので、調子に乗ってホームにアイコンを置けるようにしてみました。右下にあるアイコンがソレですね。今までAndroid用にXperia標準ブラウザでの対応とかはなんとなーくしてたけど、iPhone用は仕事で必須になることも無かったり、そもそも所有してなかったりであんまり勉強して無かったので、今回は色々得るものが有りました。Twitterでもプラグイン入ってるから自動でツイートしちゃったので、もう良いかーとか思った!思ったけど、全く書かないのもアレなので、参考にしたサイトとか適当に書いておきます。MT」を公開いたします。terkel.jp適当にぐぐったら出てきたり、そう言えばあの人がそんな事してたよなーとか思ったりして覗き見しながらやってました。デザインブログに書いてあったのをそのまま貼りつけて、Xperia標準ブラウザで見たらイケテない感じになってしまったので、user-scalable=no,を取ったらいい感じになりました。iPhoneのソース覗いた感じ、次のようにhead要素内に指定すると反映されるようです。/>冒頭に出てきた画像は、ホーム用のアイコンそのままのヤツですが、角丸にしなくても自動でキレイにしてくれたり、光沢?表現まで勝手にしてくれるんですね。ほんと、iPhone無知過ぎる><で、UAの判定はこのブログがphpだったので、terkel.jpさんの記事を参考にと言うかそのまま使ったりしてます。MTに関しては、特別なことはあんまりしてなくて、それぞれ専用のテンプレートを用意しています。なるよう調整した程度です。分かりませんが、ページ内リンクがうまく機能しなくて、ググッても出てこなくて困ったりしました。スムーズスクロールの関係かと思って止めてみたけどうまく飛ばないので、ウチのサイトがいけないのかと思って他のサイトを覗いて試してみても飛ばなかった。他のサイトをもう少し見てたら、一部のスムーズスクロールだと上手く動くのが確認できたので、今回はそれで対応。コリスさんのスムーズスクロールを使わせてもらいました。だいたいこんな感じでしょうか。[5]えどさんおお、お疲れ様ですー。自分のブログもなんちゃってスマートフォン対応してますが、しっかり対応してないのでリニューアル込みで色々やりたいところ・・。えどさんへの返信そう言われたら、見に行きますよねー(笑って事で早速見てきましたが、見た感じちゃんと形にはしてますね。えどさん、半端なく忙しそうっすからね><落ち着いたら、ダーツなり飲みなり行きましょう!2010年9月20日(月)23:18コリスさんほぇー、そーなんだ。iPhoneもってないから、気がつかなかった。コリスさんへの返信そうなんすよねー。Niteのサイトはちゃんと飛ぶからあれーと思ったらコリスさんところのでした!助かりました><2010年9月21日(火)15:07sugiyamaさん初めまして。私もiPodTouchを買ってからサイトのiPodTouch対応化をしました。いっても、全ページにviewportタグを貼りつけて、あとはiPod用のcssをいじりまわしただけですが...。iPodTouchではGoogleAdも幅の狭いものを表示する、など工夫しています。HappyLifeのホーム用アイコンを私のiPodTouchホーム画面に入れてみました。PCのファビコン画像とiPod用のアイコンの統一感がなかなかいいですね。恐竜図鑑みたいなサイト「探そう!好きな恐竜」を作ったんです「Web制作者のためのSassの教科書」の改訂2版が発売しました。́)ゞそろそろ「こちら」や「ここ」にだけリンクさせるのを絶滅させたいんです。Sassの教科書で一番読んで欲しいところ。Spaceが3月1日にオープンしますCSSSってコワーキングスペース運営するです。excluded.↑上に行くよ。