レスポンシブ対応！Google AdSenseの広告を横に並べてみよう

googleアドセンス広告のレクタングルを横並びにしたいんだけど、レクタングル大（336×280）のコードを普通に貼ったら、縦に並んでしまい、困ったことはありませんか？

今回は、WordPressで縦に並んでしまったレクタングル大（336×280）アドセンス広告を、レスポンシブデザイン対応でPCとモバイルを分けてアドセンス広告を表示する方法をご紹介します。

WordPressでアドセンス広告を横に2つ並べる方法

アドセンス広告を横並びにすることで収益アップにつながります。

アドセンス広告を横並びにする方法は、CSSで横並びの調整をして、広告を表示したい場所にコードを記述するという流れになります。レクタングル広告を横並びにする場合は、それなりのスペースが必要になります。例えば、レクタングル大（336×280）を横に並べると、最低でも672pxの幅が必要ですし、余白のことを考えるともう少し幅が必要になります。今回アドセンス広告を表示するテーマの幅はPC表示が幅1200px、コンテンツ内の幅740pxでのご紹介となります。

失敗したときのために必ずバックアップをしてから記述するようにしましょう。

スタイルシート(style.css)

WordPressの左メニューから、外観テーマの編集スタイルシート(style.css)と進み、以下のコードをCSS（スタイルシート）の一番下に追加記述しましょう。

/* スポンサーリンクラベル */
.ad-label {
 color: #555;
 font-size: 15px;
 text-align:center;
 margin: 15px 0 0 !important;
}

/* アドセンス広告全体のレイアウト */
.ad-overall {
 margin-top:5px;
 margin-bottom:20px;
 padding: 15px 0;
 background-color: #fff;
}

.ad-overall:after {
 content:"";
 display:block;
 clear:both;
}
 
/* PC用アドセンス広告左 */
.ad-left{
 float:left;
 margin: 0 38px 0 0;
 padding-left: 15px;
}
  
/* PC用アドセンス広告右 */
.ad-right{
 float:left;
}

@media screen and (min-width:992px) and ( max-width:1199px) {
.ad-left {
 margin-right: 0px;
 padding-left: 0px;
 text-align: center;
 width: 100%;
}

.ad-right {
 display: none;
}
}

/* モバイル用アドセンスレスポンシブ広告 */
.ad-mobile {
 margin-bottom: 20px;
}

個別投稿 (single.php)

外観テーマの編集個別投稿 (single.php)と進み、アドセンス広告を表示したい場所に以下のコードを記述しましょう。

モバイル用、PC左用、PC右用それぞれの広告コードを挿入してくださいね。

<!-- 横並びアドセンス(モバイル/PC切り替え)・始まり -->
<div class="ad-label">
<p>スポンサーリンク</p>
</div>
<?php if (wp_is_mobile()) :?>
<div class="ad-mobile">
ここにスマホ用レスポンシブ広告コードを入れる
</div>
<?php else: ?>
<div class="ad-overall">
<div class="ad-left">
ここに左用ダブルレクタングルのアドセンスコードを入れる
</div>
<div class="ad-right">
ここに右用ダブルレクタングルのアドセンスコードを入れる
</div>
</div>
<?php endif; ?>
<!-- 横並びアドセンス(モバイル/PC切り替え)・終わり -->

これで、PCの時は広告が2つ横に並んで表示、スマホの時はレスポンシブ広告が一つだけ表示します。

テーマの幅が狭い時やレクタングルの大きさによっては、上記の方法では横並びしない場合があるので、お使いのテーマの幅を広げるか、幅に合った広告サイズを選びましょう。