f:id:bulldra:20141229172051j:plain

本文中に広告を挿入する

　このブログでは、もともとサイドバーに広告を表示していたですが、サイドバーに表示する情報量が多くなってきたので撤去しました。代わりにヘッダに広告を置こうと思いましたが、デザインが崩れるし、効果も低いので、記事本文中の最初の見出しに広告を配置する事にしました。

　記事本文中に広告を表示させるためには、一般的にエントリ内に直接記述する方法が用いられているのですが、これまでのエントリをすべて直すのは面倒だし、修正対応も地獄になってしまうため、自動的に挿入する処理を実装してみます。

プログラム

　あくまで試験的な処理なのでJQueryのベタ書きでサクッと実装。以下のコードをデザイン画面のフッタに追加することで自動的に記事本文中の最初の見出し下に広告が挿入されるようになります。レスポンシブユニットを利用しているのでスマートフォン表示にも対応。

XXXXXとYYYYYには、それぞれ自身の広告枠の番号を入れる
「はてな記法」の場合には「h1」を「h3」に変更
「h1:eq(0)」の数字を変更することで段落を指定可能

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.entry_adslot { width: 234px; height: 60px; }
@media(min-width: 500px) { .entry_adslot { width: 468px; height: 60px; margin-bottom:10px; } }
</style>
<script type="text/javascript">
$(function(){
  $('.entry-content h1:eq(0)').after('<ins class="adsbygoogle entry_adslot" style="display:block" data-ad-client="ca-pub-XXXXX" data-ad-slot="YYYYY"></ins>');
  (adsbygoogle = window.adsbygoogle || []).push({});
});
</script>

　なお無料ユーザーによる広告配置の変更は株式会社はてなより禁止されているため、本スクリプトを利用可能なのはPROユーザーのみとなります。

まとめ

　PC版ブログでのトップページでも広告挿入処理は行われるようになっており、その場合は最初のエントリにだけ広告が挿入されるようにます。id:lightgauge さんの『はてなブログのトップページにだけ独自の広告を貼る方法。アーカイブとかカテゴリページにも貼れるよ。 - 攻めは飛車角銀桂守りは金銀三枚』においてPC版のトップページでの広告についての話がでたので対応する事にしました。

<a href="http://bulldra.hatenablog.com/entry/adsense-archive">はてなブログのアーカイブページやプロフィールページにアドセンス広告を表示させるプラグイン - 太陽がまぶしかったから</a>

　広告の表示を変更するスクリプトなので、それによってGoogleから文句を付けられる可能性については未知数ですし、自己責任でご利用ください。アーカイブページやプロフィールページに広告を挿入する上記のスクリプトと基本的には同等の位置付けとなります。なお、設置サポートや表示スタイル／アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。