画面サイズによりAdSenseの表示を切り替える

画面サイズによりAdSenseの表示を切り替える

記事中のAdSenseを外してみたが、すぐに方針撤回をしてしまいました。

関連エントリー: (方針撤回したけど)ブログ記事中のAdSenseを外した理由

スポンサーリンク

以前のAdSense配置

方針を撤回したついでにAdSenseの配置を変更した。それまでは、下記の場所にAdSenseを貼っていました。

  • 記事本文中。
  • 記事下。
  • サイドバー上部。

現在のAdSense配置

変更後はこの配置です。

  • 記事本文中: adsense1
  • 記事下1つ目: adsense2(常に表示)
  • 記事下2つ目: adSense3(1280px以上で表示)
  • Related Posts 下: adSense4(1280px以上で非表示)

図にするとこのようになります。

当ブログ、現在のAdSense配置
当ブログ、現在のAdSense配置

PCとタブレットやスマホの場合とでAdSense3と4の表示有り無しを切り替えたわけです。

PCの場合(1280px以上)

  • 記事本文中に1つ。
  • 記事下に左右2つ。

モバイルの場合(1280px未満)

  • 記事本文中に1つ。
  • 記事下に1つ。
  • Related Posts 下に1つ。

最初は1024pxで切り替えるようにしていたのですが、これだとiPadの横画面で見たとき、記事下にAdSenseが上下2つになり、ちょっとウザく感じたので1280pxで切り替えるようにした。

AdSense配置の前提条件

このブログで使っているAdSenseの配置に関係するプラグインとThemeについて説明しておく。

プラグイン

  • Bottom of every post
    記事下に何らかの固定コンテンツを表示するためのプラグインです。このブログでは記事下にAdSenseを表示するために使っています。
  • WordPress Related Posts
    記事下に関連記事を表示するプラグイン。Bottom of every postで表示させたコンテンツの下に表示されます。

Theme

このブログのThemeはこちら、シンプルな無料Themeです。

記事中のAdSense表示方法

functions.phpにAdSenseをショートコード化して記事中の任意の位置にAdSenseを表示出来るようにしています。

私は、下記のようにfunctions.php内に記入しています。この場合、記事内に[adsense1]([]は半角に変更する)と記入すれば、その位置にAdSenseが表示されます。

function ad_shortcode1() {
$adcode1 = '
<p>スポンサーリンク</p>
<div align="center" style="margin-top: 0px; margin-bottom: 26px;">
<style type="text/css">
.single1 { width: 300px; height: 250px; }
@media(min-width: 360px) { .single1 { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- single1-レスポンシブ -->
<ins class="adsbygoogle single1"
style="display:inline-block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
';
return $adcode1;
}
add_shortcode('adsense1', 'ad_shortcode1');

ポイントはレスポンシブ対応のAdSenseコードを取得する事と着色部分です。CSSを使ってAdSenseのサイズを指定しています。この場合だと、360px未満は300×250、360px以上は336×280のAdSenseが表示されます。

記事下のAdSense表示方法

Bottom of every postをインストールしたら、プラグインの画面から「編集」をクリックする。但し、このプラグインは2年以上更新されていないので、その点を承知の上で利用してください。

プラグインの画面から「編集」をクリック
プラグインの画面から「編集」をクリック

次に画面右側のbottom-of-every-post/bottom_of_every_post.txtをクリックする。そうするとこのテキストファイルを直接編集できるので、ここに記事下に表示したい内容を記述すればよい。

bottom-of-every-post/bottom_of_every_post.txt を編集する
bottom-of-every-post/bottom_of_every_post.txt を編集する

今回はAdSenseを表示したいのでそのコードを記述します。私の場合は下記のようにしています。

<hr style="margin-top: 26px; margin-bottom: 26px;" />
<div align="center" style="margin-top: 0px; margin-bottom: 26px;">
<style type="text/css">
.single2 { width: 300px; height: 250px; }
@media(min-width: 360px) { .single2 { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- single2-レスポンシブ -->
<ins class="adsbygoogle single2"
style="display:inline-block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style type="text/css">
.single3 { display:inline-block; width: 300px; height: 250px; }
@media(min-width: 360px) { .single3 { width: 336px; height: 280px; } }
@media (max-width: 1279px) { .single3 { display: none; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- single3-レスポンシブ -->
<ins class="adsbygoogle single3"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

AdSense2(single2)は、AdSense1(single1)と同じ。AdSense3(single3)は1279pxまで表示されず、1280px以上になれば表示されます。1280px以上の場合は記事下にAdSenseが2つ並びます。

Related Posts 下のAdSense表示方法

テーマの編集から、single.phpを編集します。その中から下記記述を探す。

<?php get_template_part( 'content', 'single' ); ?>

この直下にAdSenseのコードを挿入する。下記は私の場合。

<div align="center" style="margin-top: 0px; margin-bottom: 26px;">
<style type="text/css">
.single4 { display:inline-block; width: 300px; height: 250px; }
@media(min-width: 360px) { .single4 { width: 336px; height: 280px; } }
@media (min-width: 1280px) { .single4 { display: none; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- single4-レスポンシブ -->
<ins class="adsbygoogle single4"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

AdSense4(single4)は1279pxまで表示され、1280px以上になると表示されません。

まとめ

関数を使ってPCサイトとモバイルサイトで表示を切り替える方法もあるようですが、こちらの方がお手軽です。もっと細かく設定すればPC、タブレット、スマホそれぞれの表示に切り替えることもできそうです。あまり細かくやりすぎるとAdSenseの表示サイズが意図した通りにならなくなったので、私は止めておきました。

参考リンク


ブログを気に入っていただけましたら、feedlyで購読していただけると嬉しいです。
follow us in feedly

Related Posts

Facebookページを作りました

なっかん
ダイエットがきっかけで走りはじめた市民ランナーですが、現在はゆっくりのんびりジョガー。ギターやウクレレも楽しんでいます。レベルは中級くらいかな?

コメントを残す