Google Adsense：代替広告を自作してみる [アフィリエイト：Google Adsense]
こちらのサイトに注意点が載っています。
次の点で、注意が必要なようです。
・<BODY>内でマージンを設定すること。
これをやらないと、微妙にズレた状態で自作広告が表示されることになります。
・<META>で文字コードを指定しないと文字化けを起こす場合がある。
今のところ、代替広告を表示する機会がないので、
試しにiframe によるGoogle Adsense に対応する
広告のテンプレートを作ってみました。
xhtml にこだわりはないので、table タグとか使ってます。
なお、Google Adsense のCSSを見た感じでは、
margin を設定する必要がなさそうなので、
margin はなしで設定しています。
楽天のアフィリエイトを基本に、google
「１６０×６００（ワイドスクレイバー）」と
「３３６×２８０」のサイズで作成です。
画像は128px を基本に作っています。
このサイトに使わせてもらっているものです。
やっつけで書いたので、CSSにムダが多いかもしれません。
適当に手直ししてみてください。
１６０×６００、iframe 設定用：
<iframe id="rakuten_left_frame1" width="160" height="600" frameborder="0" scrolling="no" vspace="0" src="【iframe の中身のアドレス】" marginwidth="0" marginheight="0" hspace="0" allowtransparency="true" />
この部分は iframe 対応のブラウザで見てください。
</iframe>
１６０×６００、iframe の中身用：
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
a:link,a:visited,a:hover,a:active{color:blue;cursor:pointer;text-decoration:underline;font-weight:bold;}
a:link img,a:visited img,a:active img,a:hover img{border-style:none;}
body,table,td{margin:0px;padding:0px;}
td{line-height:140%;}
body,table{width:160px;height:600px;}
table{border-collapse : collapse ;}
body,td{background-color:transparent;font-family:arial,sans-serif;color:#000000;font-size:12px;font-weight:bold;}
a img{display:block;}
</style>
</head>
<body>
<table>
<tr>
<td>
楽天検索<br />
【検索ワード１】
<br />
【検索ワード２】
<br />
【検索ワード３】
</td>
</tr>
<tr>
<td>
【商品１画像】
【商品１説明】
</td>
</tr>
<tr>
<td>
【商品２画像】
【商品２説明】
</td>
</tr>
<tr>
<td>
【商品３画像】
【商品３説明】
</td></tr>
</table>
</body>
</html>
３３６×２８０、iframe 設定用：
<iframe id="rakuten_center_frame1" width="336" height="280" frameborder="0" scrolling="no" vspace="0" src="【iframe の中身のアドレス】" marginwidth="0" marginheight="0" hspace="0" allowtransparency="true" style="margin-top: 10px;" />
この部分は iframe 対応のブラウザで見てください。
</iframe>
３３６×２８０、iframe の中身用：
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
a:link,a:visited,a:hover,a:active{color:blue;cursor:pointer;text-decoration:underline;font-weight:bold;}
a:link img,a:visited img,a:active img,a:hover img{border-style:none;}
body,table{width:336px;height:280px;margin:0px;padding:0px;}
body,td{background-color:transparent;font-family:arial,sans-serif;color:#000000;font-size:12px;font-weight:bold;}
table{border-collapse : collapse ;}
td{width:50%;padding:10px;text-align:center;line-height:140%;}
.img{vertical-align:bottom;height:148px;}
.caption{vertical-align:bottom;}
</style>
</head>
<body>
<table>
<tr>
<td class="caption" colspan="2" align="center" style="width:336px;">
楽天検索
<br />
【検索ワード１】
【検索ワード２】
【検索ワード３】
</td>
</tr>
<tr>
<td class="img">
【商品１画像】
</td>
<td class="img">
【商品２画像】
</td>
</tr>
<tr>
<td>
【商品１説明】
</td>
<td>
【商品２説明】
</td>
</tr>
</table>
</body>
</html>
次のサイトを参考に作成しました。
SABlog | #126 AdSense公共広告を自作代替広告に
Google AdSenseの始め方 その2「広告を最適化する」 - GIGAZINE
Google Adsenseを始めてみた - atl*weblog
2009-12-13 17:42
nice!(0)
コメント(1)
トラックバック(0)
はじめまして。
今so-netブログでgoogle Googleアドセンスが表示されなくなっています。原因は恐らくドメインがブロックされている事が原因です。みんなで問い合わせれば返事が来ると思うので、急いでみんなでso-netに連絡しましょう。
by ackyさん (2011-10-27 12:20)