ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1900-01-16草稿「アフィリエイト・プログラムに参加する

アフィリエイトプログラムに参加する

ここで言うアフィリエイト・プログラムとは、あるウェブサイトが広告主と契約して「広告活動」をすることを言います。アフィリエイトの意味は「提携」、プログラムはこの場合「成功目標に向かった活動」のこと。“広告主と個人サイトが提携して広告を成功させましょう”というような広告手法です。

はてなダイアリーでは「アフィリエイトが更新のメイン」という日記は少ないようですが、多くのユーザーが『もしかしてちょっとお小遣いが入ったらいいな』というようなスタンスで、日記を書くついでにアフィリエイトをしているようです。日記によって向き不向きもあると思うのですが、期待しない気持ちで始めてみてはいかがでしょうか。

アフィリエイト・プログラムはいろんな契約形態がありますし、最近はサイトの内容にちなんで商品購入をうながすような工夫が発達してきて、特にブログ(ウェブ日記)と相性が良いという声もあります。

「株式会社はてな」もアフィリエイト広告をしていて、はてなダイアリー - amazon売上レポートで結果が報告されてます(Amazonアソシエイトのみ)。塵も積もれば……で、はてなの貴重な運営資金になっているようです。

はてな利用規約による広告の禁止

いきなりですが、はてなは利用規約で、

(6)禁止事項

6. 宣伝や商用を目的とした宣伝・広告その他の行為を行うこと、勧誘を目的とした行為を行うこと。

というわけで、広告行為が禁止です。そ、そんな!

例外があります。アフィリエイトに関しては現在、

  1. 有料オプション利用時は「はてなアフィリエイト」ができる(後述)
  2. アマゾン」型のアフィリエイトはOK。なので「bk1」も。(後述)
    • 参考ページ:独自のIDを入れたAmazonアソシエイト、あるいはそれに類するアソシエイトプログラムへのリンク掲載は、リンクを辿ったユーザーが有益な情報を得ることができることを根拠とし、原則として許可はてな情報削除ガイドライン
    • 現状で、独自IDを入れたAmazonアソシエイトに類するアソシエイトプログラムはbk1のみであると認識しております。質問箱の回答より

となってます。

はてなは「アマゾン」ばっかり沢山利用する人にはすごく便利だと思いますが、あとはブログサービスの中ではわりと広告に厳しいほうだと思います。もっと自由にやりたい人は、Seesaaとかyaplog!のほうが、アフィリエイトが自由みたいです(2004年11月現在)。もしくは、今後の「はてなアフィリエイト」の発展に期待しましょう。

はてなアフィリエイト

有料オプションを利用している人は、「はてなアフィリエイト」を利用できます。

「はてなアフィリエイト」の内容は「Amazonアソシエイト」と「Google AdSense」です。これに登録していないと意味がありません。

Amazonアソシエイト・プログラム

あなたのサイトの紹介によってAmazon商品が売れると紹介料がもらえるタイプのアフィリエイトです。支払いは銀行振込かAmazonギフト券で行われます。詳しくはamazon.co.jpのAmazonアソシエイト・プログラムを読んでください。

利用方法:Amazonアソシエイト・プログラムに参加登録するとアソシエイトIDが与えられるので、日記の設定画面で自分のアソシエイトIDを設定します。あとは普通に「はまぞう」や「ISBN/ASIN記法」を使うだけ。

仕組み:日記で「はまぞう」や「ISBN/ASIN記法」を使ったとき、リンクされるasinページがあなたのアソシエイトIDつきのアドレスになります。そのページを経由したアマゾン商品ページも、普通ははてなのアソシエイトIDがついたアドレスになるのですが、あなたのアソシエイトIDがつくようになります。そこで商品が売れると、Amazonからあなたに紹介料が支払われるという仕組みです。有料オプション利用期間が終わると、普通のasinページへのリンクに戻ります。

補足:Amazonアソシエイト関連のバナーなどの画像がはてなダイアリー共有フォルダこちらのページにいろいろ載っていて利用できます。

Google AdSense

日記の内容にマッチした広告がGoogle独自のシステムで表示され、その広告を読者がクリックすると広告収入を得ることができるタイプです。支払いはUS ドルの小切手で行われます。詳しくはGoogleのGoogle AdSenseを読んでください。

利用方法:Google AdSenseに申し込み、申し込みが承認されるとアカウントが与えられます。アカウントIDを日記の設定画面で設定し、日記にadsenseモジュールを表示させます(Googleで与えられるソースコードをはてなダイアリーに貼りつけても使えません)。1ページに計3箇所まで掲載可能。有料オプション利用期間が終わると、報酬が入らない状態に戻ります。

仕組み:日記のヘッダやフッタでadsenseモジュールを表示させると、普通はクリックによる広告収入がすべてはてなのものになるのですが、一定の割合(現在は約半分だそうです)であなたに報酬が支払われるようになります。

補足:広告バナーのサイズや色の変更は、adsenseモジュールのタグの中に指定を書き込んで行います。応用編「CSSセレクタ - adsenseモジュール」を参考にしてください。

補足2:日記の設定で「日記本文のすぐ下にAdsenseを表示する」をチェックすると、日記本文の枠の中に広告が入るようになります(このほうが広告収益率が高いとか)。ただ現在この広告の色などを変更・調節する機能はありません。

Amazonアソシエイトとbk1リーダー

現在の規約で、はてなダイアリーの無料版ユーザーでもできるアフィリエイトは、

Amazonアソシエイト・プログラム
Amazonアソシエイト・プログラム
Amazon.co.jpは、本から家電までをとりそろえた世界最大級のオンラインストアAmazon.comの日本サイト。
bk1・ブリーダープログラム
bk1ブリーダープログラム
日本のオンライン書店。自分のIDを経由して本を買う行為もOKで、ポイントバックが適用される。

のふたつです。両方とも同じようなアフィリエイトの形態です。なにかのウェブサイトを持っている人が、アマゾンやbk1で売っている商品を紹介して、その紹介によって商品が売れると、売り上げに応じて紹介料を支払われるというものです(成果報酬型の客引きですな)。

参加するにはAmazonアソシエイト・プログラムbk1ブリーダープログラムで参加登録する必要があります。これは「はてな」とは無関係の契約です。契約の詳細情報は、それぞれのサイトを見てください。

以下では「はまぞう」や「asinページ」ではてなとの連携が強い「Amazonアソシエイト・プログラム」を中心に説明していきます。bk1についてはこちらの補足をご覧ください。

商品画像が使えるメリット

アマゾンタイプのアフィリエイト・プログラムでは、商品紹介の際に普段は著作権などの関係で自由にできない書影やCDジャケットなどの画像を利用できるので、紹介料には興味がない人でも、「サイトで使える画像が増える」メリットがあります。

また、紹介されている商品がすぐ買えたり、詳細な情報にたどりつけるということはサイトの閲覧者にとっても有益な情報となりうるため、はてなダイアリーでも広告とは区別して利用が認められているわけです。

「はてな」はAmazonアソシエイト・プログラムに参加しているので、Amazonアソシエイトに参加していない人でもその形をとっていれば、すべてのはてなダイアリー・はてなグループで、アマゾンサイトからの書影・ジャケット写真などの転載、公開が可能です(その場合、はてなのアフィリエイトということになります)。

全部手書きでAmazonアソシエイト

まずは、はてなの機能抜きでアフィリエイト記事を書く方法です(これでやるかどうかは別として、基本的な仕組みが分かりやすいので)。ここでは「Amazonアソシエイト・プログラム」で説明します。

「オバケのQ太郎」は代表作では珍しい藤子両氏の合作。連載当初は「スタジオ・ゼロ」のメンバー石ノ森章太郎氏が手伝っていたようで、よっちゃん・ゴジラたちは石ノ森氏の絵。で、今になって権利の問題なのか絶版になっていて、買って読めるのがF氏の「劇画オバQ」だけという悲惨な状態。アマゾンでも中古の扱いしかありません。事情も謎なのですが、なんとか権利関係が解消されて書店に並んでほしいものです。(参考:オバケのQ太郎 - Wikipedia

という記事を書いたとしまして(いや、もっと売れそうな記事を書いてください)、これに商品情報をつけ加えていきたいとします。

amazon.co.jpの商品の中の「オバケのQ太郎—傑作選 (1) てんとう虫コミックス」を紹介したかったとします。その商品ページにリンクを張りますが、リンクを作ったり画像リンクにする方法は、活用編「リンクを張る」「画像リンクを作る」などをご覧ください。

アマゾンでは検索結果にリンクするなどリンクの種類もいろいろ利用できますので、それを利用する場合は、メンバーがアクセスできるアソシエイト・セントラルから「リンク作成」してください。

ISBN/ASINを調べる

まずその商品を示す固有の番号であるISBNまたはASINを調べます。

ISBN(International Standard Book Numberの略)は『国際標準図書番号』と呼ばれる国際的な規格で、国籍・出版者(社)・書名といった情報を表示する10ケタの番号です。1つの書籍に1個ずつ固有のISBNが割り振られていきます。

ASIN(Amazon Standard Identification Numberの略)はアマゾンで扱われている、書籍以外の商品を表す10ケタの番号です(Amazon.co.jp ヘルプデスク - ISBN/ASINについて)。

アマゾンで商品を探して詳細ページのアドレスを見たときに、『〜/ASIN/』に続く10文字の英数字がその商品のASINです。書籍のASINはISBNと同一です。これでその商品ISBN/ASINがわかります。

例えばオバケのQ太郎—傑作選 (1) てんとう虫コミックスASINは409140121Xなので

http://www.amazon.co.jp/exec/obidos/ASIN/409140121X/

のようなアドレスでリンクできます。ただし紹介者の情報が入っていないアドレスなので、この状態でリンクしても、だれにも紹介料は支払われません。

アソシエイトIDをつける

Amazonアソシエイト・プログラムで参加手続きをして、サイトが承認されると自分用のアソシエイトID("XXXXXX-22"のような番号)がもらえます。あとはそのアソシエイトIDがついたアドレスの商品ページで商品が売れるように、自分のサイトで商品を紹介します。

例えば「はてな」に紹介料が入るアソシエイトIDは、「hatena-22」です。

アドレスを整える

さて、これでリンク用アドレスがわかりました。アマゾンを閲覧していると商品ページのアドレスはとても長くなりますが、これは閲覧状況の情報が入っているからで、リンクを張るのに必要なアドレスはもっと短いです。

で、ちゃんとアフィリエイト用のアドレスになっています(『exec/obidos/』はさらに『o/』に短縮可)。

『http://www.amazon.co.jp/exec/obidos/』が定型部分、『ASIN/409140121X/』の部分がISBNまたはASINコード(商品番号)、『hatena-22/』の部分がアソシエイトID(あなたのIDをつけます)です。

画像を選ぶ

(このガイドのネタ元は「まんぷく::日記」 - Amazonの商品画像のURLについて(まとめ)です)

アマゾンの商品画像は、大・中・小・さらに小のサイズがあります。どれもない場合、中だけある場合なども多いですが、どうしても大きな画像を使いたい場合などは

という形のアドレスで、ASINを目的の商品のものに変えれば、画像がある場合があります。

リンクする

それではついに、リンク画像リンクをつけた記事にしてみます。

<a href="http://www.amazon.co.jp/exec/obidos/ASIN/409140121X/hatena-22/ref=nosim"><img alt="オバケのQ太郎—傑作選 (1) てんとう虫コミックス" src="http://images-jp.amazon.com/images/P/409140121X.09.MZZZZZZZ.jpg" class="photo"></a>

<a href="http://www.amazon.co.jp/exec/obidos/ASIN/409140121X/hatena-22/ref=nosim">オバケのQ太郎—傑作選 (1) てんとう虫コミックス</a>

「オバケのQ太郎」は代表作では珍しい藤子両氏の合作。連載当初は「スタジオ・ゼロ」のメンバー石ノ森章太郎氏が手伝っていたようで、よっちゃん・ゴジラたちは石ノ森氏の絵。で、今になって権利の問題なのか絶版になっていて、買って読めるのがF氏の「劇画オバQ」だけという悲惨な状態。アマゾンでも中古の扱いしかありません。事情も謎なのですが、なんとか権利関係が解消されて書店に並んでほしいものです。(参考:<a href="http://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%90%E3%82%B1%E3%81%AEQ%E5%A4%AA%E9%83%8E">オバケのQ太郎 - Wikipedia</a>)

のようにすると、(画像のimgタグに『class="photo"』つけると多くのテーマでうまく表示されます)

オバケのQ太郎—傑作選 (1)    てんとう虫コミックス

オバケのQ太郎—傑作選 (1) てんとう虫コミックス

「オバケのQ太郎」は代表作では珍しい藤子両氏の合作。連載当初は「スタジオ・ゼロ」のメンバー石ノ森章太郎氏が手伝っていたようで、よっちゃん・ゴジラたちは石ノ森氏の絵。で、今になって権利の問題なのか絶版になっていて、買って読めるのがF氏の「劇画オバQ」だけという悲惨な状態。アマゾンでも中古の扱いしかありません。事情も謎なのですが、なんとか権利関係が解消されて書店に並んでほしいものです。(参考:オバケのQ太郎 - Wikipedia

のように表示されます。同じような形でISBN/ASINとアソシエイトID、商品画像と商品名を入れ替えれば良いでしょう。

amazletツールでアソシエイトを楽に

amazletツール

「はまぞう」を制作したNaoya Itoさん提供の「amazletツール」は、前記事のような手作業を省略できるブックマークレットツールです。ブックマークレットというのはブラウザのお気に入り機能を利用して、他のことをさせるちょっとしたツールのことです。

amazletツールの「セットアップ」で自分のアソシエイトIDを記入すると、画面が移り『amazlet it!』というリンクが作られます。そのリンクをドラッグ&ドロップなどして、自分のブラウザの「お気に入り(ブックマーク)」に入れておきます。詳しくはamazletサイトをご覧ください。

その『amazlet it!』というお気に入りを選ぶと、「はまぞう」のような画面が立ち上がります。はまぞうと同じように検索していきますが、「セットアップした自分のアソシエイトIDで」リンクを作ることができるようになっています。

またアマゾンの商品ページを閲覧している時に『amazlet it!』すると、すぐにその商品のリンク作成ページが表示される機能があります。(2004年11月25日現在の仕様です)

amazletツールで作成したHTMLの見栄え

amazletツールで「商品情報リンク」を作ると次のようになります。

オバケのQ太郎―傑作選 (1)
藤子 不二雄
小学館 (1976/08)
在庫切れ

生成されたHTMLにいろんなstyle属性がついてくるのですが、はてなダイアリー上では無視されるので、見栄えはスタイルシートで指定できます。

そのままでは画像と文章が縦に並んでしまいます。テーマによって調整が必要かもしれませんが、設定画面のスタイルシート欄に以下の内容を追加すると、それなりに見えやすくなるかもしれません。(←MacOSXで確認しているので自信なし。指摘求む。)(HTML概略

div.amazlet-box {
	margin: 0;
	padding: 0.5em 1em;
}

div.amazlet-info {
	text-indent: 0em ! important;
	line-height: 1.5em;
	word-break: break-all;
}

div.amazlet-image img {
	float: left;
	border: 0;
	margin-right: 1em;
}

div.amazlet-name {
	font-weight: bold;
}

div.amazlet-image,div.amazlet-info,div.amazlet-name,div.amazlet-powered-date,div.amazlet-detail,div.amazlet-link {
	clear: none ! important; 
}

div.amazlet-box div {
	clear: left; 
}
  • 【注意】amazletツールはブラウザのjavascript設定がオフ、IEのポップアップブロック機能がオンだと稼働しません。
  • 【補足】amazletツールは生成されたHTMLコードを貼るものなので、情報は固定されたままです。ISBN/ASIN記法のように、アマゾンサイトの情報更新は反映されません。
  • 【関連ページ】Amazonアソシエイト支援ツールではG-Toolsもあります。こちらはHTMLで見栄えがガッチリ決まっているので、はてなダイアリーならスタイルシートが効く構造のamazletツールかな、と大きくとりあげませんでした。こういうツールはどんどん新しいものが出てくるかも。

asinページを利用する

はまぞうで作ったリンクのリンク先は(このような)アマゾン商品情報が掲載された、はてなダイアリー内のページになります。

これは「asinページ」と言って、そのままショッピングカートに商品を入れたり、アマゾン商品の詳細ページを見に行ったり、はてなユーザーとして商品の評価をつけたり、同じASINについて書いた日記を一覧できたりします。またamazon.co.jpの更新情報と連動していて、料金等の最新の情報に常に対応しています。キーワードページと違ってユーザーが作成する必要はありません。

このページからアマゾン商品の詳細ページを見に行くと通常、はてなのアソシエイトIDのついたページになります。そこでアマゾンの商品が売れると、はてなに紹介手数料が入金されて、はてなの運営資金になっています。

自分のアソシエイトIDのasinページ

http://d.hatena.ne.jp/asin/B0000C002T/hatena-22

のように、ASINの後に『/アソシエイトID』のついたasinページも表示できます。ここからアマゾン商品の詳細ページを見に行くと、そのアソシエイトIDのページになります。

有料オプションを利用しているユーザーは「はまぞう」やISBN/ASIN記法を利用したとき自動的に、設定画面で設定した自分のアソシエイトIDがついたasinページにリンクするようになります。

ISBN/ASIN記法を使う

日記の中で「isbn:」、「asin:」の後に ISBN/ASINを書くと、その商品のasinページへのリンクになります。はてな独自の『ISBN/ASIN記法』です。

例……asin:4886487319

このISBN/ASIN記法にいろんなバリエーションがあって、「はまぞう」より若干カスタマイズが効くようになっています。

  • asin:4886487319
    • asinページへのリンクになる(以下、共通)
  • asin:4886487319:title
    • 商品名が表示される
  • asin:4886487319:image
    • 画像リンクになる(アマゾンに画像がないと?マーク)
  • asin:4886487319:image:small
    • 小さな画像リンクになる(アマゾンに画像があるときのみ)
  • asin:4886487319:image:large
    • 大きな画像リンクになる(アマゾンに画像があるときのみ・はまぞうにない機能)
  • asin:4886487319:detail
    • 画像つきの詳細な情報が表示される

はまぞう」はこのISBN/ASIN記法を簡単にするツールということになります。

この記法に自由なアソシエイトIDを反映させることはできず、通常ははてなの収益となるasinページへのリンクとなりますが、有料オプション利用時は、ISBN/ASIN記法で作ったリンクは設定画面で設定した(自分の)アソシエイトIDつきのasinページとなります。


サイドバーに何かを入れるに戻る← | →アクセス解析やアクセスカウンターの導入(未完成)


bk1リーダープログラム

bk1(ビーケーワン)は日本のオンライン書店です。国内最大の書誌データベースや独自の書評データベースを備え、素早い出荷が特長です。(参考ページ:オンライン書店bk1 会社案内

はてなには、bk1と共同運営の書籍専用人力検索「bk1はてな」があります。ブログとの連携にも力を入れていて、書籍詳細ページにトラックバックを送信できるブランチサイト http://www.bk1.jp/ もあります。

bk1のアフィリエイト「ブリーダー」になると自分で買っても3%分のbk1ポイントがつきます。また書影もダウンロード利用可能になります。

bk1ブリーダープログラム用リンクの作り方

はてなダイアリー・はてなグループではbk1用の記法や「はまぞう」のような機能は準備されていないので、自分でリンクを記述したり、(HTMLを書けない場合は)bk1のサイトで生成したリンク用のHTMLソースをコピーして貼ったりする必要があります。具体的な方法は

のページを参考にしてください。

なお、はてなではXSS対策によってJavascriptが利用できないためランキングボードタイプのリンクは張れません。

スタイルシート用参考:amazletで作成した「商品情報リンク」のHTML概略

<div class="amazlet-box">
	<div class="amazlet-image">
		<a href="http://www.amazon.co.jp/exec/obidos/ASIN/~~~~"><img></a>
	</div>
	<div class="amazlet-info">
		<div class="amazlet-name">
			<a>商品タイトル</a>
   			<div class="amazlet-powered-date">
 				   posted with <a>amazlet</a> at XX.XX.XX
  			 </div>
		</div>
		<div class="amazlet-detail">
			作者名<br />出版社(年月日)<br />在庫状況<br />
		</div>
		<div class="amazlet-link">
			<a>Amazon.co.jpで詳細を見る/a>
		</div>
	</div>
	<div>(←回り込み解除のための空要素)
	</div>
</div>

sugiosugio2004/11/26 03:29このガイドを読んで疑問の残った方やご指摘のある方、こちらにコメントをお願いいたします。

sugiosugio2004/12/03 14:35http://d.hatena.ne.jp/hatenadiary/20041202#cのnobodyさんの指摘を受けて修正。ありがとうございます。

SoyDeJaponSoyDeJapon2004/12/11 12:31Google AdSenseの広告バナーを設置しているのですが、Googleの方で広告レイアウト用コードを指定しても、色とイメージ広告が反映されません。そういえばはてなで”あの青”以外みたことがありませんし、イメージ広告もしかりです。

sugiosugio2004/12/11 12:53はてなのGoogleアドセンスも色や形を変えられますよ。ヘルプのadsenseモジュール(http://d.hatena.ne.jp/help#adsense)でもさらっと触れられているのですが、adsenseモジュールを表示させるタグの中で色や形を指定していきます。これについては
http://d.hatena.ne.jp/keyword/はてなダイアリーガイド「CSSセレクタ - adsenseモジュール」
が少し詳しいです。

SoyDeJaponSoyDeJapon2004/12/11 16:20ありがとうございます、やっと変えられました!!まえに試みたときは色指定などをスタイルシートに書き込んでたのかもしれません。初心者はどこに書き込むのか指定が無い場合解かりません。ダイアリーガイド「CSSセレクタ-adsenseモジュール」を見てやったらできました。
初心者はgoogleのコードをコピーするだけでページに反映されると思ってしまいますね。その様に書かれていますから。。。

sugiosugio2004/12/11 22:32なるほど、googleの説明通りにやってしまいますよね。念を押した方が良いかも。「CSSセレクタ-adsenseモジュール」も紹介しておきたいと思います。ご質問ありがとございます。

SoyDeJaponSoyDeJapon2004/12/12 02:30上記のようだと親切だと思います。「CSSセレクタ-adsenseモジュール」にすぐに行き着けて便利ですね。

sugiosugio2004/12/12 02:38ありがとうございまーす。

 | 

ホームページ制作