記事中のAdSenseを外してみたが、すぐに方針撤回をしてしまいました。
以前のAdSense配置
方針を撤回したついでにAdSenseの配置を変更した。それまでは、下記の場所にAdSenseを貼っていました。
- 記事本文中。
- 記事下。
- サイドバー上部。
現在のAdSense配置
変更後はこの配置です。
- 記事本文中: adsense1
- 記事下1つ目: adsense2（常に表示）
- 記事下2つ目: adSense3（1280px以上で表示）
- Related Posts 下: adSense4（1280px以上で非表示）
図にするとこのようになります。
当ブログ、現在の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 を編集する
今回は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の表示サイズが意図した通りにならなくなったので、私は止めておきました。
参考リンク
- WordPressのfunctions.phpに書いておくといいかもしれないコードいろいろ
functions.phpにAdSenseのコードを記入してショートコードを使って呼び出す方法を書かれています。 - レスポンシブWebデザイン対応のGoogle AdSense設置方法
この記事で紹介した方法について、詳しく紹介されています。私の方法はしょせん素人レベルなので詳しく知りたい方はこちらがおすすめです。 - レスポンシブ広告ユニットを作成する – AdSense ヘルプ
このページを見ていてこの方法をやってみようと思った。「画面の幅ごとに正確なサイズを指定する場合の例」と「特定の画面サイズのときに広告を隠す場合」が元ネタです。 - 広告の配置に関するポリシー – AdSense ヘルプ
「AdSenseの許可されない配置方法の例」が掲載されています。モバイルサイトの場合はPCサイトよりも制約が多いのでこちらで確認しましょう。
コメント