ルレアのワードプレステンプレート「リファインスノー」で
グーグルアドセンスのレスポンシブ広告を使う方法です。
他のサイトだとわかりにくくごちゃごちゃ書いてありますが、
もっとわかりやすく説明しています。
どうも、どらたんです。
以前、ルレアの購入者フォーラムやらなんやらで、
リファインスノーでレスポンシブ対応したアドセンスを貼る方法を調べてたんですが、
なんかみんな何言ってるのかよくわからなかったので結局諦めていたんですが、
さっき色々試してみたらいい感じに貼ることができました。
貼りたいサイズを貼るために
まず、ワードプレスのレスポンシブ対応しているテンプレートに
普通のアドセンスを貼ると、スマホで見た時にはみ出したサイズになってしまいます。
200×200とかはみ出さないサイズを貼れば問題ないんですが、
それだとPC画面の時にちょっと物足りない感じになってしまうんですよね。
なので、アドセンスの種類にある「レスポンシブ広告ユニット（ベータ版）」を使います。
これをそのまま貼るだけでもスマホにちょうど良いサイズにはなるんですが、
やっぱりPC画面では少し物足りなくなります。
そこで、「アドバンスモード」で指定の広告にしてみようと思います。
レスポンシブ広告ユニットの使い方
まず新しい広告ユニットを作成する時に、
広告サイズから「レスポンシブ広告ユニット（ベータ版）」を選びます。
選んだら保存してコードを取得し、
モードを「スマートサイズ」から「アドバンス」に切り替えます。
切り替えたらコードをコピーします。
で、これをこのまま張り付けると広告がはみ出しちゃうので、
サイズを指定していきます。
変えるのは黄色線の部分。
[deco_bg image=”postit3″ width=””]
<style>
.aaaa { width: 320px; height: 50px; }
@media(min-width: 500px) { .aaaa { width: 468px; height: 60px; } }
@media(min-width: 800px) { .aaaa { width: 728px; height: 90px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– aaaa –>
<ins class=”adsbygoogle aaaa”
style=”display:inline-block”
data-ad-client=”ca-pub-1374525085340239″
data-ad-slot=”5388428104″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
[/deco_bg]
320×50のところが500px以下の画面で表示されるサイズ、
468×60のところが500px以上～800px以下で表示されるサイズ、
728×90のところが800px以上で表示されるサイズです。
っていう、どこを調べてもこういうわかりにくい表現で書いてありますが、
わかりやすく言うと、
320×50のところがスマホで表示されるサイズ、
それ以外がPCで表示されるサイズ、
っていう認識で十分です。
なので、スマホのところにスマホに表示させたいサイズを、
それ以外にPCで表示させたいサイズを打ち込めばOKなわけです。
今回はスマホで200×200、
PCで336×280の広告を表示させようと思います。
その場合のコードはこんな感じになります。
[deco_bg image=”postit3″ width=””]<style>
.aaaa { width: 200px; height: 200px; }
@media(min-width: 500px) { .aaaa { width: 336px; height: 280px; } }
@media(min-width: 800px) { .aaaa { width: 336px; height: 280px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– aaaa –>
<ins class=”adsbygoogle aaaa”
style=”display:inline-block”
data-ad-client=”ca-pub-1374525085340239″
data-ad-slot=”5388428104″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>[/deco_bg]
さっきの黄色線の部分の数字を変えただけです。
これでスマホ画面では200×200の広告、
PC画面では336×280の広告が表示されます。
もちろん、他のサイズの数字を打ち込めばそのサイズを表示させることが出来ますよ。
範囲の数字を変えればもっと便利に使うことも出来ますがややこしいですし、
別にいじるところも少ないので、こんな感じで1個1個作っていけばいいんじゃないかと思います。
なんかコードのことって無駄にごちゃごちゃして書く人が多すぎる気がする。
気取ってんのかバカヤロー。
ってことで何かわからないことがあれば聞いてくださいね。
コメント