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

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

はてなブログのトップページに広告を貼る方法。Part2

はてな
スポンサーリンク

この記事を読んで
3days-bose.hatenablog.com

実はこのサイトもアクセスの半分がトップページだったりする。

そこで以前に
gin-kei.hatenablog.com
と言う記事を書いたことを思い出しました。

これはちょっと小細工をしてサイドバーに広告を表示させる方法でした。

ちなみにまったく売れません。効果ほぼなしです。

そこで今回は対策としてトップページの記事と記事の間に広告を表示させて効果を確認してみます。

サイドバーに小細工

今回もサイドバーに小細工仕込みます。

まずははてなブログの「設定」から「カスタマイズ」を選択してサイドバーに「モジュールを追加」で「HTML」ボックスを追加します。

そのボックスに以下のコードを貼ります。

<div id="ads" style="display:none">
<br>
    <!--ここに表示する広告を設定します-->
    <script src="http://adm.shinobi.jp/s/XXXXXXXXXXX"></script>
</div>

わたしは今回は「忍者AdMax」を貼ってみました。
まだ登録されていない方はこの機会にどうぞ。

忍者AdMax

ヘッダにJavascriptを設定

次に設定から「カスタマイズ」を選択して「ヘッダー」部分に以下のコードを貼り付けます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
    function getAds()
    {
        var wkAdStr = document.getElementById("ads") ;
        //現在のページがトップページ時の場合
        if( document.querySelector("html").getAttribute("data-page") == "index"){
            $('.entry-content').after(wkAdStr.innerHTML);
        }
        //現在のページがカテゴリーページ、カレンダーページ時の場合
        if( document.querySelector("html").getAttribute("data-page") == "archive"){
            $('.archive-entry').after(wkAdStr.innerHTML);
        }
    }
    window.addEventListener("load", getAds, false);
</script>

1行目の「jquery」の読み込みはすでに設定されている場合は不要です。

これでトップページ、カテゴリページに設定した広告が各記事の最後に追加されているはずです。

その他

実は最初、サイドバーを使わずに実装していたのですが、うまく動きませんでした。
また、広告を貼り付けるサイドバーが最後にあるとうまく動きませんでした。
(いくつかあるサイドバーの間に挟むとうまく動く・・・よ~わからん。)

なので当初思っていたのとは若干違う実装になってます。

スマホは出してみるとちょっとやり過ぎ感があるので出してません。
2記事に1回とかにすればましかな。

やってみたい方はどうぞ。

注意事項

このページのコードはご自由に改変なりして使って下さい。
ただし、このコードを利用して発生したすべてのことにわたしは責任はとれません。
すべて自己責任でお願いします。

また「こうした方がいいよ」とか何かご意見があれば
はてなブックマークをしてのコメントでご連絡下さい。(笑)

あぁ、バズりたい・・・。
はてな☆イリュージョン (ダッシュエックス文庫)