前回の続き。さて、パソコンで作った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>