Seita developer blog

ユーザ企業に努めるアプリケーションエンジニアがプログラミング、データベース、OS、SNS、ガジェットなどを中心に備忘録変わりに書いていきます。

【Blog】Amazonアソシエイトをはてなブログに掲載してみた。

Amazonアソシエイトはてなブログのサイドバーに掲載してみたので、方法を掲載してみます。

 

[注意事項]

adBlockなどの広告ブロック系のブラウザアドオンはOffにするか、シークレットモードで作業してください。

chrome.google.com

 

[サイドバーのイメージ]

f:id:rey1229:20160522021118p:plain

 

[アソシエイトのタグの生成]

Amazonアソシエイトには過去に登録していたので、今回はサイドバーへの追加方法だけ紹介

 

1.アソシエイトのサイトに移動

Amazon アソシエイト(アフィリエイト)

 

2.ウィジェットタブへ移動。

f:id:rey1229:20160522021522p:plain

 

3.今回はメンテの手間が少ないよう「おまかせリンク」を採用

f:id:rey1229:20160522021557p:plain

 

4.ウィジェットのカスタマイズ

シンプルイズベストということで、設定はこんな感じ

f:id:rey1229:20160522021733p:plain

 

5.下部にHTMLが表示されるので、コピーしておいてください。

f:id:rey1229:20160522022014p:plain

 

 

 

[はてなブログの設定]

1.デザインタブへ

f:id:rey1229:20160522022156p:plain

 

2.ペンチマークをクリック

f:id:rey1229:20160522022227p:plain

 

3.サイドバーに追加で、先ほどコピーしておいたHTMLコードを貼り付け

f:id:rey1229:20160522022327p:plain

 

4.あとはサイドバーを適当な位置に移動させて完了!

f:id:rey1229:20160522022451p:plain

 

[完成イメージ]

f:id:rey1229:20160522022551p:plain

 

うちのブログで広告収入って得られるのかな?

 

[蛇足]

同じ要領で、こんなヘッダー・フッダー広告も作れますよ!

f:id:rey1229:20160522024633p:plain

 

サイズはこの設定で

f:id:rey1229:20160522023529p:plain