トップページへ / おすすめサイト
スマートフォン対応サイト作り方総合案内所
【スマートフォン対応サイト作り方総合案内所とは】
スマートフォン対応サイト作り方総合案内所とは、初心者のために、スマートフォン対応サイト作り方をご提供するサイトです。
【スマートフォン対応サイト作り方】
スマートフォン対応サイト作り方をまとめたサイトは、こちら
----------【広告】----------

----------【広告】----------
スマートフォン対応サイトの作り方はいろいろとありますが、ここでは、とにかく簡単に、難しい知識なくして作る方法をご紹介します。
  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サイトと区別できるようにした方が賢明です。
【PCサイトからスマホサイトに自動切り替えする方法】
スマホサイトを作ったら、PCサイトの</head>の前に以下の文字を打ち込みます。

<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サイトにアクセスされた場合には、スマホサイトが表示されるのです。フォルダとファイルの名前はもちろん任意です。ただし、スマホサイトを前出の「構成が簡単なサイトを作って公開する」方法で作成した場合には、スマートフォンの機種によってはうまく表示されない場合があります。

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

----------【広告】----------

----------【広告】----------
【厳選リンク】
スマホサイト検索ランキング スマホサイトを集めたサイトです。すべてがスマホ対応。

スポンサードリンク
ウィキペディア要らずの1p(ワンピー) Copyright (C) 2012. SUZ45. All Rights Reserved. お問い合わせ