読者です 読者をやめる 読者になる 読者になる

平日WEB系SE 週末時々自転車屋

WEB系の技術ネタや大好きなお酒、週末手伝う自転車屋の話などを書きます。

お小遣いを増やすためにはこれ!googleAdsenseをはてなブログ(無料版)のバナーより上に表示させる方法

 

前回の記事で予告した記事の上にadsenseのバナーを表示する方法をお知らせします。

jQueryのライブラリをあらかじめ読み込んでおくことが抜けていたため4/1に追記しました。 

 

jitenshaya-se.hatenablog.com

 

前回の記事でも書きましたが、はてなブログのデザインの記事下にバナーを張ると、表示場所がソーシャル系のボタンの下で、更にはてなの標準のadsenseのバナーの下に表示されます。

f:id:jitenshaya_se:20150330164203p:plain

どうせなら目立つソーシャル系のボタンの上(記事が終わった直後)に表示したいので、無理やり表示する方法を考えます。

 

バナーの追加方法

については前回の記事でadsenseのコードを直接貼り付けなくても出力する方法を利用したので、こちらを利用します。

jitenshaya-se.hatenablog.com

 

準備

最初に絶対に必要な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>

思ったよりコードも短いし、思ったとおり動いたので満足です。

 

因みにこんな場所に表示されます。

f:id:jitenshaya_se:20150330223628p:plain

※本来の目的よりもコードを書くことが目的になっているような気がする・・・。