はじめに
エキサイトブログについて無料ユーザのみ、インタレストマッチの広告が表示されるようになりました。私は、広告を消したり、隠したりするのではなく、記事と広告の分離を目指したいと考えています。この広告を攻略するために、HTMLコードを調査しました。
広告構造(素に近いHTML)
まずはじめに、どのような構造でインタレスマッチ広告を挿入しているのか調査。ブラウザのソース表示は実際のHTMLとちょっと違うため、実際にファイルをダウンロードして調査しました。ダウンロードにはUNIXではおなじみのWget[1]です。
※この記事を書く時に、なぜだか１つしか広告が表示されなかったので、１つだけだけど大体分かるのでよしとすることにしました。
エキサイトブログの広告構造 素に近いHTML抜粋
<div class="POST_BODY">
<!--interest_match_relevant_zone_start -->
投稿部分
<!--interest_match_relevant_zone_end -->
<br clear="all"/>
<div name="im" id="im" style="display:hidden;"></div>
<script type="text/javascript">...</script>
<script type="text/javascript">...</script>
</div>
- HTMLファイルをダウンロードして調査した結果、あらかじめ入れてある<div name="im" id="im" style="display:hidden;"></div>に対して、JavaScriptで広告のHTMLコードを流し込みようになっていました。そのコードがJavaScriptの２つめの部分に記述されています。
CSSで広告を消されないように、JavaScriptでスタイルを設定しています。
- 記事の最後に見事に広告のコードが挿入されるようになっています。
[1] Wget ウェブサーバからコンテンツを取得するコンピュータープログラム。コマンドラインからURLアドレスとオプションを駆使してサイト丸ごと取り込むことも可能。今回は、"Wget URLアドレス"と単純にHTMLファイルのみを取り込みました。以下のサイトでプログラムを入手可能です。
GNU Wget
広告構造(ブラウザ)
<div class="POST_BODY">
<!--interest_match_relevant_zone_start -->
投稿
<!--interest_match_relevant_zone_end -->
<br clear="all">
<div name="im" id="im" style="display: block ! important; visibility: visible ! important; height: 100% ! important; width: 100% ! important;">
<table style="margin: 20px 0pt 15px; width: 95%;" align="center">
<tbody>
<tr>
<td class="im_hit" id="lasg0" onclick="ga(this,event);return false;">
<span class="im_url">広告タイトル</span>
<a id="asg0" href="広告URLアドレス"> </a>
<span class="im_url">www.rakuten.ne.jp</span>
<table class="im_summary" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="im_summary">広告の内容</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="im_title">
インタレストマッチ -
<a href="http://..." style="color: rgb(145, 145, 145); text-decoration: none;">広告の掲載について</a>
</div>
</div>
広告変更は禁止？
無料のサイトをお借りすることが多いので、広告表示の件もサイト毎によって違ったりする。広告の内容を改変したり、広告の見た目を変えることが禁止されていることがある。エキサイトではなにをしていいのか、なにをしてはだめなのかが分からない。ただ、広告自身を変えるのがアウトな気がする。フォントサイズや、間隔、色などかえるとアウトな気がする。[2]
[2] 私がそう思っているだけで、本当は違うかも。そうであって欲しいけど。
どこを修正しようかぁ
#imを含む階層下の変更が素人として楽である。だが、それでは美しくない。やはり#im階層下を変更しないで変更できるのが美しいと感じる。CSS2以降の対応ブラウザであれば、広告タグが入ったあとだけその部分の修正を行うことが可能である。ただしなぜだかIEはいつもうまくできない。以下のリンクは苦心して作ったものであるが、完全ではない。
ｅｘｃｉｔｅブログの広告枠の明記（改良)
現在は,#imのトップ部分にボーダラインを入れることと、上記方法で広告の区別を行っている。しかし、この方法をよりブラッシュアップしてもっと良い方法がないか、探したいと思っている。
