TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2008年08月14日

ページのレイアウト(12)


テーブルを使った商品一覧の作成 記事、アフィリエイト商品の貼り込み(2)で、表示した
「ブログ表示サンプルC」
の商品一覧は、テーブル表を組み合して作成しています。

ブログ記事内の左右幅内に、均等割でテーブルを作成して、項目、商品画像、データを振り分けて、ホームページの分割テンプレートにしてあります。

 ブログ上で、テーブルを作成するのは難しさがありますが、商品をまとめて紹介するときには、便利な表示形式です。

ホテルA ホテルB ホテルC
see0504a.jpg see0504a.jpg see0504a.jpg
宿泊:16,000円 予約可 送迎あり 宿泊:6,300円 5日予約不可 送迎あり 宿泊:15,000円 予約可 送迎あり

 このようなテーブルを2段、3段と重ねていけば、総合的に商品アピールするページになります。
 そのページの組み合わせ、レイアウトの方法は、ページのレイアウト(1)から今回までを参考に、自分なりの独自性のあるデザインで作り上げてください。

「ブログ表示サンプルC」はその例です。
【ブログ表示サンプルC】 samp04.jpg
  ↑画像をクリック(拡大します)

 商品を詳しく1品づつ紹介するページと外部に「カテゴリー」別の一覧紹介ブログを作成して、リンクで繋いで、豊富な商品を紹介する方法も考えられます。

 訪問客、とくに初めて訪問する方は、商品を捜してはいますが、その商品の信頼性を自分なりに判断する立場にあります。

 訪問客の信頼を確定するのは、入り口である「ブログ」です。

 適当に作ってあるブログと、一生懸命、客の立場を考えて作ってあるブログは、あなた自身でも判断がつきますね。訪問してきた客は一瞬で「それを判断」します。

 安心して「商品詳細」を見にいける「ブログ」は、「商品詳細」を確認して、納得できない商品であったら、また「あなたのブログ」に戻ってきます。
 そして、別の商品を見にいく可能性は非常に高いです。

 その協力をする「ブログ」の形式が「カテゴリ分け」と「一覧ページ」です。

 「類似商品を数多く見て、信頼のある商品を決める」
 ネットショップを経験した方なら、その理屈はわかりますね。

  アフィリエイト商品の貼り込み(2) ←参考ページ

 テーブル作成タグだけでも、いろいろと応用して「表示の異なるブログ」が作成できましたね。

 応用することで、納得のいく「あなたなりのページ」が組めます。
↓↓★ご協力ください    kame.jpg banner_01.gif ★人気ブログランキング

ページのレイアウト(11)

スタイルシートに組み込んだ 「owntable」を使用して、記事に「テーブル」を作成して見ましょう。

記事入力ボックスに下記のHTMLを書き込みます。

<div class="owntable">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>画  像</th>
<th>商品説明</th>
</tr>

<tr>
<td width="110">
<img src="Http://tosiji-dreamafi.up.seesaa.net/image/see0504a.jpg" alt="see0504a.jpg" width="100" height="62" border="0"/>
</td>

<td width="300">
沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。
</td>
</tr>
</table>
</div>

表示したのがサンプル@です。

テーブルサンプル@

画  像 商品説明
see0504a.jpg 沖縄のリゾートホテルの風景です。 長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。


ページのレイアウト(7)で作成した、テーブルと比較してみましょう。

   ページのレイアウト(7) ←クリック


ページのレイアウト(7)のテーブル(スタイルシートを使用しない例)
画  像 商品説明
see0504a.jpg 沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。


●画像の上端位置と文章の一列目が揃っていない。
●文章の文字が大きい。

などの問題点は、スタイルシートに組み込んだ「owntable」のクラスを使うことによって解決しましたね。

ブログは、もともとのが「個人の日記」を書くと言うのが目的ですから、ホームページの作成HTMLのように、多彩な機能を備えていないことがあります。

ブログの機能に
足らない機能は「カスタマイズ」して使う。
自分の使いやすい形にする。

に変更する(カスタマイズ)ことが、入力作業を早くすることにもなります。


次からは「テーブル機能」を使った、テンプレートの様なページを作ってみましょう。



2008年08月13日

ページのレイアウト(10)

スタイルシートを覗いて見ましょう(2)


スタイルシートに追加するテーブル用構文

テーブル名は、仮に 「.owntable」としておきます。
注).owntable のピリオド(ドット)を入力忘れしないように。
 
.owntable table {
font-size:12px; ←文字の大きさ
line-height:1.3em; ←セルの上下幅(文字の大きさの1.3倍)
}

.owntable th { ←項目セル
font-weight: normal;   ← 書体の設定
text-align:center;    ←文字(文章)の位置
background-color:#cbffff; ← セルの背景色
padding:0 5px;
}

.owntable td { ←データセル
font-weight: normal;
text-align:center;
padding:0 5px;
}



テーブル全体の指定
「.owntable table」

項目セルの指定
「.owntable th」

データセルの指定
「.owntable td」

と各セル毎に設定しています。

項目セルには、
  使用する文字書体、大きさ、文字の位置、セルの背景色などを指定しています。

データセルも同様に指定していますが、背景色や文字の色のように、とくに必要でないものは、削除しても構いません。

 スタイルシートに組み込んだ設定は、テーブル作成の基本形になります。 そのテーブルのスタイルを読み込むのが

<div class="owntable">です。

この指定は「owntable」というクラスを指定した時のみ有効になりますので、

   毎回、変わった形(罫の太さ、文字の大きさなど)のテーブルを作るブログでしたら、スタイルを読み込む必要はありません。
 線(罫)の太さなどの形の異なるテーブルを作成する時には、HTMLの既存のテーブルタグで、直接に入力して「owntable」を使用しないで作成します。

 同じようなテーブルを繰り返し、繰り返し使用する時には、力を発揮しますので、ブログの表示を考えて設定しましょう。

スタイルシートに挿入する場所は、


実際のスタイルシートに挿入する位置

.posted{
font-size: 10px;
text-align: right;
padding:5px 3px 5px 5px;
background-color:#D7D7D7;
}
★ ←--------------------------- ★印の位置にペースト
#links-left {
font-weight:normal;
width:196px;
float:left;
margin: 20px 0px 0px 0px;
text-align:left;
}

の、Bodyの設定位置に近いほうがいいでしょう。

挿入後「スタイルシートの変更」をクリックして、組み込みは完了です。


ページのレイアウト(9)

スタイルシートを覗いて見ましょう(1)

スタイルシート(CSS)は「ブログ」を作る段階で、ブログの画像(テンプレート)を選択しましたね。

そのテンプレートに組み込まれている、ブログスタイルの基本的なデータのことです。

 コンピュータのOS(オペレーティング・システム)と似た仕組みだと思ってかまいません。

 コンピュータOSの数字の計算結果が
 1+1=3  2+2=5 
 のように組み込まれていたら、私たちが学んできた数学で計算する答えと、コンピュータで計算して出した答えは、全く異なった答えになり、「1+1=2」にはならないと言うことです。

 OSはソフト開発言語(C言語やVBなど)で重要なシステムや機能を書き込んでいます。

 上記の計算式も言語も基本システムとして書き込まれています。

 私たちがHTMLを理解できなくても、WEB上にブログが表示できるのは、HTMLをコンピュータのOSが理解できる言語だからなのです。

 OSの基本的なシステムと多彩な機能があればこそ、数多くのソフトを動かすことが出来るのです。

 私たちはOSのシステムを書き換えることはできませんが、システムエンジニアの方々は、その言語の構造や理論などを学んでいますので、書き換え作業が出来ます。
 
 スタイルシートも同じです。

 スタイルシートの仕組みとその構造、文法が分かれば書き換えることが出来ます。

 そのため、ブログデザインの変更やブログで表示される文字の大きさ、文字色などを自分なりに変更して、ブログに反映させることができます。

 スタイルシートとそれを実行するHTMLの相対関係は、

 ●スタイルシートでは、ブログ全体の基本的なことを決める。
   ブログ全体の左右幅、
   右サイドバーの左右サイズ、
   ブログタイトル文字の大きさ、その文字の色
   本文(記事)の文字の種類、大きさ、使用する色…
   など、など。

 ●ブログ記事でHTMLタグの入力があれば、スタイルシートで決めたことに沿っHTMLが処理する。

 と役割が分かれています。

 スタイルシートが管理している「このブログの基本的な構造」を書き換えることによって「ブログのイメージ」を変更できる。
 
 ということですね。

 では、スタイルシート(CSS)を覗いて見ましょう。

 @メニューから「デザイン」を選択します。
 A「デザイン一覧」の画面に移行します。
 B最下段までスクロール。

 現在、使用している「テンプレート名」が表示されていますね。

 テンプレート名をクリックすると、スタイルシートを表示したページに入ります。そのボックス内に書かれているのが「このブログ(このテンプレート)」のスタイルです。

【一部抜粋】
body {
font-family:Verdana;
background-image:url(Http://blog.seesaa.jp/img/bg/snow/bg.jpg);
margin:0px;
padding:0px;
text-align:center;
}


それは、
ブログボディー( body{ ) 
  文字 = Verdanaの書体を使用。
  背景画像(background-image)はリンクで繋いでいるシーサーブログの「img」画像を使用。
  枠内には空き作らない。(margin:0px; padding:0px;)
  文章は中央に配置。  (text-align:center;)
ボディーの締め( })
と解釈します。

シートでは
    body { … }
    title{ … }
    text{ … }
    など細かく設定しています。
     ※{ }(中カッコ内が一つの設定です。)

そのスタイルシートに 例えばテーブルの
 
 罫線の太さ、
 色、
 書体の種類、
 文字の大きさ


などのタグを、新しく追加したら、ブログは最初にスタイルシートを読み込んで、その処理をHTMLに引き継ぎますので、ブログ記事では、スタイルシートに設定した罫線の太さ、文字の大きさなどでテーブルが作成されます。

 前回のテーブル作成では、テーブル内の説明文の文字が大きかったですね。
 ブログ本文では「12px」の文字が使われているのに、テーブル内の文字は12pxより大きい文字が表示されています。

 テーブルの細かい設定がそれほど必要ないから、スタイルとして置いてないと言うことです。

 新しくテーブル用HTMLタグを作って、そのタグのスタイルシートへの追加の仕方や、追加したスタイルでテーブルを作ってみましょう。



 

2008年08月12日

ページのレイアウト(8)


画像を配置したテーブル作成


U「罫線無し」
画  像 商品説明
see0504a.jpg 沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。


画像を配置したテーブル作成

U「罫線無し」
のHTMLは下記のようになっています。
<table>
<tr>
<th>画  像</th>
<th>商品説明</th>
</tr>

<tr>
<td width="110"
<img src="Http://tosiji-dreamafi.up.seesaa.net/image/see0504a.jpg" alt="see0504a.jpg" width="100" height="62" border="0"/
</td>
<td> 沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。
</td>
</tr>

</table>

 注)  テーブル左右サイズの設定を画像部分を(width="110")に、その枠内に貼りこむ画像も(width="100" height="62")と小さく変更してあります。
説明部分は設定無しのフリーサイズです。


サンプルテーブルを見て見ますと。
●項目の「画像」や「商品説明」のテーブルは必要ない。
●画像の上端位置と文章の一列目が揃っていない。
●文章の文字が大きい。

と思っている方も多いでしょう。
項目名が必要でなければ、HTMLの赤色の(<tr><th>〜</th></tr>)HTMLを削除してもかまいません。
<th>や<td>
は、項目名の設定と、データの入力となっていますが、基本的にはどれか欠けていても、問題はありません。

 さらに文字の大きさは、このテーブル作成HTMLの中では変更できません。
 文字の大きさを指定するときや変更するにはスタイルシート(CSS)の書き換えが必要です。

 利爺もスタイルシートを変更して、使いやすいようにしてあります。
 ブログを作り上げるのに「いろいろな機能があれば」と思っているのは、利爺やあなただけではないでしょう。多くの利用者が思っていることでしょう。

 しかし、ブログはホームページとは違いますね。

 カスタマイズが必要でしたら、調べて修正を加えて、使いやすいスタイルシートにすることや、HTMLタグを追加することです。
 シーサーブログでも「自己責任」のもとで、スタイルシートやHTMLの書き換えは認めています。


ページのレイアウト(7)

表示画像BをHTMLで組み立てましょう。

「画像横にテーブル機能を使用して文章を回りこます」です。

【画像1】
see0504a.jpg
沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。

の画像を使います。


画像を配置したテーブル作成

T「左に画像1点、右に1文章、罫線有り」
画  像 商品説明
see0504a.jpg 沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。

U「罫線無し」
画  像 商品説明
see0504a.jpg 沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。


テーブル作成の表示サンプルでした。
TとUの違いは、罫線が有るか、罫線が無いかですね。

Uの罫線無しの方法ですと、今まで見てきた画像横に文章を回すと同じ表示になっています。

 テーブルの利点は、入力位置の「タブ」(タグではありません)を気にすることなく、長い文章や短い文章でも、文章や画像の開始位置が揃うことです。
 指定枠から飛び出すことはありません。

 煩わしい点は、入力用の長いHTMLを、毎回作り上げなければならないことだと思います。
 一つの入力パターンで繰り返し、数多くの商品を紹介するときには煩わしい作業になりますね。

 そこで「入力パターン」を決めたら、そのHTMLをコピーして、メモにしておきましょう。
 ファイル名は「商品紹介テーブル・定型1」にでもしておくと、
次回からのテーブルを作成するときは、そのHTMLをコピー&ペーストをして、決まった位置に画像や文章を入力するだけで完成します。
 異なるパターンのテーブルであれば、「定型2」のようにファイル保存をして、自分なりに利便性を考えましょう。

 ホームページ作成のソフトには、「ホームページ・ビルダー」のようなHTMLが分からなくても、指示位置に画像や文章をコピー&ペーストして流し込めば、思い通りのデザイン・レイアウトが作成できますが、ブログでは、まだまだその類のソフトがありません。

 ●ソフトが無いから
 ●面倒だから
 ●時間もかかるから

 では自分で発信するブログを「人気のあるブログ」には仕上げられません。
いろいろと工夫をし、使い勝手のよい方法を考え出して下さい。

きっと巧くいきます。


2008年08月11日

ページのレイアウト(6)

 画像の横に文章を回りこます方法には、


 @画像横に文章を回りこますタグを埋め込む。
 A段落文章の横幅指定と位置指定で文章を回り込ます。
 Bテーブル作成タグで作り上げる。

 @AのHTMLは確認しましたね。

 今回は「Bテーブル作成タグで作り上げる」のHTMLを使っての表示方法です。

表示のサンプルを見てみましょう。

  アフィリエイト商品の貼り込み(2) ← クリック

下の画像は、そのページにある
ブログページのレアウトの表示サンプルBとCです。

【ブログ表示サンプルB】 samp03.jpg
  ↑画像をクリック(拡大します)

【ブログ表示サンプルC】 samp04.jpg
  ↑画像をクリック(拡大します)

 両サンプルとも見た目(表示)は変わっている画像ですね。

しかし、サンプルBに罫線があればCと同じ「テーブル(表)」の形をしています。
テーブルを囲んだ罫線を「表示する」「しない」だけの違いですね。 

テーブル(表)を作るHTMLは

<table></table> テーブル(表) 表全体を指定する。
<tr>   </tr> 表の「行」を指定する。
<th>   </th> 表の「項目名」を指定する。
<td>   </td> 表の「データ」を指定する。

の4つのタグを使います。

 テーブル(表)には、各項目やデータがマス目に分けて表示されます。
 マス目をセルといいます。
 計算ソフトのエクセルのように、そのセルの中に項目名やデータを入力して表示します。


サンプルテーブル(表)の作成

項目名@ 項目名A
データ@ データA

 サンプルテーブルは下記のHTMLで作っています。
項目の行を2セル、データの行に2セルのテーブルです。

<table>← 表の定義
<tr>← 行の定義(1行目)
<th>項目名@</th>
<th>項目名A</th>

</tr>← 行の締め(1行目)

<tr>← 行の定義(2行目)
<td>データ@</td>
<td>データA</td>

</tr> ← 行の締め(2行目)
</table>← 表の締め

 各セルの左右サイズは、最大入力文字数分のサイズで自動的に作られますが、この例では見栄えのいいように、
<th width="110"align="center">のタグを追加して、セルの長さ(width="110")や文字の位置(align="center")を設定してあります。

 ブログで「テーブル」を作るときに注意すべきことがあります。  

  ブログで「テーブル」を作成するときの注意点
 @「テーブル」を作るときにはシーサーブログでは、「この記事の詳細設定」の「改行HTMLタグの変換」の項目の「改行を<br/>タグに変換しない」を選択する必要があります。

 A出来るなら、ブログのCSS(スタイルシート)に、独自のテーブルタグを埋め込んだほうが、見栄えのいい、テーブルが作成できます。(後述)

などです。

 特に@は「テーブル」作成HTMLだけの改行ではなく、このブログ(このテーブルを作成した投稿記事)に入力する全ての文章や画像にも、また空白行を作るときにも、<br/>(改行)タグを自分で入力する煩わしさはあります。
 しかしブログでホームページなみのレイアウトやページの使い易さを考えたとき、テーブルを作成して表示するほうがレイアウトが巧くいくときが多いです。
 あなたのブログ作成に幅を持たす意味からも「覚えていても損はない」ことですので、いろいろな形で応用できるようにしましょう。

   参照
        スタイルシートの編集方法  

ページのレイアウト(5)

ブログ表示サンプルを見てみましょう。
  アフィリエイト商品の貼り込み(2) ← クリック

 そのページのブログ表示サンプルBを見てみましょう。
【ブログ表示サンプルB】
samp03.jpg
  ↑画像をクリック(拡大します)
 前回の「画像横に文章を回りこます」の応用です。
 
 その繰り返しをして、ページを作っています。1ページに商品紹介が3個なら、繰り返しを3回という感じです。

 このレイアウトのページの作り方には、その他に

 @画像横に文章を回りこますタグを埋め込む(練習した方法)。
 A段落文章の横幅指定と位置指定で文章を回り込ます。
 Bテーブル作成タグで作り上げる。

などのHTMLで作れます。

Aの段落文書の横幅を指定して、

段落指定のHTML
<div style="width:50%">
沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。
</div>

<div style="width:50%">の特性を利用した方法です。

表示すると表示例@のようになります。
表示例@
沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。

段落文書の横幅を指定すると、一行の長い文章であっても、ページの指定した範囲内(ここでは50%)で折り返して表示されます。
この50%は、ブログの記事表示部分の左右の長さの「50%」(半分)を指定しています。


次の段落を右側に表示するHTML
<div style="float:left;width:45%;margin-right:10px;">
  
【左の段落】
沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。
</div>

<div>
【右の段落】
沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。
</div>

  ※margin-right:10px=左と右の段落の間を10px空けています。

実際の表示では「表示例A」のようになります。

表示例A

【左の段落】
沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。

【右の段落】
沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。



この左段落の部分に、画像を貼り込めば、
ブログ表示サンプルBのページレイアウトになりますね。

表示例Bは「左の段落」を画像にしたサンプルです。

表示例B

【左の段落】
see0504a.jpg

【右の段落】
沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。



 文章の段組のHTMLを応用することによって、見た目の異なるレイアウトが自由に出来ます。
 HTMLを全て覚えるのは難しいことですが、自分の使えるだけの範囲は覚えていた方が、ブログ作成には役に立ちます。


 

ページのレイアウト(4)


 @align="left"
 Aalign="left" hspace="12"  
 Balign="left" style="margin-right:12px"

 は、全て「Left」のタグになっていますね。

 ブログのレイアウトによっては、画像を「右」文章を「左」という形もありますね。

 Bの align="left" style="margin-right:12px"
を修正して、画像を右揃えの位置に貼りこんで見ましょう。

 今まで使用した画像と文章の回り込みタグを
 align="left" style="margin-right:12px"  →→
 align="right" style="margin-left:○px"に変更します。

【画像1】
see0504a.jpg沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。





 rightタグですので、解除は<br clear"right">ですね。

このように少しのHTMLを知っていると、ブログの作り方に幅がでて、ブログ作りも楽しくなります。

次回は 今までのHTMLを応用して見ましょう。



2008年08月10日

ページのレイアウト(3)

 Bのタグ「align="left" style="margin-right:24px" 」を○○の箇所に埋め込んで見ましょう。

  width="200" height="124" border="0"align="left" style="margin-right:24px"

 比較し易いように、空白を 2文字分の「24px」にします。 
 表示は(画像1)
【画像1】
see0504a.jpg沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。




 文章が画像の右側に2文字分(24px)のスペースを空けて、回りこんでいます。画像も左揃えの位置から表示されています。

align="left" style="margin-right:20px"は、
使い易い「タグ」ですので、使い方を覚えて、自分のブログに活用しましょう。

 C<Pre>〜</Pre>タグは、使い方の難しいタグです。

 自動的に、改行する命令も入っていますし、「入り子」の正確な場所も理解する必要があります。

 文章の回りこみタグは、@〜Bのタグで十分ですので、取りあえずは3点だけ覚えて活用した方がいいでしょう。

 回り込みタグは、文章だけではなく「画像」の組み合わせにも使用できます。

【画像2】画像の横並び (例:画像の間にスペースを開ける)
align="left" style="margin-right:○px"を使用。
see0504a.jpgsee0504a.jpg





【画像3】画像の横並び (例:スペースを開けない)
align="left"を使用 
see0504a.jpgsee0504a.jpg


いろいろと文章の回りこみタグを使用して、画像に回り込ます文章と、回り込みを解除して、画像下から入力する文章が、入り乱れることがあると思います。

 回り込みタグは
 @align="left"
 Aalign="left" hspace="12"  
 Balign="left" style="margin-right:○px"

 <br clear"left">
 の命令を解除するタグで元に戻す。

【例@】

<img src="Http://tosiji-dreamafi.up.seesaa.net/image/see0504a.jpg" alt="see0504a.jpg" width="200" height="124" border="0" align="left" style="margin-right:20px"/>沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。
<br clear"left"> ←回り込ます文章の最後に埋め込み。
★次の文章は、画像下から始まります。



2008年08月08日

ページのレイアウト(2)

(画像1)のレイアウトを確認しましょう。

 アフィリエイト商品レイアウトページ内で「商品画像」を左側に配置して、商品案内の文章は右側に追い込んでいます。

 この機能はHTMLに「文章を回り込ませるタグ」を追加する必要があります。
【画像1】
samp02.jpg

 一般に入力ボックスで【画像のHTML】を配置して、次の文章を入力する形は、(例@)のように

【例@】

<Img src="Http://tosiji-dreamafi.up.seesaa.net/image/see0504a.jpg" alt="see0504a.jpg" width="200" height="124" border="0" />
沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。


入力する形式ですね。表示させると(画像2)のようになります。

【画像2】
see0504a.jpg
沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。


 画像の下に、文章が表記されていますね。
 
 そのレイアウトが一般的ですが、画像の右スペースが大きく取られ、ページが引き締まって見えません。
 画像を大きく表示する方法もありますが、いい方法ではないです。

 文章を画像の右側に回りこませるには、

 @align="left"
 Aalign="left" hspace="12"  
 Balign="left" style="margin-right:12px"
 C<Pre>〜</Pre>

 などのタグを

 例Aの○○(赤丸印)の箇所にタグを埋め込みます。

【例A】

<Img src="Http://tosiji-dreamafi.up.seesaa.net/image/see0504a.jpg" alt="see0504a.jpg" width="200" height="124" border="0" ○○/>沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。


 @のタグ「align="left"」を○○の箇所に埋め込んで見ましょう。

  width="200" height="124" border="0"align="left"/>
の位置です。表示すると、

【画像3】
see0504a.jpg沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。




 文章が画像の右側に回りこんでいます。

 少し気になる点は、画像と文章の間に空白がなく、画像のラインと文字が隙間無く接しているために窮屈に見えます。

 では、画像と文章の間に「空白」をあけて見ましょう。
 タグのA「align="left" hspace="12"」を埋め込んで見ます。

 「hspace="12"」の「12」は、このブログの文字の大きさは「12px」を使用していますので、1文字分の空白をあらわします。

【画像4】
see0504a.jpg沖縄のリゾートホテルの風景です。
長い廊下の右側には壁はなく、夏の涼しい風が吹き抜けるような作りになっています。




「hspace="○"」の○の数字(px数)変えることによって、スペースが広がったり、狭まったりします。

「hspace="○"」は○の指定分の空白を作りますが、「hspace」のタグは画像の「左右」両方に○だけの空白を空けるHTMLですので、【画像4】では、画像左側に「12px」の空白、画像右にも「12px」分の空白を空けます。
 ○の数字を入れ替えて確認してみましょう。


 

2008年08月06日

ページのレイアウト(1)

テストブログ4ページに貼り込んだのが、画像1です。

【画像1】
syouhin-test01a.jpg
↑画像をクリック(拡大します)

ブログ初期設定どおり、記事や画像は、全て左揃えです。

【ブログ記事のタイトル】
 テストブログのために、仮に「日本軍予科練NAVY限定超レアアイテムウォッチ」として入力していますが、

 利爺らの年齢になると、予科練などの言葉を聞くと映画や小説で読んだ「海軍予科練習生」のことだと分かりますが、20〜30代の方々には、
「何だろうか?」と分からない方も多いでしょう。

 この文章から掲載企業の広告担当者は「若い人にはカッコよさを、年を重ねた年齢には「憧れ」や「哀愁」を感じさせる」広告コピーを
若い人たちと、ある程度の年を重ねた年代の層をターゲットにした商品の販売用コピーを作った」のだと感じます。

 「日本軍」はいまや存在しませんが、イメージとしてはつかめます。
 NAVYは勿論英語ですが「トップガン」などの映画の「海軍の航空隊」のイメージから、カッコよさを想像させます。

 超レアアイテムは、「持っているだけで、羨望の眼差しを受けます」の意味が込められているでしょう。
 
【サブキャッチコピー】に使用した、セイコー社は時計の世界的なメーカー。皆さんも良く知っている、PC用や印刷業界で活躍するプリンターの専門社「セイコーエプソン」です。

「セイコー社の協力を得て…」は、世界の精密な時計メーカーのトップレベルの技術と製品の信頼性を表現しています。

 「マニア垂涎(すいぜん)・限定」の言葉には、「この商品を欲しがるマニアの方が多いですから、早く手に入れましょう」の表現。

 短いキャッチコピーには、練り込まれた文章が含まれていますね。

 「限定モデルですので、直ぐに売り切れますから、今買わないと、もう手に入りません。早く申し込んでください」とは表記していませんが、購買欲を引き付ける別の短い「言葉」で、表現していますね。

 それらの例をよく検討して、今後のアフィリエイトブログに活用しましょう。

 この左揃えのブログパターンが、

  「アフィリエイト商品の貼り込み(2)」

 のブログ表示サンプル@ですね。

 商品アフィリエイトブログには、このブログ形式以外では集客できないと言うことはないですから、今日、今からでも「商品の仕入れ」をして、ブログ開設はできます。

 ブログを開設するには、検索エンジンへのブログ登録SEO(検索エンジン最適化)対策を考えたキーワードなど、重要な事項があります。
 
 サンプルブログのレイアウト進めつつ、確認していきましょう。
   
   ※参照
   ブログの作り方 = 【ブログ編】
   




2008年08月05日

アフィリエイト商品の貼り込み(5)

【商品説明・詳細】
 商品案内・詳細はどのような商品なのか、明確にビジターに伝える文章で仕上げます。

 サンプルでは【掲載企業からのコメント】をそのまま引用していますが
販売店(掲載企業)サイトには、商品を詳しく説明したページがあります。その文章を要約して、適宜なコメントで組み合した記事にまとめましょう。
 (注:掲載企業からのコメントは商品詳細を要約していることが多く、
    商品の情報として利用することをお奨めします。)

【ショップバナー】
 ショップバナーはウェブページ上に、画像やテキストを貼り付けるタイプのインターネット広告で、主に画像タイプのものをバナー広告と呼ぶことが多く、テキストのみのバナーはテキストバナー広告と呼ばれている。

 バナー広告は幅広い層の人たちに広告を見てもらえるという特長があります。

 ショップバナー(バナー広告)を貼り込む、込まないにも両論が有ります。

 商品アフィリエイトの記事は、おもに単品を紹介しています。その商品の紹介がメインと言う考え方と、折角のビジターを紹介できなかったもっと多くの商品が紹介されている総合サイトへ導くべきだと言う考えがあります。

 また、画像を基にしたバナー広告はクリック率が低く、テキストバナーはクリック率が高いとよく言われています。

 ビジターは画像バナーよりは(飽きている、慣れすぎている…)
文章(文字)で書いたテキストバナーに目が向き、「文字で読み、納得してクリックする」の意思が働いている。…という考え方です。 



商品(物販)アフィリエイトをするには、

 「検索エンジンにサイトがピックアップされる仕組み」
 「ビジターとして訪れ」
 「納得して商品を購入するボタンをクリックする」
 
 その仕組みと過程を理解して、より効果のある方法を常に考える必要があります。

さらにブログ(サイト)の形式には、

  ○商品の案内だけで仕上げるブログ。
  ○商品の感想を組み込んだブログ。
  ○日常の日記に商品を組み込んだブログ。
  
 …などと、立ち上げた形式によって組み合わせや記事内容、商品案内の仕方が異なります。

 どのようなブログ(サイト)にするかは、ブログを作るスタート時には形作りをしっかり考えていて、その方向性を持っているべきですね。

○商品の案内だけ仕上げるブログ
 ブログの形は、パンフレットやリーフレットのようになります。

 ある程度の商品詳細をまとめて、販売店のサイト(掲載企業の商品ページ)に案内する。
 販売店サイトにはより詳しい商品詳細ページが用意されています。


○商品の感想を組み込んだブログ
 一番難しい商品ブログの形式ですが、人気の出るブログです。

 一度訪れたビジターの記憶に残り、ファンを獲得できるサイトになりますが、記事を書き上げるにはある程度の商品の知識や経験が必要でしょう。

 TVで放映されているIKKOさんの「おネェMANS」や、やらせ問題で中止になった「あるある大事典」のように、具体的な商品の効用や特質などを紹介しつつ、事例を数多く取り上げる内容。

 「したぢ化粧品をいかに使うか…」「瞼のラインを…すれば、二重に見える」などの具体的な使用方法とその実例、さらに感想や結果などで構成されています。 
 
 いま、美容のカリスマ、イッコーさんが番組で紹介したメイクアイテムや韓国コスメは爆発的に売れてます。

 TVでは「画像での商品案内」ですが、ブログでは「文章での案内」になりますね。

○日常の日記に商品を組み込んだブログ

 ほぼ感想記事のようになります。
 大きな違いは、記事内容はあなたの日常だと言うことです。

 その日常の記事をまとめつつ、興味を引かせ、商品の紹介をする。
 一般では、その手を使った商品講習会もありますね。

 記事の特徴として「起・承・転・結」文のパターンがよく目に付きます。
 日記記事と商品紹介記事の比率の取り方にも反応の差が出てきます。


 次回はサンプルを基に、テストブログのデザイン・レイアウトを組み立てて行きましょう。


2008年08月04日

アフィリエイト商品の貼り込み(4)

要素どおりに並べ替えたのが画像1と画像2です。

テストブログでの作業は
@新しいページを作る
Aメモに保存している3ページのコピーを貼り付ける。
B商品ブログの要素どおり、並べ替える。
C必要な見出しや文章を追加・追記する。

ですね。
テストブログを仕上げる前に、商品紹介ブログの各要素の考え方をまとめてみましょう。

syouhin-test01a.jpg【画像1】
テストブログ
4ページ(上部)

←クリック
(拡大)


syouhin-test02a.jpg【画像2】
テストブログ
4ページ(下部)

←クリック
(拡大)



ブログ要素としては、

【ブログ記事タイトル】
 ブログ名と同じように、ブログの中で一番重要な要素ですね。
記事タイトルは、何を書いている記事か、ビジター(訪問者)がひと目で分かるようにまとめます。

 商品名だけではなく、特徴や効用などを要約して、適宜なインパクトのある記事のタイトルにしましょう。

 タイトルは
 ●タイトル(サイトタイトル・記事タイトル)を見てどんなサイトでどん
  な記事なのか分かるようにする
 ●インパクトのある「記事タイトル」にする
 ●キーワードをタイトルに組み込む 
 ●キーワードはなるべく最初にもってくる
 ●タイトルに記号類(●★など)を入れない方がいい

 ブログ(サイト)のタイトルが重要なように、記事のタイトルも重要です。

【サブキャッチコピー】
 記事タイトルでは表現出来なかった、商品の販売用コピー文です。
新聞広告や雑誌広告、皆さんがおなじみの電車の中吊り広告のように、注意を引き付けるべきコピー文で要約した箇条書きでもいいでしょう。

【商品名】 
商品を探しているビジター(ユーザー)は検索エンジン(Yahoo・Googleなど)では、

@「商品名で検索する人」
A「商品の効用や成分などで検索する人」

など、いろいろなタイプに分かれます。
 
商品名で探す人は
「一度使ったことがある」
「その商品を知っている」 
「友人から聞いた」
「雑誌で読んだ」


などと検索する目的がはっきりしています。

 目的がはっきりしているということは、購入する率が高いと言えますね。

 数多くのブログ中から、あなたのブログを開かせるということは、Netでの商品販売、つまりアフィリエイトをする上で非常に重要です。

 大切な「お客さん」を自分のブログに呼び込む、そのひとつに【商品名】は重要な項目であり、欠かせない要素ですね。

 効用・効果・情報などで探す人は
 商品は欲しいけど「商品名」は知らない
 欲しいものの条件は「これ」
 自分に合う商品があるかどうか
 気に入ったら「購入」してもいい
 …

などです。ネット利用者の大半以上が上記の要件などで探す人でしょう。
そのためには、キーワードの選定や商品情報などが重要になります。
 
【商品価格などの内訳】
 商品価格や発送時期などの詳細は、表示する、しないの両論があります。
あなたが商品を検索して、どのような表示があればいいか考えて、内訳は表示しましょう。

 利爺は、必ず「価格」は表示するようにしています。

【商品画像】
 商品を買うとき、専門販売店まで行き、実際の商品を手にとって確認して買ったほうが一番安心出来ますね。

 お金を払って買うのだから、自分が納得した商品が欲しいと思うのは、あたりまえのことです。

 Netで商品を手に入れることは、Net通販を信頼しているからこそ出来ることなのです。

 ビジターの求める商品のイメージを補完するのが、商品画像です。

 文章での商品案内だけではなく、商品の画像を表示することでビジターの信頼性をより高めることができます。それが商品画像の役割です。


2008年08月03日

アフィリエイト商品の貼り込み(3)

レイアウトを確認するテストブログにページを作りましょう。

新規記事は、「記事投稿」→「記事を書く」から、新しく「4ページ目」を作ります。
 記事タイトルは「アフィリ商品の貼り込みテスト(2)」にしておきます。

 今後は比較する意味あいからも、前回のページは保存して残し、新しいページを作って商品の貼り込み位置をいろいろ変えたり、HTMLを使ってレイアウトを考えてみましょう。

 テストブログの3ページ目(商品画像を貼ったページ)を、記事入力欄から全てコピーします。
  注)記事文章のコピーは該当ページの記事入力欄から行います。


※全コピーの方法
 ●ショートカット使用
 Ctrl Key+A(コントロールキーを押して、英文Aを押す)で
 全文を選択してから「Ctrl Key+C」でコピー。
 ●マウスを使用
 文章の先頭行の頭にカーソルを置き、マウスの左を押しぱなしで
 文末行まで移動して指を放し全文選択。「Ctrl Key+C」
 または「編集メニューの中のコピー」をクリックしてコピー。

 コピーした文はメモ帳に保存しておきます。

【画像1】(テストブログ3ページ)
see0731a.jpg 
  ↑画像をクリック(拡大します)

 (画像1)は3ページ(アフィリ商品の貼り込みテスト(2)の内容です。商品画像をただ貼り込んでいるだけですね。

 入力枠内でコピー&ペーストを繰り返して「ブログ」を仕上げていきましょう。

★商品紹介ブログの要素

 ●記事グタイトル
  (記事タイトルにも商品名を入れます)
 ●商品サブキャッチコピー
 ●商品名
  (記事本文用。ブログタイトルと重複させる。)
 ●商品価格
  (発送を含めてもいい)
 ●商品説明・詳細
  (具体的な商品販売用記事)
 ●商品画像
  (画像リンク。商品の形状がひと目で分かるように)
 ●ショップバナー
  (同類の商品が捜せるように)
 ●その他
 
 メモ帳に保存してある「アフィリ商品の貼り込みテスト(2)」をコピーして新しく作った4ページ目に、ペーストで入力します。

 商品紹介ブログの要素の順番どおり、コピー&ペースト、または切り取り&ペーストで並べ直してみましょう。



2008年08月02日

アフィリエイト商品の貼り込み(2)

前回のアフィリエイト商品の貼り込み(1)では、商品画像(商品リンク)商品明細・ショップバナーの取得と貼り込みの方法をみました。

商品画像などをランダムに貼り込みしましたね。

 「商品アフィリエイト用ブログ」はどの様なイメージで作りたいですか。

 「この形のレイアウトで!」というブログデザインがあれば、その作り方を完全に自分のものにしましょう。

 商品紹介ページをホームページで作り上げる時は、「ホームページ・ビルダー」などのソフトを使って、思い通りのデザインができますが、ブログでは、「ビルダー」のような制作ソフトが無く、思うままにレイアウトをするには不自由さを感じます。ブログにある程度の制約があるのは仕方ないことです。

 ブログページのサンプルを見てみましょう。

【ブログ表示サンプル@】
samp01.jpg
  ↑画像をクリック(拡大します)

 サンプル@はテストブログのページ3と同じですね。全て初期設定どおり、左揃えにしています。
 
 張り込んでいる、商品名や画像には、商品詳細ページに飛ぶ「リンク」が貼られています。

【ブログ表示サンプルA】
samp02.jpg
↑画像をクリック(拡大します)

 サンプルAは商品画像の右に、文字を配置するタグをHTMLに追加して埋め込んであります。
 そのタグを使えるようになると、ページレイアウトに幅が広がります。是非覚えて欲しい「タグ」です。

【ブログ表示サンプルB】
samp03.jpg
  ↑画像をクリック(拡大します)

 サンプルBはサンプルAの応用形で、文字の回りこみを指定するタグとその解除だけでレイアウトしています。
 同じようなレイアウトができるHTMLタグがいくつかあります。

【ブログ表示サンプルC】
samp04.jpg
  ↑画像をクリック(拡大します)

 サンプルCはテーブル作成機能を使用しています。
 作成には少しだけ、CSS(スタイルシート)にテーブル機能を追加して使用しています。
 サンプルBもCと同じようにテーブル作成機能を使用したほうが、デザインの統一性がはかられ入力も楽です。

 ブログを作るのは、人それぞれの好みのブログレイアウトが有ります。ブログに使えるHTMLを、サンプルの@からCまでのレイアウトの確認をしつつ、次回からは見ていきましょう。


2008年08月01日

アフィリエイト商品の貼り込み(1)

商品リンクショップバナーの貼り込みです。

物販アフィリエイトの紹介記事は

@1商品1記事(エントリー)を基本とする。
ASEOの基本を理解して、見出しや記事に必要なログ(キーワード)を挿入する。
Bリンクが間違いなく貼られている。
 
などをチェックしつつ組み立てましょう。
 
 シーサーブログの「アカウント」は既に取得してありますので、新しいブログを作るからの手順になります。


アフィリエイト商品専用のブログを作成する
 
貼りこむ前に、ページレイアウトを考えておきます。
 ★ブログタイトル  
 ★ブログの説明
 ★ブログのタグ
   以上の3点は非常に重要です。
 ○記事のタイトル ○記事のサブタイトル ○記事本文
 ○写真(商品画像)の位置 ○関連商品へのリンク
 
 【参照】
 ブログの作成は「このブログのトップページ上段」ブログ内メニュー
 【ブログの作り方】( ← クリック )の項目・ブログの設定から記事の設定を、再度読み直して確認しましょう。

 商品の選定は自分で「売りたい商品」以前に「売れる商品」を選ぶことが基本です。 

 今回は「商品リンク」などを記事に貼り込む方法ですので、既に「ブログの設定(1)」の段階で作ってある「○○テストブログ」を使って貼り込みのテストをしてみましょう。
 
 ○○テストブログに、新しく3ページ目を作ります。

 記事のタイトルは「アフィリ商品の貼り込みテスト(1)」にでもしておきましょう。

 前回までに取得した【商品リンク(画像)】【商品詳細】【商品案内文(掲載企業からのコメント)】【ショップバナー】を保存してあるメモ帳を開き、コピーをします。


記事入力枠内に

@【商品リンク(画像)】をペーストします。

Aその下に【商品詳細】の「商品名」「商品価格」「発送時期」などを貼り込みます。
 注)「報酬額」は貼り込みません。あなたがショップのアカウントを取得しているので、ショップも報酬額を公開しています。一般のユーザーには決して公開される情報ではありませんね。
※公開しないように細心の注意をはらいましょう。

B次に【商品案内文(掲載企業からのコメント)】を貼り込みます。
 テストでは「掲載企業からのコメント」を商品の案内記事として使用します。

C最後に【ショップバナー】を張り込みましょう。


 以上の貼り込みが終了したら、最下段の「確認する」をクリックして、ブログを確認してみましょう。

【画像1】テストブログの確認
see0731a.jpg


画像の下半分は
この記事の最下
段にあります。




  
  ↑画像をクリック(拡大します)

 商品画像から商品詳細・商品案内文まで、全て貼り込まれていますね。
貼り込み位置はすべて「左揃え」になっています。

 横組の文章の基本は左側から始まりますので、入力枠の基本は「左揃え」です。画像も「位置の指定なし」でしたら、左揃えが基本になります。

  ※入力ツールを使って「左揃え」「中央」「右揃え」を指定すると、
   どのようなレイアウトになるか確認して見て下さい。

 商品を紹介するときに、画像・紹介文・リンク位置などのレイアウトを考えて、レイアウトを組み立てましょう。

 また、ひとつのブログで複数のページを作成して、複数の商品を紹介するときには、レイアウトの基本形を作り、各ページとも基本形に沿ったレイアウトをすることをお奨めします。

 各ページがバラバラなレイアウトだと統一性に欠け、散漫になり訪問した人が落ち着いてブログを読み進めない結果になります。

see0731b.jpg【画像1】の下半分の表示。


←画像をクリック(拡大します)





2008年06月04日

物販アフィリエイト(3)

【ショップバナー】の取得

【画像1】
den0529f.jpg
↑画像をクリック(拡大します)

青丸で囲んである「ショップバナー」をクリックして、使いたいデザインを選びます。

 商品を販売する商品提供元は、電脳卸(STMX)上に、そのショップが販売している数多くの商品を一覧できるページを持っています。

 そのショップ(掲載企業の総合商品案内ページ)に案内するバナーが「ショップバナー」です。

 あなたのブログに張られた単独商品の画像をお客がクリックすると、その商品だけの案内ページに飛びます。

 商品の具体的な説明を読んで、あまり気に入らないとお客は帰ってしまいます。
 商品を提供するショップは、その商品一つだけを販売している訳ではないです。あなたもそこで帰っては欲しくないですね。

 ショップバナーをクリックすると、数多くの商品から、同じような商品を確認したり、別の商品を選んだり出来るようになっています。

 そこで気に入った商品があると「購入」にいたる可能性があります。

 今作りつつあるブログは、まだまだ少しのページしかありませんし、人気商品を数多く品揃えしている訳でもありません。商品を揃えるのには時間もかかります。

 その他の「数多く商品」はショップバナーを貼りこんで、そのショップに導き、お客さんに気に入った商品を選択してもらうことも考えて【ショップバナー】を貼り込んでおきましょう。 
 
 勿論そのショップバナーにも貴方のIDは付加されていますので、売上があれば、あなたに報酬が支払われます。

 記事本文に貼り込むのか、サイドに常駐バナーとして使用するのか、ブログのデザインや使い易さを考えてバナーを選びましょう。

【画像2】
den0529fc.jpg
↑画像をクリック(拡大します)


 ブログに掲載する「商品の画像」とその商品の販売元の「ショップのバナー」が手に入りました。

 はじめは、すごく「手間」がかかり、商品を仕入れるのは難しいと思っているかもしれませんが、何度か仕入れているうちに、要領よく仕入れが出来るようになります。

 商品の検索も「自分が販売したいもの」をメインに検索できるようになります。
 ひとつのASPに慣れてしまうと、他のASPもシステムは同じです。

 慣れてしまえば画像やバナー類の取得も効率よく進みます。

 慣れることが一番の早道です。

  参考にしましょう。
  【電脳卸】商品画像の仕入れ方 ← クリック


 ※次回は、メモ帳に保存してある、リンクのHTMLタグを、ブログに張り込む流れを見ていきましょう。

 さらに、仕入れた商品のブログ記事の書き方をチェックしてみましょう。


2008年06月02日

物販アフィリエイト(2)

 アフィリエイトを始めたころは、どうしても報酬額が気になりますので、検索商品の表示は、
   「順序」  … 報酬額の高いもの順
   「件数」  … そのまま10件   
   「表示形式」… 写真+テキスト

 にしてみましょう。

 右端のボタン「並び替え」をクリックします。
 【前ページ画像3】
 下段の赤丸印のようにサムネイル付きで「商品」が検索されてきました。

 その中の「商品名」をクリックすると
【画像1】具体的に商品を説明した「商品の仕入れ(詳細)枠」が大きく表示されます。
 
【画像1】
den0529e.jpg
↑画像をクリック(拡大します)

この枠内の【商品名】【販売価格】【発送時期】などをコピーして、メモ帳などに貼りこんで保存しておきます。
 
  注)このメモ帳は、商品説明のコピーや商品リンク…などにも使いますので名前を付けて保存しておきましょう。

 商品説明枠を下の方にスクロールします。

 訪問したお客に対して、パンフレットやリーフレットのように、商品の特徴や効用・効果など豊富なデータと豊富な画像を使って、詳しく説明されたページが続きます。

 ショップのページまで来たお客は「この商品が欲しい」「買ってもいい」と思って入ってきた人が大半です。
 ショップ側も商品を販売することが目的ですから、ページの作成には気を使い、商品を説明する方法や広告の仕組み、客の心理をよく理解した人たちが作り上げたページになっています。

 折角訪問してきたお客ですから、商品の特徴や価値を納得させ、読み進めるうちに「買う意識をさらに高める」ように組み立てられた文章の流れです。

 商品の特徴を捉えるために、このページは必ず参考にして下さい。 
 さらに、ブログ作りには非常に参考になりますので、意識的に読む習慣をつけましょう。 


 本来はこの案内ページから、あなた自身の「商品紹介文」を作成しますが、今回は最下段の「掲載企業からのコメント」をコピーして、先ほどと同じ保存ファイルに保存しておきます。

 では「商品の仕入れ(詳細)枠」の下の方、黄色いボタンの「商品画像を仕入れる」をクリックします。

【画像2】
den0529f.jpg
↑画像をクリック(拡大します)

(画像2)のようにリンク一覧(項目)が表示されます。

左から
 【デザインリンク】【ケータイリンク】【商品リンク】
 【デコリエイト】 【ショップバナー】【その他のリンク】
の6つのリンクがあります。
 各リンクには説明文がありますので、読んでいてください。


 今回は【商品リンク】【ショップバナー】のリンクを作成しましょう。

【商品リンク】をクリックします。

【画像3】
den0529fb.jpg
↑画像をクリック(拡大します)

 商品画像とHTMLタグが表示されます。

 商品の画像をブログ内で表示するには、右枠内のHTMLタグが必要です。

 画像には大きいサイズのものから、小さいものまで用意されていますので、ブログのレイアウトに合った商品画像を仕入れることが可能です。
 
 商品のイメージ画像がアフィリエイトリンクになっていますので、あなたブログに訪問したお客さんが画像をクリックしたら、「ショップのページ」にジャンプ(リンク)するようになっています。

 その画像がショップの販売ページにお客を誘導するリンクです。

 さらに、そのHTMLには「あなたのID」が組み込まれています。
ショップは、そのIDによって「あなたのブログから来た」ことを判別します。

 「すべてを選択&コピー」ボタンをクリックすると、枠内のHTMLが白黒反転します。
 コピーしたという意味です。

 コピー後、いちいち、自分のブログに戻って、張りこみ作業することは、時間のロスですので、先ほど作成した保存用「メモ帳」を立ち上げ、一旦ペーストしておいてください。

 テキストリンクが必要でしたら、ページの一番下にリンクが用意されています。


物販アフィリエイト(1)

 電脳卸のIDとパスワードが手に入りましたね。
 IDとパスワードをさっそく使ってみましょう。

        【商品画像や説明、ショップバナー】はSTMX会員の
        「とくぱら通販」さんの資料を使って説明しています。


   電脳卸トップページ
   http://www.d-064.com/
 
 電脳卸のトップページからログイン(左側・販売店ログイン)します。
 ログインIDとパスワードを入力します。

 もうあなたは販売店ですから、商品画像やテキストの仕入れができます。
 さらに、一般のユーザーには公開していない、取引の情報や販売報酬額が確認できます。

 では、商材を仕入れましょう。
「商材を仕入れる」をクリックして(画像1)次のページに行きます。

【画像1】
den0529a.jpg
↑画像をクリック(拡大します)

 商材のジャンルが表示されています。【画像2】

 今回は、商材の仕入れ方の基本的な流れを説明しますので、ページ中央にある「商材検索」ボックスを使用しないで、ジャンル分けのメニューから入ってみます。

【画像2】
den0529b.jpg
↑画像をクリック(拡大します)

 ジャンルは細かく絞り込めるようになっています。
「ファッション・アクセサリ」のジャンルを覗いてみましょう。
 さらに「腕時計」のジャンルをクリック。

【画像3】
den0529d.jpg
↑画像をクリック(拡大します)

 赤○印の上段、黄色のバーの「表示並べ替え」の要素には、
「順序」「件数」「表示形式」の「選択メニュー」の各項目があります。


商品を検索して、自分なりに確認し易い方法で表示させることが「並べ替え」です。
 「順序」要素の選択肢は
  ○新着商品順 ○酬率の高い順 ○報酬額の高い順 
  ○価格の高い順 ○価格の低い順

の5ツになっています。

通常は「新着商品順」の表示です。

「画面表示」の件数。
最高50件まで同一画面に表示できます。
「表示形式」の選択肢は
 「写真+テキスト」と「テキスト」です。

ブログ上で「商品写真」を使用しないで、文章のみで「商品の説明」をしようと考えているのなら、テキストのみでいいです。

商品の案内のためですから「写真」付きがいいでしょう。


 新聞や雑誌の広告では、

 ○販売ターゲットの絞り込み。
 ○メインとなる適切なキャッチコピー。
 ○明確な商品名と具体的な商品説明。
 ○マーク・ロゴの張り込み位置。
 ○使用する文字の大小の強弱。
 ○画像を適切に用いて興味を持たせる。

 が重要な要素となります。

 写真画像を見せ、商品のイメージを与え、練り込まれた文章でもって「購買欲」を引き出すことは、ネットのページも同じような考え方ですね。

 ホームページやブログを作り上げるなら、時間をかけているのですから、それらの要素を組み合わせ、しっかりレイアウトをし、すっきりした文章の流れと読み易いページの方が相手(お客)を引き込みやすいでしょう。

 適当に作ってあるページからは、「商品を案内する」のに情熱や誠意が感じられないのでは、と利爺は思っています。

 きっとユーザーもそう感じるでしょう。

 利爺はその広告作りの観点からページ作りを進めています。



×

この広告は1年以上新しい記事の投稿がないブログに表示されております。