その9「商品紹介のタグを取得・貼り付け」ー 無料で作った自作スマホサイトで収入を得られるか?の実験室。

前回の続き。さて、パソコンで作ったHTMLファイルをweb上にアップロードできるようになったところで、いよいよ商品の紹介の仕方に入っていきましょう。
楽天アフィリエイトを使用しますので、まずは楽天のページで紹介したい商品のページを開いておきます。そこのページのURLアドレス(http://などで始まるアドレス)をコピーして、楽天アフィリエイトのリンク作成の窓へ貼り付けます。
sample3_1.png
「リンク作成」ボタンを押すと、自動でタグを作ってくれます。
sample3_2.png
商品の写真サイズなど、好みに応じて選ぶとそれに合わせたタグに生成し直してくれます。
sample3_3.png
このタグは全文が結構長いので「ソースを選択」で全体を選択してからコピーすると楽です。
これで商品のタグは出来たのですが、キャッチコピーの文章も欲しいのでブログの編集ページで文章を作ります。
sample3_4.png
色や強調など、工夫してから「HTMLタグ編集」の画面へ切り替えます。
sample3_5.png
これを丸々コピーして、スマホページのレイアウトにしたHTMLファイルへ貼り付けます。
sample3_6.png
先に生成しておいた商品のタグ(楽天アフィリエイトのタグ)も貼り付けて完成。
これをiPhoneで見てみます。
ー>http://laboratory.hanagasumi.net/sample_3.html


sample3_7.png

商品写真をタップして、楽天のページへ遷移することを確認。

sample3_8.png

これが上手くいけば、基本の形はもう出来ています。あとはこれを調整・修正しながら凝った内容に膨らませていくのみです。
☆☆ワンクリックで応援お願いします\(^¬^)ノ 励みになります☆☆
にほんブログ村 携帯ブログ iPhoneへ
↓おまけのソースコード。(ブログ上だと表示が消えるので半角の<>を全角の<>に置き換えて載せています)


<!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>

シェアする

  • このエントリーをはてなブックマークに追加

フォローする