iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。

1. CSSのみで切り替える

iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="./layout/iphone.css"/>
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="./layout/pc.css" />

2. PHPで切り替える

まずユーザーエージェントを判定し、iPhoneならiPhone用のCSSに切り替える、ということです。

<?php
  $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
    $browser = 'iphone';
  }
?>

<?php if($browser == 'iphone'){ ?>
    <link rel="stylesheet" type="text/css" href="./layout/iphone.css"/>
<?php }else{ ?>
    <link rel="stylesheet" type="text/css" href="./layout/pc.css" />
<?php } ?>

3. JavaScriptで切り替える

PHPと同様、ユーザーエージェントを判定し、iPhoneならiPhone用のCSSに切り替えます。

<script type="text/javascript">
    if (navigator.userAgent.indexOf('iPhone') != -1) {
        document.write('<link rel="stylesheet" type="text/css" href="./layout/iphone.css">');
    }else {
        document.write('<link rel="stylesheet" type="text/css" href="./layout/pc.css">');
    }
</script>

4. WordPress プラグイン「WPtouch」を使う

WordPressを使っているWebサイトに限りますが、「WPtouch」というプラグインを導入すれば簡単にiPhone風レイアウトに変身してくれます。

出来上がりはこんな感じに。シンプルですね。

まずはWPtouchプラグインをダウンロード

WPtouchプラグインのページからプラグインをダウンロード。pluginsフォルダにアップロードしたら 管理ページ > プラグイン > インストール済み のWPtouch欄にある「使用する」をクリック。もしくはプラグインページから「WPtouch」で検索し、自動インストールして使用します。すると設定欄に「WPtouch」が現れるので、ここから設定していきます。

設定を変える

デフォルトでも特に問題なく表示されると思いますが、いろいろいじってみましょう。

ここで色やスタイルを変更します。

デフォルトのアイコン画像が表示されています。「Upload Icon」からオリジナルの画像（.png, .jpg, .gif）をアップロードできます。ロゴ・ブックマークアイコンとして使う場合57x57pxの.png画像がよろしいようで。

ロゴ用・各ページ用アイコンを設定できます。もちろんアップロードした画像も選択可能。

Google Adsenseの設定はこちらから。

5. 「Mobify」を使う

私のよく拝見するブログに使われているので、気になっていたMobify。WebクリエイターボックスのiPhone最適化にあたって、上記4点を先に考えたのですが、結局このMobifyを使うことにしました。理由はCSSの切り替えだとPC用の広告画像も表示されてしまう（設定すれば非表示にできますがなんとなくめんど(ry）、オリジナルのデザインを使いたいの２点です。PCのみに表示させるもの、iPhoneのみに表示させるものが結構あるようなら、このMobifyを使うと楽だと思います。

サインアップする

「SIGN UP」ボタンをクリック。メールアドレスとパスワードを決めたら「CREATE ACCOUNT」をクリック。Additional Detailsの部分は入力しなくてもOKです。

Webサイトを指定

「MOBIFY A WEBSITE」のテキストフィールドに自分のサイトのURLを入力して「MOBIFY MY SITE」をクリック。

反映させたい部分を選択

iPhone用サイトで表示させたい部分を選択します。赤くなっている部分が選択されています。選択し終わったら右上の「Next」もしくは「Design」をクリック。

CSSコーディング

スクリーンショットのように、左側にCSS、右側にプレビュー画面が表示されます。元々指定されているIDやクラスはそのままなので、PC用CSSをとりあえずコピペし、不要なCSSは削除。また、必要なCSSを書いていきます。場合によっては画像を新たに作ったり、サイズを変える必要があります。

プレビュー画面からブロックを選択し、左下の「Move Up」「Move Down」で位置を変更、またIDやクラスを付与できます。「New Block」をクリックすればHTML入力欄が表示され、新たにブロックを挿入することもできます。完了したら右上の「Next」もしくは「Manage」をクリック。

サブページの設定

トップページの設定が終わったら、同じ要領でサブページも設定していきます。Manageページの一番下「New Mobile Template」のテキストフィールドにURLを入力。

設定完了

全ページの設定が完了したらManageページにある「LAUNCH」をクリック。

この画面ではなぜか文字化けしていましたが、実際にiPhoneで見ると正常に表示されました。

iPhoneでサイトにアクセスした場合、自動的にwebcreatorbox.mobify.meへリダイレクトするための設定画面。使用しているサーバーのCパネルからm.yourdomain.comなどのサブアカウントを作成・使用する場合は「USE A CUSTOM DOMAIN WITH YOUR MOBILE VIEW」へ記述。「SEND MOBILE VISITORS TO YOUR MOBILE VIEW」に表示されているJavaScriptコードをページのHeader内に挿入すれば設定完了です！

Google Adsense、Analyticsの設定

ローンチ後「Manage」ページからGoogle AdsenseとAnalyticsの設定ができるようになります。

iPhone用Webサイトギャラリー

今回いろんなiPhone対応サイトを参考にさせて頂きました！素敵なデザインがたくさんあったので紹介します。

Alex Buga’s Livingroom

PCサイト: http://www.alexbuga.com/

モバイルサイト: http://www.alexbuga.com/v9/iphone

以前Twitterでも紹介したサイト。iPhone用もきれいなデザインです。

Michael Dick

PCサイト: http://m1k3.net/

モバイルサイト: http://m.m1k3.net/

モノクロメインでシンプルですが、モバイル版だと大きなロゴがインパクトあります。

Erskine Design

PCサイト: http://erskinedesign.com/

モバイルサイト: http://m.erskinedesign.com/

PC版でもモバイル版でも色合い・コンテンツともにシンプルで見やすいですね。

Sundance Film Festival 2009

PCサイト: http://festival.sundance.org/2009/

モバイルサイト: http://www.quickmobile.com/sundance/

グランジ具合がかっこいいです。

SEVNTHSIN

PCサイト: http://sevnthsin.com/

モバイルサイト: http://m.sevnthsin.com/new/iphone/

各アイコンを真ん中の円の中にドラッグしてページ移動します。発想がおもしろいですね！

DPTO

PCサイト: http://www.dpto.com.br/

モバイルサイト: http://m.dpto.com.br/

真っ赤な背景が迫力あります。わざと斜めにしてあるナビゲーションも個性的ですね。

Productive Dreams

PC・モバイルサイト: http://www.productivedreams.com/

モバイル版でも木目・暖かい色合いはそのままに、より読みやすくなっています。

coosh

PCサイト: http://coosh.com/

モバイルサイト: http://coosh.com/iphone/

背景画像や商品の大きめ画像が特徴。ショッピングカートはPC版サイトにリダイレクトされるのがちょびっと残念。

MATT BANGO Photography

PCサイト: http://mattbangophotography.com/

モバイルサイト: http://mattbangophotography.mobify.me/

写真がメインのサイト。モバイルでも気軽に見れます。

Amy Stoddard

PCサイト: http://www.amystoddard.com/

モバイルサイト: http://amystoddard.mobify.me/

モバイル版のナビゲーションメニューを少し変えてより短く・わかりやすくしています。

なんだか書きたいこといろいろあって長くなってしまった…そしてWebクリエイターボックス for iPhoneもまだまだ改善の余地アリなので少しずつ修正していきます。

参照サイト: iPhone用にCSS/PHP/JavascriptでCSSを切り替える基本的な方法