トップページ > ホームページ作成 > スマートフォン専用ホームページ作成

スマートフォン専用ホームページ作成について

スマートフォン専用のホームページとは

スマートフォン専用のホームページは、スマートフォンが抱える事情に考慮した作りにすることが重要です。
パソコンとスマートフォンの主な違いは
スマートフォンはデータ通信速度が遅い(不安定)

家庭のパソコンの多くは、固定回線かつブロードバンドに接続されているため、
画像ファイルや動画ファイルなど、データ量の多いコンテンツが掲載されていてもさほど障害にはなりません。
一方、スマートフォンのインターネット回線はデータ通信速度が遅く、不安定なので
ホームページを開くために時間がかかります。
また、他ページに移動する際も、ページの切り替わりに時間がかかりますので
個人的にはjquery mobile の利用をお薦めします。

スマートフォンサイトの作り方

jquery mobileを利用します。
簡単な利用方法は、ヘッダーで呼び出すようにすること。
通常、javascriptの利用は、ホームページ内にデータを置きますが
呼び出しをするようにすれば、データを軽くすることができます。
(ファイル指定方法をURLにするだけです)
ヘッダ記述例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<meta name="format-detection" content="telephone=no" />
<title>タイトルを書く</title>
<link rel="canonical" href="メインサイトのURLを書いておく" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

この記述で間違いは無いはずです。

ディスクリプションやキーワードの記述がありませんが
スマホサイトは、メインのパソコン用サイトと同様のページになるはずなので
あえて設定せず、代わりに
link rel="canonical" の設定で、メインサイトを指定しておきます。
記述最後の3行をみると解りますが、スタイルシートとjavascriptは外部サイトから読ませています。

よかったら、このまま全部コピーしてご利用ください。

jQuery mobileを利用するメリットとしては画面サイズが変わっても、横に伸びます。
ボタンに画像を使わなくていいので、データ量の節約ができます。

注意点として、
ページ毎にHTMLファイルを使用するのではなく
1つのindex.htmlファイルの中に、全てのページを入れることです。
ヘッダの記述は、全ページ共通のものを1つだけ、書きます。
(上に例で出しているヘッダです)

それぞれのページは div で区切ります。
ここが、1ページの始まり。
<div id="top" data-role="page" data-title="ホームページ作成 東京WEB企画">
ここがコンテンツ記入場所
</div>
ここで1ページ終了。
idはページそれぞれ、重複しないように割り当てます。(好きな文字列)
data-role="page" これがページの始まりという意味です。

サイト内の他ページへのリンクは
<a href="#menu" data-role="button" data-icon="arrow-r" data-transition="slide">ホームページ作成料金</a>
こんな相対パスでリンクさせて行きます。
data-role="button"
これでボタンが作成されます。
data-icon="arrow-r"
右矢印アイコン
data-transition="slide"
ページ移動はスライドアクションで移動する。
といった感じです。
(コピーして使ってください)

スマホサイト特有のアコーディオンは
<div data-role="collapsible">
<h2>ボタンに書かれる文字</h2>
<p>開くと見えるコンテンツ</p>
</div>
これで作れます。

当サイトのスマートフォンサイトが
http://www.itsnerima.com/sp/
ここにありますので、タグなんかはコピーしてご自由にご利用ください。
(文章や写真はダメですよ)

あと、文字コードは必ずUTF-8で作成してください。
(テラパッドで文字コートをエンコードすればOK)

タグを見ると解りますが、XHTMLでもしっかり動作します。
書くページの先頭に
<div data-role="header" data-theme="d"><a data-icon="back" data-rel="back" data-transition="reverse">Back</a>
このような記述をすると、バックボタンとHOMEボタンができます。
i-Phone風で格好良いです。

色は5色用意されています。
自分で作ることも出来ますので、とりあえず最初はデフォルトの色で作り
あとからテーマローラーで作れます。
http://jquerymobile.com/themeroller/
試してみてください。

<a href="tel:0123456789">01-2345-6789</a>
これで、電話のリンクが作れます。

全体的にこんな感じで、上手くつくれるはず。
頑張ってください。

SITE MENU

NEWS

google+1

Facebook

Feed

Copyright(C) 東京WEB企画 All Rights Reserved.