はてなブログで記事下に広告を横に２つ並べてランダム表示

hatenaロゴ

はてなブログで、JavaScript（jQuery）を使って、個別記事の下に広告を横に２つ並べて、記事のページが表示されるたびに、ランダムに広告を表示させる方法をメモしておきます。

個別記事が表示されるたびにランダムで広告を表示させるの続きになりますが、前回は、idを２つ使ったりと無駄があったので、その改良版。

GIXDLOG - [JS] リロード時にランダムで広告を表示するjQueryスクリプトを書いてみた【15/8/10更新】のjQuery複数表示バージョンのスクリプトを少し改良して使います。

（デザイン→カスタマイズ→フッタにコードを入力）

JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
    if($('.page-entry')[0]) { /* 個別記事のページなら↓ */
        var items = [
            '（ここに広告コードを貼り付ける）',
            '（ここに広告コードを貼り付ける）',
            '（ここに広告コードを貼り付ける）'
        ];
        var num = 2; /* 表示したい数 */
        for(var i = 0; i < num; i++) {
            var random = Math.floor(Math.random() * items.length);
            $('#random-ads').append('<span style="margin: 0 20px 0 0;">' + items[random] + '</span>');
            items.splice(random, 1);
        }
    }
});
</script>

はじめのifで、個別記事のページが表示されていれば、記事の下に広告を表示させます。
広告を２つ並べるので、表示したい数は「２」、赤字で左右の広告の空白を調整します。
工夫と応用しだいで、並べる広告の数を増やしたり、CSSで広告を装飾したりできます。

広告を表示させるコードは、前回よりもかなりシンプルになりました。

（デザイン→カスタマイズ→記事→記事上下のカスタマイズの記事下にコードを入力）