簡単なスマホサイトの作り方「PCありの方」

スマートフォンサイトを作りたい方は、既にPCサイトをお持ちの方が多いと思います。PCサイトをお持ちの方が対象の記事になります。

スマートフォンに対応するにはいくつかの方法がありますので、概略を説明します。

制作の参考にして頂ければと思います。

なお、WordPressで運用していて、SEOの観点からテーマを変えたくない場合はスマートフォンようのテーマを自作して、「Multi Device Switcher」というプラグインで振り分けるのがいいと思います。

すでにPCサイトをお持ちの方で、レスポンシブウェブデザインを採用したい方はこちらの記事をご覧ください。レスポンシブWEBデザインで簡単にスマホ対応

スマホサイトを作る方法

ＰＣサイトをスマホサイトにする方法
新しくスマホサイトを作る方法

１．一番簡単な方法は既存のサイトをスマホに対応させる方法です。
スマホ用のＣＳＳを別に用意し、ＰＣサイトへのアクセスをデバイス(iPhone,iPad,Androidなど)によって、ＣＳＳを振り分ける方法です。

２．まったく新しくスマホ専用のサイトを作ります。ＨＴＭＬ５とＣＳＳ３で記述します。

アクセスを振り分ける方法

JavaScriptでアクセスを振り分ける
メディアクエリでアクセスを振り分ける
.htaccessファイルをサーバーに置いてアクセスを振り分ける

いずれもＰＣサイトへのアクセスを振り分ける方法ですが、JavaScriptを使って行う方法が一番簡単です。
メディアクエリで振り分ける方法も簡単ですが、ブラウザによっては認識されません。
また、.htaccessは確実な方法ですが、ご利用のサーバーが対応していなければ使えません。javascriptはほとんどのスマーフォトンで使用可能ですので、今回は、JavaScripを使った方法をご紹介します。

下記のコードを<head></head>内のＣＳＳファイルの後に入れるだけです。iPhone,iPad,iPhd,Androidを判別して、HTML内にスタイルシートのタグを書きだすスクリプトです。
パスは書き換えてください。


 if(((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)){document.write('');
}

これで振り分けができました。次はスマホに対応させるためのメタタグを記述する必要があります。
<head></head>内に下記コードを記述すればおっけーです。
これで、スマホからのアクセスを判断し、スマホ用のCSSを読み込みます。後はスマホ用のＣＳＳを記述して完成ですが、PC用のスタイルシートの内容を引き継いでしまうことに注意してください。その辺を考慮してスタイルシートを記述することが必要です。

とはいえ、複雑な構造のサイトの場合、スタイルシートの記述がかなり大変になるので、一概に簡単とはいえない事をご了承ください。

meta name viewportをhead内に書く

コードを入れておけばスマートフォン用の画面に対応します。

initial-scaleは倍率です。

user-scalableは画面の拡大縮小の可否です。yesは可能、noは不可。※ウェブサイトの場合は、目が悪い人の為にyesを選んだ方がいいかもしれません。

「スマートフォンに使いたいCSS3」の記事もご覧ください。

ソフトやサービスを利用して作りたい方はこちらの記事をご覧ください。
スマートフォンサイト作成ソフト