レスポンシブ対応！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切り替え)・始まり -->
<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つ横に並んで表示、スマホの時はレスポンシブ広告が一つだけ表示します。

おわりに

WordPressで広告を横に二つ並べる方法をご紹介しました。広告以外にもテキストや画像も横に並べることができます。