1. まずは、「テンプレート」を入手し、変更を加えていきます。文字コードが「UTF-8」なのでご注意ください。文字コードは、テンプレートの冒頭の「charset="UTF-8"」のところを変えることにより、設定変更できます。ちなみに、このサイトは、「shift_jis」で書かれています。
2. 「構成が簡単なサイトを作る」･･･あまり幅広ではなく、文字を大きくしたり、指で押すことを考えて、リンクの間隔を広く取ったサイトを作りましょう！
3. 「自動縮小を制御するviewportを記述する」･･･上記のテンプレートでは既に設定されていますが、スマホサイトの</head>の前に以下の文字を打ち込みます。これにより、スマホで最も読みやすい書式で表示されます。詳細は、こちら。
   <meta name="viewport" content="width=device-width">
4. 「実際の書き方」･･･あまりいい例ではないかもしれませんが、こちらのソースを見てください。このように記載することで、スマホでは、最も見やすいように自動的に表示されます。ソースの見方は、ブラウザ毎に異なりますが、ブラウザの「設定」のところで「ツール」−「ソースを表示」などと辿っていけば見られると思います。
5. スマホ専用のサイトを作ったら、ファイルをアップするわけですが、後々紛らわしくなるのを避けるため、ファイル名を「smartphone-twitter.htm」などとして、PCサイトと区別できるようにした方が賢明です。

<script type="text/javascript" language="JavaScript">

<!--HPB_SCRIPT_UAREDIRECT

if(document.referrer.indexOf(document.location.hostname)==-1){ if (navigator.userAgent.indexOf('iPhone') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {location.href = 'sp1/twitter.htm';}}//--></script>

</head>

ここで、PCサイトのあるフォルダの下に「sp1」というフォルダを作り、「twitter.htm」というスマホサイトを作っておきます。これで、PCからPCサイトにアクセスした場合には、PCサイトが表示され、スマホからPCサイトにアクセスされた場合には、スマホサイトが表示されるのです。フォルダとファイルの名前はもちろん任意です。ただし、スマホサイトを前出の「構成が簡単なサイトを作って公開する」方法で作成した場合には、スマートフォンの機種によってはうまく表示されない場合があります。

• 無料FTPソフト
• ワードでホームページを作る
• 文字化けの修復方法
• 便利ツール集
• 自動でページをジャンプさせる方法
• HTML・CSS初心者入門
• レンタルサーバーとは
• 独自ドメイン取得メリット
• アクセスアップ・SEO
• フリーCGI入門
• アドセンス収入
  
  
• ホームページ作成トップページ

1. スマホもどんどん機能が増えてきて、PCサイトを自動変換する機能などもそのうち出てくるような気がします。
2. スマホは一過性か。タブレット端末との融合が進み、通常のウェブサイトを見やすくなる時代が来ると思います。
3. PCでもスマホでも同じサイトで対応するという「レスポンシブル・ウェブ・デザイン」という考えが主流になっています。つまり、スマホ用のサイトを用意しないで、PCでもスマホでも見られるレイアウトにするということです。
4. このサイトで提示した方法でスマホサイトを作成しても、うまく表示されない場合があるので、必ずスマホで確認してください。