【アドセンスを横並びにする】コピペで簡単に設置

今回はWordPressでアドセンスを設置する方法に関して記載しています。

いろんなサイトやブログでよく見かけるPC表示時のアドセンス広告を“横並び”にする方法ですね。

私自身もあまりこういった編集に関しては得意ではありませんが、簡単に横並びにすることができたのでメモを残しておく意味合いも込めて記事にまとめています。

コピーして自分のアドセンス広告を入れるだけで実践できる内容にしているので、こういった作業が不慣れな方も比較的簡単にできるのではないでしょうか。

合わせてAFFINGER6でダッシュボードから設定できる方法についても記載しているのでそちらも参考に。

注意点

いくつか注意点を記載しておきます。

HTMLコードなので、記事へ直接入れても反映しない
広告サイズは「固定」で「幅336×高さ280」が推薦
スマホとPCで別々の広告を表示できるよう分岐コードを使用する必要がある

横並びにするには広告を二つ使用するので、そのままコードを入力するとスマホで表示した場合は縦に二つ並んでしまいます。

そのため、PCとスマホの広告を別々で表示させるために分岐させる必要があります。

そちらについてはこちらへ記載しているので活用してください。

記事内にそのまま記載したい場合は、HTML編集モードにするなどしてコードを記載する必要があります。

ちなみに今回紹介しているのは記事へ直接入力する場合だったり、子テーマのphpなどへ直接入力する場合に重宝するやり方です。

WordPressのテーマによっては横並びにするため管理画面があったりするので、そういった優良なテーマをお使いの方はそちらの方が簡単に設定できる場合もあります。

コピペ用コード

コピペ用コードを記載しています。

子テーマのCSSへ記載しておくものと、表示したい場所へ記載するコードがあります。

CSSに記載するコード

こちらを予め子テーマへ記載しておきます。

/* 横並びアドセンス
----------------------------------------------------*/
.layout {
	padding:0px !important;
}

.ad-left {float:left; width:336px;}
.ad-right {float:right; width:336px;}

/* clear */
.clear {clear:both;}
.clear hr {display:none;}

/* PC画面 */
@media screen and (min-width: 1081px) {
	.layout {width:680px;}
}

/* スマホ画面 */
@media screen and (max-width: 1080px) {	
	.layout {padding:0 !important; width:300px; margin:0 auto;}
	.ad-right {display:none;}
	.ad-left {width:300px;}
}

アドセンスを配置するためのコード

<!-- 横並びアドセンス -->
<div class="layout" style="margin-bottom:1px;">
  <div class="ad-left">
左側のPC用アドセンスコード
  </div>
  <div class="ad-right">
右側のPC用アドセンスコード
  </div>

の部分へ自分のアドセンスコードを記載するだけでOKです。

ただし、スマホの広告とPCの広告を分岐する必要があるため次の工程も参考にしてみてください。

スマホと分岐するためのコードについて

スマホ広告と分岐するためには専用の分岐コードを使用します。

あらかじめ設定しなければならない点もあるため、分岐についてまとめている記事も参考に！
→スマホとPCのアドセンスを別々で表示したい/PHPへ直接入力する簡単な方法

分岐するためのコードとPCでアドセンスを横並びさせるためのコードを下へまとめました。

<!-- スマホ/PC分岐アドセンスここから -->
<?php if ( wp_is_mobile() ) : ?>

スマホ用のアドセンスコード
<?php else: ?>
<!-- 横並びアドセンス -->
<div class="layout" style="margin-bottom:1px;">
  <div class="ad-left">
左側のPC用アドセンスコード
  </div>
  <div class="ad-right">
右側のPC用アドセンスコード
  </div>
  <hr class="clear">
<!-- / .layout --></div>
<?php endif; ?>
<!-- スマホ/PC分岐アドセンスここまで -->