« 再ダイエットなう | トップページ | PHPで「なんちゃって静的URL」 »

2012.02.09

設置数制限のある広告をココログベーシックの記事下に自動配置


photo credit: Darwin Bell via photopin cc

script要素で提供されている広告をブログの各記事の下などに貼りたい。しかし1ページ内の設置数の上限が設けられていて、記事に直接書いてしまうと、複数並ぶトップページで上限を超えちゃう可能性がある。

このブログはココログベーシック。レイアウトを自由に編集できないみたいなので「ページが表示された時、javascriptでブログレイアウトの特定要素(コンテンツのヘッダーやフッター部分)にscriptを生成すればよいのだな♪」と簡単に思った。が、なかなかこれがうまくいかんかった。スクリプトが書かれても中身が実行されないとか、クロスブラウザ的問題とか、deferってなにそれおいしいの?とか

頭の片隅ではモヤモヤしながら結局、そのまま一ヶ月近く放置してましたが、昨日、まさにあきらめかけていたその時、「パッと光明」頭が光る。

「div要素の中にscriptを直接書いてdivを丸ごと移動させればいいじゃんイイジャンそれイイジャン♪」と、、、、まー気づいたというか、「それ先に考えるだろフツー」と落ち込んだというか(笑)

以下のスクリプトをブログのレイアウトの中にしのばせる(ワタシはトップバナーのところ)。jQuery必要です。上から二つのコンテンツそれぞれの最後に広告表示。コンテンツがひとつしかない場合は2つ目をページの最後に表示してます。html要素のidやclassは使っているレイアウトに依存すると思うので、他のレイアウトでやるならfirebugなんかで調べてからヨロシク。

<div style="display:none;">
    <div id="ad1" style="display:none;">
        <script type="text/javascript">
        //広告1
        </script>
    </div>
    <div id="ad2" style="display:none;">
        <script type="text/javascript">
        //広告2
        </script>
    </div>
</div>
jQuery(function(){
    var ad1 = $("#ad1");
    var ad2 = $("#ad2");
    var e=$(".entry-body");
    var e1 = e.get(0);
    var e2 = e.get(1);
    var bsel = '.content-bottom:last';
    var b = $(bsel).get(0);
    if(e1) {
        $(e1).append(ad1);
        if(e2) {
            $(e2).append(ad2);
        } else {
            if(b) {
                $(b).append(ad2);
            } else {
                $(e1).append(ad2);
            }
        }
        ad1.show();
        ad2.show();
    } else {
        if(b) {
            $(b).append(ad1);
            $(b).append(ad2);
            ad1.show();
            ad1.show();
        }
    }
});

なんてこたーない、もーまんたい。まったく問題なく動作してるので、なんともいやはや(笑)

« 再ダイエットなう | トップページ | PHPで「なんちゃって静的URL」 »

ウェブログ・ココログ関連」カテゴリの記事

プログラミング」カテゴリの記事

javascript / jQuery」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: 設置数制限のある広告をココログベーシックの記事下に自動配置:

« 再ダイエットなう | トップページ | PHPで「なんちゃって静的URL」 »

2019年5月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
フォト

Google AdSense

銀の弾丸

無料ブログはココログ

他のアカウント