前回の続き。さて、パソコンで作ったHTMLファイルをweb上にアップロードできるようになったところで、いよいよ商品の紹介の仕方に入っていきましょう。
楽天アフィリエイトを使用しますので、まずは楽天のページで紹介したい商品のページを開いておきます。そこのページのURLアドレス（http://などで始まるアドレス)をコピーして、楽天アフィリエイトのリンク作成の窓へ貼り付けます。
「リンク作成」ボタンを押すと、自動でタグを作ってくれます。
商品の写真サイズなど、好みに応じて選ぶとそれに合わせたタグに生成し直してくれます。
このタグは全文が結構長いので「ソースを選択」で全体を選択してからコピーすると楽です。
これで商品のタグは出来たのですが、キャッチコピーの文章も欲しいのでブログの編集ページで文章を作ります。
色や強調など、工夫してから「HTMLタグ編集」の画面へ切り替えます。
これを丸々コピーして、スマホページのレイアウトにしたHTMLファイルへ貼り付けます。
先に生成しておいた商品のタグ（楽天アフィリエイトのタグ）も貼り付けて完成。
これをiPhoneで見てみます。
ー＞http://laboratory.hanagasumi.net/sample_3.html
商品写真をタップして、楽天のページへ遷移することを確認。
これが上手くいけば、基本の形はもう出来ています。あとはこれを調整・修正しながら凝った内容に膨らませていくのみです。
☆☆ワンクリックで応援お願いします＼(＾￢＾)ノ 励みになります☆☆
↓おまけのソースコード。（ブログ上だと表示が消えるので半角の<>を全角の＜＞に置き換えて載せています）
＜!DOCTYPE html＞
＜html lang=”ja”＞
＜head＞
＜meta charset=”UTF-8″ /＞
＜!–見た目をスマホっぽく。ここから–＞
＜meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”/＞
＜link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css”/＞
＜script src=”http://code.jquery.com/jquery-1.6.4.min.js”＞＜/script＞
＜script src=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js”＞＜/script＞
＜!–/見た目をスマホっぽく。ここまで–＞
＜/head＞
＜body＞
＜!–ヘッダーここから–＞
＜div data-role=”header”＞
＜h2＞楽天アフィリエイト＜/h2＞
＜/div＞
＜!–/ヘッダーここまで–＞
＜!–文章を貼ります–＞
＜!–(中略)–＞
＜!–/文章ここまで–＞
＜center＞
＜!–楽天のリンクを貼ります–＞
＜!–(中略)–＞
＜!–楽天のリンクここまで–＞
＜/center＞
＜!–フッターここから–＞
＜div data-role=”footer”＞
＜h2＞＜small＞ 2013 季節を感じるグッズ＜/small＞＜/h2＞
＜/div＞
＜!–フッターここまで–＞
＜/body＞
＜/html＞
