携帯サイト作成簡単アフィリエイト


携帯サイトのタグについて

携帯サイトは、難しいというイメージもあるようですが、本来は全く逆です。 確かに技術的に高度なものを求めれば別ですが、一般的な携帯サイトならPCサイトよりカンタンで作業時間もかなり少なくすみます。 その理由はいくつかあります。 ●携帯サイトはパケット通信である事。 パケット通信し放題のサービスも最近ではありますが、大勢の人はパケット量によって通信料を払っています。 ではパケット代が高くなる場合は?というとホームページのデータの重さによって高くなります。 つまり、携帯サイトのデザインに凝りすぎて重くなってしまったらサイトを開くのも遅くなる上、パケット代がものすごく高くなってしまいます。 せっかくの訪問者もパケット代が高くつくサイトには2度と来なくなってしまいます。よって必然的にシンプルなつくりのサイト作成となります。 作業もカンタンで喜ばれるサイトになる訳です。 ●携帯サイトとPCサイトの技術的な問題 携帯サイトの技術は日々すごいスピードで進んでいますが、やはりまだまだPCには追いつきません。 PCサイト作成に使っているHTMLのタグでも携帯サイトには使えない場合があります。 しかし、ごく基本的なタグは使えるようになっています。 すると当然使えるタグが少ない分、シンプルなつくりでカンタンなサイト作成になります。 使えるタグの種類などは機種の新しさなどによっても違いますが、カンタンなタグで作ったサイトであればほぼすべてのサイトで閲覧できるでしょう。 ※ここでは、カンタンな作り方を紹介していきますので、もしもっと凝ったサイトにしたいという方はNTTドコモホームページで機種ごとの使用タグについての紹介がありますのでそちらをご参照下さい。

広告

携帯サイトを作成しよう

実際に携帯サイトを作成してみましょう。 シンプルな携帯サイトのトップページのサンプルを作ってみました。 見た通り、基本的なタグだけ使ったシンプルなモノです。 下にあるこのサンプルをコピーして、部分部分を変更するだけでも携帯サイトが出来上がります。

携帯サイトトップページのサンプルを別窓で開く

携帯サイトトップページ見本

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>サイトのタイトル</title>
<meta name="keywords" content="キーワード">
<meta name="description" content="サイトの説明文">
</head>

<body bgcolor="#FFFFFF">
<marquee bgcolor="#FF0000"><font size="2" color="#FFFFFF">キャッチコピー</font></marquee>
<font size="2">
<center>
<font color="#000000">タイトル</font>
<hr size="1" color="#CCCCCC">
<font color="#000066">
文章を入れます。
</font>
</center>
<hr size="1" color="#FFCC00">
<font color="#FF0000">
■ <a href="m1.html">●●●●</a><br>
■ <a href="m2.html">●●●●</a><br>
■ <a href="m3.html">●●●●</a><br>
■ <a href="m4.html">●●●●</a><br>
</font>
<hr size="1" color="#CCCCCC">
<center>
●●●●
</center>
</font>

</body>
</html>

サンプルトップページの説明

サンプルの説明をします。 上から4行目の「サイトのタイトル」という部分を自分の好きなタイトル名にします。 つづいて「キーワード」を自分のサイトに関連した語句にします。複数の語句は,(カンマ)で区切ってください。 つづいて「サイトの説明文」を自分のサイトの説明文に変えます。 11行目の「キャッチコピー」に好きな言葉を入れます。これは言葉が右から左へ流れていくようになっています。 14行目「タイトル」に好きなタイトルを入れます。また、タイトルに画像を使いたい場合は

<font color="#000000">タイトル</font>

を消して代わりに画像を入れてください。 「文章をいれます」の部分に文章をいれます。 ●●●●が4行あります。これは各ページにとぶメニューです。各ページのタイトルを入れてください。 最後に●●●●があります。ここには作者や著作権の表示をいれたい場合にいれてください。

このサンプルを使う場合、ファイルは

index.html

として各ページのファイル名は上から

m1.html m2.html m3.html m4.html

としてください。

各ページのサンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="キーワード">
<meta name="description" content="サイトの説明文">
</head>

<body bgcolor="#FFFFFF">
<marquee bgcolor="#FF0000"><font size="2" color="#FFFFFF">キャッチコピー</font></marquee>
<font size="2">
<center>
<font color="#000000">タイトル</font>
<hr size="1" color="#CCCCCC">
<font color="#000066">
文章を入れます。
</font>
</center>
<a href="index.html">top</a><br>
<hr size="1" color="#CCCCCC">
<center>
●●●●
</center>
</font>

</body>
</html>

各ページのサンプル説明

携帯サイト各ページのサンプルを別窓で開く

各ページサンプルですが、トップページとほぼ変わりません。 変わったところは、トップページにあったメニューがなくなった事、下の方にtopというリンクがついた事ぐらいです。 それぞれのファイル名に変えて、使用する事ができます。

広告



携帯サイト作成簡単アフィリエイト

Copyright © 2015 · All Rights Reserved · B.B