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




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


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

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

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


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

2010年02月25日

テーブル作成とその応用(3)

■ 5-20 テーブルに画像を使ってホームページ仕様にする


ネットを巡回していると、アフィリエイトを展開しているブログをよく見かけます。

とくに物販をしているブログでは
テーブル機能を活用して、画像と商品説明を上手く組み合わすことで、興味を引くレイアウトをしています。

そのようなアフィリエイトブログに共通するのは、
画像やテキストにリンクを張っていることを「明確に伝えている」と言うことです。

行き先(リンク先)をはっきりと示し、数多くの商品を紹介しているページに誘導しています。

不安を感じさせないように、リンクを上手く使い、安心して商品が確認出来るブログを作り上げることは、アフィリエイトの基本でありかつ理想形といえます。

アフィリエイトには、これが100%という断定的な仕組みは無いと思っていますが、
相手(お客)のことを考えたページを作ることが基本中の基本です。


■テーブルに画像を使いリンクを張る

イラストや写真などの画像をうまく使うと、訪問した方にもブログの特性やイメージを伝えやすくなることは、過去記事の中でも確認してきました。

webでは、PDFやワープロソフトのように、画像をページに直接、貼り込むことは出来ませんね。

画像をテーブル内に貼るには
<img>タグで呼び出し、場所を指定して貼りこみます。記事の中に貼りこむのと同じ方法ですね。

テーブルに画像を貼り込む方法を確認しますが、
物販アフィリエイトでのテーブルの仕組みや、画像の利用方法を例として見て行きましょう。

テーブルに画像を使用するときの注意点。

@画像を配置する前にテーブルの左右サイズを決める。

 ●記事表示領域の左右サイズから、割り出してテーブルサイズを決め
 ます。

A画像の大きさをテーブルの左右サイズに合うように調整する。

 ●テーブルのサイズを指定しても、画像のサイズの方が大きいと、
  自動的に画像の大きさにテーブルのサイズが広がります。
 
 ●テーブルのサイズが重要ですので、画像もそれに準じます。

 ●使用する元の画像は大きくアップロード、表示画像は小さくする。
  (画像を使用するときの基本ですね)

B<table>の該当要素内に画像読み込みのURLを記入する。



@からBの注意点を必ずチェックしましょう。

サンプルテーブルの作成

サンプルテーブルを作るために、商品名・画像・説明記事を用意します。

サンプルテーブル用データ

●商品名
●商品画像
●商品説明




⇒ 沖縄特産油味噌
⇒ テスト用画像(miso-01.jpg)
⇒ ■細かく切った豚肉と味噌を砂糖で味を調整
   した甘辛風の豚味噌です。
⇒ ■内容量 100g
⇒ ■商品価格 500円

テーブル作成のタグ類はしっかり把握していますね。



作成するテーブルは、
@商品名は<th>要素の「行」
A商品画像は<td>要素の「行」
B商品説明も<td>要素の「行」
の「3行」のテーブルですね。

使用するサンプル画像はSeesaaブログに
「miso-01.jpg」
のファイル名でアップロードしています。

テーブル作成のHTMLは
<div class=".samp table">   
<table>
<col width="120">      
<tr>
<th>沖縄特産油味噌</th>
</tr>
<tr>
<td>
(画像:url)
(画像にリンク)
        
</td>
<tr>
<td>       
■細かく切った豚肉と味噌を砂糖で味を調整した甘辛風の豚味噌です。
■商品価格 500円
■内容量  100g
⇒ 商品の詳細を見る(リンクurl)</td>
</tr>
</table>
</div>

⇒ CSSの適用

⇒ テーブル横サイズ

⇒ 項目名(商品名)


⇒ データ要素@
⇒ 商品画像
⇒ 詳細ページリンク
 

⇒ データ要素A
  ●商品の特徴
  ●値段などの概説 


⇒ 商品詳細ページへ


⇒ テーブル閉め
⇒ CSS閉め

以上のようなtableタグ組み合わせですね。

画像の表示は、テーブルのデータ要素@の中で
<img>タグを使用して

<td>
<img src=" 画像のurl " width="●" height="●" />
</td>

で呼び出しますね。

この時、同時に画像に詳細ページにジャンプするリンクを貼ります。
リンクは<target="_blank>タグで別ページで開くようにします。

この形式は、記事に画像を使用する時のタグの記入と変わりませんね。

データ要素Aでは商品の特徴を記入します。
訪問した方が興味を持ち、詳細ページに行くかどうかは
ここの表品説明の良し悪しにかかります。

下記のサンプルが出来上がったテーブルです。

【画像1】
特産油味噌
■細かく切った豚肉と味噌を砂糖で味を調整した甘辛風の豚味噌です。
■商品価格 500円
■内容量  100g
⇒ 商品詳細を見る
← <th>要素(商品名)


← <td>要素@

    商品画像
    詳細記事(ページ)へリンク






← <td>要素A
    商品説明
    
    商品価格
 
    詳細記事(ページ)へリンク


画像は、横幅をテーブル(例 width="120")と同じサイズに縮小して表示しています。

文字の表示位置(align)、テーブル罫線と画像の間の空き(padding)
罫線の太さ(border)テーブルのバック色(bgcolor)などを調整して、納得のいく形にしましょう。

この例では、商品名を表示するために、項目用<th>要素(セル)を使っていますが、<th>要素を使用しなくても、テーブルの表示ではエラーにはなりません。

<table>と<td>要素だけでの作成になりますので、案外スッキリした形になります。

試してみて下さい。


■ 画像にリンクを貼り込む

画像にジャンプ先を指定するリンクを張り込みます。
 
画像をクリックすると、他のページにジャンプするHTML形式は
<a href=" 詳細ページurl "></a>ですね。

<td>
<a href=" 詳細ページurl " target="_blank"><img src=" 画像url " width="●" height="●" /></a>
</td>


画像表示の<img …>タグを
<a href …>詳細ページへのリンクタグ(赤文字)で括ります。

この例では、
リンクの行き先を、元画像の表示にしていますが、

リンク先は、
「商品の詳細」を記述したページ、あるいは「商品販売元」のホームページにします。

商品販売元のホームページでは、
より詳しい商品の説明と商品購入用のフォームが設置されていますので、訪問した方をどの様に、そのページまで導くのかが、アフィリエイトの基本になります。

さらに
画像にリンクを張っただけでは訪問した方は迷いますので、
「画像をクリック・商品の詳しい説明ページが開きます」
のような案内文を記入しておきましょう。

商品説明の箇所にも
  「⇒ 商品詳細ページへ」
のように、テキストを用いたリンクも追加しておきます。

⇒ 購入のページへ
の表示はなるべく避けましょう。


案内に使った矢印記号は、その矢印の説明が無くても、
その向きによって利用者は無意識に使い分けると言われていますね。

 →(進む)  ←(戻る)  ↑(トップへ)

の感覚ですね。

矢印の代わりに、
目を引きつけるアイコンを貼り込むのもいい方法です。

テキストだけの商品紹介では、商品イメージを上手く伝え切れません。

ましてやネットでの商品販売ですので、商品のイメージを明確に伝え、クリック率を上げるためにも画像を上手く使う必要があります。

商品販売会社の広告バナーを張り込んだだけのブログをよく見かけますが、

バナー広告では訪問した方は、その商品の詳細が分かりません。
そのバナーをクリックをしたら

●購入させられるのではないか。
●騙されるのでは…。


などの警戒心や不安感があるのもいがめません。

「商品を購入する」「いつでもキャンセル出来ます」
などの表示もよく見かけますが、インターネットを利用しての購入者側の不安感は取り去れませんね。

購入する以前の問題として、ある程度の
「商品のことを知りたい」「他の商品と比較したい」

と訪問した方が思うのは、当たり前のことですので、最低限の
「商品説明」と「商品価格」の表示は無くてはならないものです。

ブログ記事の「続きを読む」と同じです。
導入の部分に興味が無ければ、記事を読まないですね。

アフィリエイトでも導入で失敗すると、
2度と訪問して来ないと思っていいでしょう。


明瞭に簡潔に表示して、
詳しい商品の説明ページに誘導する工夫が必要です。


■ナビゲーション風のメニューを作る。

ブログでよく見られる
ナビゲーションメニュー形式の商品紹介のページを
作ってみます。

紹介する商品は3点、
メインとする商品はテーブルサイズを大きくして、アピール度を高めています。

【画像2】
特産油味噌幸福の星砂琉球もろみ酢

■沖縄で生まれた健康飲料.
常備・健康飲料として大人気商品です。
■容量 900ml
■価格 1500円〜
(キャンペーン価格)
⇒商品の詳細を見る
■細かく切った豚肉と味噌を砂糖で味を調整した甘辛風の豚味噌です。ご飯の友として最適です。

■容量 500g
■価格 500円

 ⇒詳細を見る
■青や赤のカラーサンドと星砂を入れ、お守りやキーホルダーなどの製品にしています。お子様に喜んでもらえます。
■容量 ●g
■価格 150円

 ⇒詳細を見る

サンプルですので、商品の種類がバラバラです。
物販では、1ブログに1品目の商品をまとめ、
1記事に1商品を案内する形式が多いです。

雑多に種類の異なる商品を紹介することは、
訪問した方が、購入したい商品を絞れないことになります。

出来るだけ、種類を絞って
コンビニやスーパーでの商品陳列と同じように、1ブログ(コーナー)に1品目(棚)の形式を作り上げ各ブログがリンクされている形式を目指しましょう。

その形式が内部リンクと外部リンクの充実と言えます。


■商品の詳細サンプルページ。

リンクで開く商品の詳細ページです。
サンプルですので、イメージとして捉えて下さい。

【資料】
商品詳細のサンプルページ





琉球もろみ酢
ダイエット効果にもよく、健康飲料としても大変人気の有る一品です。
■希望価格 ●円(税込み)
■販売価格 ●円(税込み)
(キャンペーン特別価格・25日まで)
■容量 900ml
■発送 受付後4日以内
 ※発送費は当社が負担します
■在庫 50本

(一本から注文できます)
■商品代金のお支払いは、
⇒ 支払い方法のページを確認下さい。

【もろみ酢のほかの商品を見る】←クリック

■もろみ酢は
沖縄の代表的なお酒である「泡盛」の製造過程でみられる「もろみ」から作られます。

もろみには、豊富なアミノ酸とクエン酸が含まれており、疲労回復、抗酸化作用などさまざまな効果が報告されています。
酸味のほとんどがクエン酸由来であるため、一般的なお酢とは異なり、爽やかで、味はまろやかです。

ダイエット効果によく、健康飲料としても大変人気の有る一品です。


この商品詳細のサンプルページは

「テーブル機能」での作成、
あるいは文章の「段落機能」でも作成できます。

テーブル機能での作成は、
列を2個作成して<th>要素は省略、データ要素のみでの作成になり、罫線は表示しません。
左のセル(列)には画像を、右のセルには文章を配置しています。

テーブルの右スペースには、商品の詳細説明を入力して、
1商品を1頁として組み立てています。

段落機能での作成は、
段落を使って、ページの左半分に「画像」を右には文章を表示するように指示します。

段落を使うとブログの構成にも幅が広がり、多彩なレイアウトも可能になります。
使い方は段落のHTMLの時に確認します。

テーブルの使い方のシリーズを何度も確認して、しっかりと取得して下さい。



▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



この記事へのコメント
利爺さん、こんにちは。
お世話になっております、上田です。

いつも変なところに現れるのを常としておりましたが、
今日は普通の場所に登場してみました。

ただのタグの説明に終わらない、訪問者の方の心の状態にまで配慮されているところが、

とても勉強になりました。

商人としては当たり前のところだと思いますが、
調子にのると忘れてしまうと思うので、
いつも原点を確認していきたいと思います。

ありがとうございました!
感謝の心をこめて、応援していきます♪
Posted by 元うつ病ニートから人生逆転@上田真司 at 2010年02月26日 12:13
こんばんは
いつもわかりやすく丁寧な解説に引き込まれます。画像を表示するときにその案内文など記入する、など参考にさせていただきます。また商品画像、商品説明の手法等はゆっくり参考にしたいと思います。
応援済みです。
Posted by hebaseijin at 2010年03月06日 21:43
初めまして!今後ともによろしくお願いします。
Posted by 翔太 at 2010年04月08日 10:33
突然の訪問失礼致します。
株式会社エムライブのアフィリエイト担当の坂田と申します。

この度、御社のブログを拝見させて頂きまして、ぜひ弊社ライブチャットプログラムともパートナー登録をお願いできないかと思い、コメントさせて頂きました。
突然のお願いに戸惑われているかと存じますが、何卒ご検討下さいますと幸いに存じます。

男性登録一件につき5000円!!!

▼只今キャンペーン中です▼
http://conquest.jp/affiri/index.html

アダルト・ノンアダルト・人妻系の3番組ご用意しておりまして、御社様専用の広告バナー素材などの提供もご遠慮なくお申し付け下さい。

以上、ご検討の程宜しくお願い致します。
Posted by 有限会社Conquest at 2010年04月28日 16:58
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

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