実践!スマホサイトの作り方

 
トップページ はじめに 作成実績 スマホテンプレート ネットで収入を得る
 
 

実践! スマホサイトの作り方

 

それでは、実際に、スマホサイトの作り方をお伝えしていきます。

ただ、イチからスマホサイトを作っていくのは、少し時間がかかる(効率的ではない)ので、元々あるホームページのテンプレートを使って、スマホサイトの作り方をお伝えしていきたいと思います。

具体的には、動画で覚える無料ホームページ制作講座 のサイトで、 「サンプルサイト」のデータを無料で配布していますので、その「サンプルサイト」のデータを使用して、スマホサイトの作り方を解説していきます。




【はじめに】サンプルサイトのデータをダウンロードする

動画で覚える無料ホームページ制作講座 のサイトで、 サンプルサイトのデータを配布しているので、まずはダウンロードしてみてください。 このサンプルサイトのデータを使って、スマホサイトを作っていきます。

あとは、下記でお伝えする、【手順1】から【手順4】を実施すれば、スマホサイトが完成します。




【手順1】viewport の設定を入れる

スマホサイトにするためには、viewport の設定を入れてあげます。 この viewport を入れることで、文章の表示を、スマホの画面サイズに合わて表示することができるためです。

スマホは、機種によって画面のサイズが異なりますよね。 だから、どの画面サイズでも、スマホサイトをキレイに表示させるために、この viewport の設定が必要になるということです。


具体的な手順としては、サンプルサイトのデータの中にある、HTMLファイルのヘッダー部分に、下記の赤くなっている1行を入れてあげます。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="ホームページ,制作,サンプル">


上記の、 「meta name="viewport"・・・」 という記述を1行、HTMLファイルのヘッダー部分に入れることで、文章の表示をスマホの画面サイズに合わせて、表示されるようになります。 スマホサイトを作るときの必須の設定になりますので、必ず入れるようにしてください。




【手順2】「画像の大きさをスマホの画面サイズに合わせる設定」を入れる

スマホサイトに表示させる画像の大きさを、スマホの画面サイズに合わせて表示させるために、「画像の大きさをスマホの画面サイズに合わせる」 という設定を入れます。


具体的には、下記の赤くなっている1行を、サンプルサイトのスタイルシートのファイル(style.css ファイル)に入れてあげます。

img { max-width:100%; height:auto; }


上記の記述を、スタイルシートのファイル(style.css ファイル)に入れることで、画像の大きさをスマホの画面サイズに合わて表示してくれます。 これも、スマホサイトを作るときの必須の設定になりますので、必ず入れるようにしましょう。




【手順3】サイドバーを削除する

パソコンサイトであれば、サイドバーはあった方が良いです。 しかし、スマホは画面が小さいため、 スマホサイトには、サイドバーは必要ありません。


そこで、サイドバーを削除するために、サンプルサイトのデータの中にある、HTMLファイルから、下記のソースを削除します。

<td>

<!-- サイドバー -->
<iframe height="500" width="100%" src="side.html" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>

</td>


サイドバーを表示させている、上記のソースを削除することで、サイトからサイドバーが消えます。 スマホサイトには、サイドバーは必要ないので、上記の「サイドバーを表示させているソース」を、削除するようにしましょう。




【手順4】横幅の設定(width)をパーセンテージに変更する

最後に、ホームページの横幅の設定を、パーセンテージに変更します。

具体的には、パソコンサイトの場合、横幅を具体的な数字で指定すること(たとえば、横幅は width="900" という形で指定すること)が一般的なのですが、 スマホサイトの場合は、横幅をパーセンテージで指定する(たとえば、横幅は width="100%" という形で指定する)ようにします。

この理由は、スマホにはいろいろな種類があり、小さな画面のスマホもあれば、大きな画面のスマホもあるからです。 だから、スマホサイトを作る場合は、横幅を具体的な数字で指定するのではなく、「width=100%」という形で、パーセンテージで指定するようにします。

このように、ホームページの横幅をパーセンテージで指定することで、どの画面サイズでも、スマホサイトがキレイに表示される、というわけです。


変更方法としては、サンプルサイトのデータの中にある、HTMLファイルのソースを、下記のように変更します。

<table width="770" cellspacing="0" cellpadding="0" style="border:0px solid blue;" bgcolor="white" align="center">
↓ ↓ ↓ ↓ ↓

<table width="100%" cellspacing="0" cellpadding="0" style="border:0px solid blue;" bgcolor="white" align="center">


上記のように、横幅の設定である width の数字を、"770" から "100%" というように、パーセンテージ(%)に変更してあげます。 こうすることで、画面サイズに関係なく、どのスマホの機種でも、スマホサイトがキレイに表示されるようになります。

なお、この変更は、横幅の設定(width)を具体的な数字で指定している箇所は、すべて、パーセンテージ(%)に変更してあげるようにしてください。




まとめ

上記の【手順1】から【手順4】を行うことで、スマホサイトが完成します。
そして、上記4つのことを実施して、作成したスマホサイトが、http://alodog.com/です。

試しに、スマホで、http://alodog.com/ を見てみてください。 このサイトは、パソコンで見ると、パソコンサイトが表示されるのですが、スマホで見ると、スマホサイトが表示されますよ。


スマホサイトは、パソコンサイトと作り方が一緒ですし、どのスマホの画面サイズでも、スマホサイトがキレイに表示されるように、上記の【手順1】から【手順4】を行えば良いだけです。

スマホサイトといっても、何か特別な作り方をするわけではなく、ホームページが作れれば、スマホサイトは簡単に作ることができるので、このページでお伝えしているやり方を、ぜひ覚えておいてくださいね。


それでは、次のページでは、スマホサイトをインターネット上に公開する方法をお伝えします。




 

 
ホームページの作り方
 
動画で覚える無料ホームページ制作講座
 
ホームページの作り方を、動画で見ながら覚えることができる 無料の講座 です。

インターネットを使ったサイドビジネスで収入を得るためには、 「ホームページを自分で作れること」 が必要になるので、このサイトが役に立ちます。
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための 「ホームページテンプレート」 です。

なお、スマホテンプレートがセットになっているプランもあります。
 
収入を得る最短コース
 
会員制サイドビジネス講座
 
インターネットを使って、 月20万円の収入を得るために、 必要な知識と技術 を身につけることができる、会員制のサイドビジネス講座です。

これが、インターネットを使ったサイドビジネスで、 収入を得るための最短コース になります。
 
当サイトの運営者
 
インターネット副業 運営者プロフィール
 
 
NPO法人 推薦状
 
NPO法人からの推薦
 
NPO法人「起業とキャリア支援センター」様からの推薦を受けて、運営しています。