個別記事が表示されるたびにランダムで広告を表示させる

せっかくこのはてなブログをPro化したので、サイドバーと記事の下に広告を設置することにしました。広告を貼る前に、見にくる人を増やしなさいという話しですが...。

ただ、普通に広告を表示させるのもおもしろくないので、ちょっと工夫してみました。

まずは、サイドバー。書いたそばからアレですが、これは全然普通に表示させます。

（デザイン→サイドバー→モジュールを追加→HTMLにコードを入力）

HTML
<div class="side-ads">
    （ここに広告コードを貼り付ける）
</div>

次に、記事の下ですが、これは、JavaScript（jQuery）を使って、このブログの個別記事のページが表示されるたびに（再読み込みするたびに）、ランダムに広告を表示させます。

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

jQuery
<script>
document.addEventListener('DOMContentLoaded', function() {
    var items = [
        '（ここに広告コードを貼り付ける）',
        '（ここに広告コードを貼り付ける）',
        '（ここに広告コードを貼り付ける）'
    ];
    var random = Math.floor(Math.random() * items.length);
    $('#random-ad').append(items[random]);
    items.splice(random, 1);
    $('#random-ads').append(items[random]);
});
</script>

GIXDLOG｜[JS] リロード時にランダムで広告を表示するjQueryスクリプトを書いてみた 【15/8/10更新】のスクリプトをそっくりそのまま使わせてもらいました。

広告を表示させるコードは、写真を横並びで貼り付けるときのコードを利用しました。

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

HTML
<div style="display: flex; justify-content: space-around;">
    <div id="random-ad"></div>
    <div id="random-ads"></div>
</div>

<style>
.side-ads {
    display: none;
}
</style>

広告が横並び（ダブルレクタングル）で、しかもランダムに表示されるようになりました。

なお、記事下とサイドバー両方に広告があってもウザいので、個別記事ページではサイドバーの広告を消すようにしました（トップページやカテゴリーページなどでは表示される）。
※ 記事下のカスタマイズは、記事ページにのみ表示、適用されることを利用しました。