Simplicityで自作オーバーレイタグを作る（貼り付ける）方法【WordPress】

普通はSSP会社が用意してくれる<div～とか<script～から始まるタグを適当なとこに貼り付けるだけで表示されるんですが、

320×50の画像だけを渡されて、

「これ、オーバーレイで貼ってよ」

って言われたときの対処方法です。

Simplicityで自作オーバーレイを作る（貼り付ける）方法

スマホアフィリ必須、オーバーレイ広告導入方法② - 携帯アフィリエイトバイブル -携帯で稼ぐ-

携帯サイト収入（スマホ・携帯）で生計を立てる管理人による携帯アフィリエイトからスマートフォン・Twitter・Facebookまで稼ぐ方法・儲かるノウハウ・SEO対策などを入門から応用まで実践報告し攻略するブログ。初心者歓迎！安心の全ノウハウ無料公開

upup.blog3.fc2.com

こちらを参考にさせていただきました。

こちらのサイトを見ながら一緒にご覧ください。

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で確認してどの環境でも上手く表示されてるか確認すること。

ブロガーがモバイル表示を確認するのに超おすすめなブラウザ「Blisk」

Blisk（ブリスク）というのが何のことかわからないかもしれませんが、Webページを表示するWebブラウザの一つです。モバイル（スマホやタブレット）とパソコンの表示を同時に確認できるのが大きな特徴になってます。しかもChromeのデベロッパ

pasokatu.com

モバイル広告ウィジェットはサイドバーウィジェットの一番下に入れてください

そうすると一番下に「スポンサーリンク」の文字だけ出てしまうので･･･

適当な広告を追加しといてください（アドセンスも広告の数に制限なくなったことですし。）

ちなみにSimplicityは（WordPressは？）バナーの横の長さとかが600pxとかでもモバイル環境にあわせて勝手にリサイズしてくれるので便利です。

複数のオーバーレイをランダム表示させたいとき

Ads by datafeedrのショートコードを<div>の中に入れても表示されないので

すごいアナログですが

ランダムにリンク付き画像の表示

www.chironoworks.com

こちらのタグをウィジェットに挿入すると無事にランダム表示できました

他にもっといいやり方知ってる人いたら教えてください。。

オーバーレイを自作するってめちゃくちゃ難しいことだと思ってたんですが

意外と簡単にできました

ちなみにこれは消えないタイプのオーバーレイです。

スクロールすると消えるやつのやり方はわかりません。すいません。