普通はSSP会社が用意してくれる<div～とか<script～から始まるタグを適当なとこに貼り付けるだけで表示されるんですが、
320×50の画像だけを渡されて、
「これ、オーバーレイで貼ってよ」
って言われたときの対処方法です。
Simplicityで自作オーバーレイを作る（貼り付ける）方法
こちらを参考にさせていただきました。
こちらのサイトを見ながら一緒にご覧ください。
1. header-insert.php にタグを貼る
参照サイトの①のタグです。
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="http://meerkat.jarodtaylor.com/download/jquery.meerkat.1.3.min.js" type="text/javascript"></script>
上記を貼り付けてください。
2. モバイル広告ウィジェットに<script>と<div>のタグを貼る
②③のタグ
<script type="text/javascript">
$(function(){
//meerkat stuff goes here
$('.ads').meerkat({
background: '#FFFFFF',
height: '50px',
width: '100%',
position: 'bottom',
close: '.close-meerkat',
dontShowAgain: '.dont-show',
animationIn: 'slide',
animationSpeed: 500
});
});
</script>
<div class="ads">
ここにASPで取得した広告タグを記述する。
</div>
↑この順番で貼り付けます。
参照サイトではheight: ’50px’,になってると思いますが、いまいちうまく表示されないと思うので、
好みで変えてみて下さい。自分は65にしてます。
左マージンの数値は-15にしてください。これもお好みで。
このマージンが簡単に変えられること、モバイル表示のみにできることからモバイル広告ウィジェットを使用してます。
自分のモバイル環境だけじゃなく、ChromeのデベロッパーツールやBliskで確認してどの環境でも上手く表示されてるか確認すること。
モバイル広告ウィジェットはサイドバーウィジェットの一番下に入れてください
そうすると一番下に「スポンサーリンク」の文字だけ出てしまうので･･･
適当な広告を追加しといてください（アドセンスも広告の数に制限なくなったことですし。）
ちなみにSimplicityは（WordPressは？）バナーの横の長さとかが600pxとかでもモバイル環境にあわせて勝手にリサイズしてくれるので便利です。
複数のオーバーレイをランダム表示させたいとき
Ads by datafeedrのショートコードを<div>の中に入れても表示されないので
すごいアナログですが
こちらのタグをウィジェットに挿入すると無事にランダム表示できました
他にもっといいやり方知ってる人いたら教えてください。。
オーバーレイを自作するってめちゃくちゃ難しいことだと思ってたんですが
意外と簡単にできました
ちなみにこれは消えないタイプのオーバーレイです。
スクロールすると消えるやつのやり方はわかりません。すいません。