史上最速かも!スマホ用アフィリエイトサイトの作り方



スマホサイトの作成スキルは、スマホアフィリエイトなど、スマホでど〜んと稼ぐためには必ず習得しておきたい。

サイト作成と聞いて、拒否反応を示す人もいるだろう。だが、心配しないでほしい。スマホサイトはPCサイトより圧倒的に簡単に作ることができる。

今回は、初心者でも一瞬できれいなスマホサイトをつくる方法を紹介する。

1. エディタを準備する
2. jQueryMobileを予習する
3. 基本のコードを書く
4. jQueryMobileを呼び出す
5. 広告タグを挿入する
6. テーマローラーでサイトカラーを変更する
7. 補足:リストの使い方


1.エディタを準備する

スマホサイトは、HTML5やjQueryMobileといった言語を使って作られる。このコードを書くためのノートのようなものをエディタと呼ぶ。

windowsやmacでは最初からテキストエディタが標準搭載されている。この標準搭載のエディタを使ってもいいのだが、コーディング専用のエディタを使った方が圧倒的に効率的だ。

専用のエディタには、コードの補完機能というものがついていることが多いからだ。補完機能は携帯の予測変換みたいなものだと思ってもらっていい。

無料でおすすめなのは、windows、mac双方で使える「Aptana Studio」あたりがおすすめだ。ちなみに私は、macユーザーなのだが、有料の「coda」というエディタを使っている。無料エディタで物足りなくなったり、さらに効率的にコーディングをする必要が出てきたタイミングでこちらは検討すればいいだろう。


2.jQueryMobileを予習する

最速でスマホサイトを作るためには、基本は無視して、いきなりjQueryMobileという言語で作成する。

このjQueryMobileは、スマホサイトを誰でも簡単にきれいに作るために開発された言語である。非常に簡単で、コーディング初心者でもさくっと使うことができる。

まずは、web上のサイトなどで軽く予習してほしい。おすすめはドットインストールだ。ドットインストールは、無料で様々なプログラミグ言語を動画で学ぶことができる。


3.基本のコードを書く

予習が終わったら早速スマホサイト作成に入る。実際のコーディングを見て行こう。まずは、スマホサイトの基本となるコードを書く。

[code lang=”html”] <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
<footer>
</footer>
</html>
[/code]

基本コードの内容を簡単に説明すると、最初のはこのコードはHTMLで書かれているという宣言である。深く考える必要はないので、おまじないのようなものだと考えて記載してほしい。

次からのコードはhtmlと/htmlに挟まれた形になっている。この中に、サイトに必要な情報をコーディングしていく。

head〜/headの間には、このサイトの基本情報(サイト名、サイトの説明など)を記載する。この内容は画面上に見えるものではない。

body〜/bodyの間には、実際にサイトの表面に現れる様々なコンテンツを記載する。

footer〜/footerの間には、サイトのコピーライトなどを記載する。


4.jQueryMobileを呼び出す

基本コードの記載が終わったら、次はjQueryMobileを利用するために必要な呼び出しを行う。
方法はいたって簡単。head〜/headの部分に下記のコードを書くだけだ。

[code lang=”html”] <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
[/code]

このあたりは特に気にせずコピペすればよいだろう。


5.広告タグを挿入する

ここまで記載すればそれなりにきれいなスマホサイトが出来ている。

後は、ASPから取得した広告タグをそのままbody〜/bodyの間に記載すればいい。


6.テーマローラーでサイトカラーを変更する

jQueryMobileではデフォルトで数種類のテーマカラーが用意されているが、サイトの内容によっては、デフォルトのテーマではイメージに合わないことがある。こういう場合、自分でサイトのイメージにあるカラーを設定するのだが、CSSでいちいち設定するのは手間だ。

そこでjQueryMobileでは、テーマローラーというツールを使う。これは、web上で手軽にjQueryMobileのテーマを作成することができる。

基本的にドラック&ドロップで出来るため、誰でも直感的に操作できるため効率的だ。作ったテーマは自由にダウンロードできる。後はスマホサイトのCSSフォルダに、ダウンロードしたファイルを保存し、下記をhead〜/head>のjQueryMobileの呼び出しより先に記載すればいい。

[code lang=”html”] <link rel="stylesheet" href="テーマローラーで作成したcssファイルの場所" />
[/code]

7.補足:リストの使い方

スマホサイトでよく使うパーツにリストがある。
広告をきれいに並べて表示したり、情報を項目ことに整理したりするのに使う。使い方は簡単だ。一番シンプルなリストは、〜中に以下のコードを記載すればいい。

[code lang=”html”] <ul data-role="listview">
<li><a href="飛び先のURL">項目名A</a></li>
<li><a href="飛び先のURL">項目名B</a></li>
<li><a href="飛び先のURL">項目名C</a></li>
</ul>
[/code]

もちろん、これを少し変えてやればいろいろな表示が可能だ。詳しくはjQueryMobileの日本語リファレンスを参照のこと。


まとめ

史上最速かもしれない、スマホ用アフィリエイトサイトの作り方は以下である。

1. エディタを準備する
2. jQueryMobileを予習する
3. 基本のコードを書く
4. jQueryMobileを呼び出す
5. 広告タグを挿入する
6. テーマローラーでサイトカラーを変更する
7. 補足:リストの使い方

スペースの都合や、シンプルに表記するために、詳細まで記載しきれていない部分もあるが、簡単なスマホサイトを作るだけであれば十分な内容である。

この記事が、これからスマホサイトを作る手引きになれば幸いである。


当サイトオススメの稼げる副業



コメントを残す

CAPTCHA


サブコンテンツ

このページの先頭へ