お小遣いを増やすためにはこれ!googleAdsenseをはてなブログ(無料版)のバナーより上に表示させる方法
前回の記事で予告した記事の上にadsenseのバナーを表示する方法をお知らせします。
※jQueryのライブラリをあらかじめ読み込んでおくことが抜けていたため4/1に追記しました。
前回の記事でも書きましたが、はてなブログのデザインの記事下にバナーを張ると、表示場所がソーシャル系のボタンの下で、更にはてなの標準のadsenseのバナーの下に表示されます。
どうせなら目立つソーシャル系のボタンの上(記事が終わった直後)に表示したいので、無理やり表示する方法を考えます。
バナーの追加方法
については前回の記事でadsenseのコードを直接貼り付けなくても出力する方法を利用したので、こちらを利用します。
準備
最初に絶対に必要なjQueryですが、はてなの開発ブログによると、HTMLの最後でjqueryを読み込んでいるようなので、jQueryを最初に読み込みます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
バナーの追加場所の決定
追加場所ですが、
<footer class="entry-footer"></footer>
の直前がソーシャル系のボタンの前なので、このタグの直前に追加することに決めました。
最終的なコードはこちら
<!-- jquery読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var adsenseCode = (function () {/*
<div>広告<br/>
<!-- 自分のアドセンスコードの/scriptを/scripに修正してここにコピペ -->
</div>
*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');
$(document).ready(function(){
/*バナーの追加*/
$(".entry-footer").before(adsenseCode);
});
</script>
前回の記事の内容と合わせると、こんな感じです。
<script type="text/javascript">
var adsenseCode = (function () {/*
<div>広告<br/>
<!-- 自分のアドセンスコードの/scriptを/scripに修正してここにコピペ -->
</div>
*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');
$(document).ready(function(){
/*カテゴリにお酒が含まれていないかどうかチェック*/
var noadflg = false;
$(".categories a").each(function(index, element) {
if($(element).text() == "お酒"){
noadflg = true;
return false;
}
});
/*お酒が含まれていないときのみadsenseを要素に追加*/
if(!noadflg){
/*バナーの追加*/
$(".entry-footer").before(adsenseCode);
}
});
</script>
思ったよりコードも短いし、思ったとおり動いたので満足です。
因みにこんな場所に表示されます。
※本来の目的よりもコードを書くことが目的になっているような気がする・・・。