※ 当サイトではアフィリエイト広告を利用しています。

WordPressにアドセンス広告を横並び（ダブルレクタングル）で設置する方法

Googleアドセンス
2015.07.25

今回はWordPressので広告や画像を２つ横並びで設置する方法解説していきます。

ダブルレクタングル

↑PCで見た時に横並び、スマホで見る時は縦に並びます。

著作情報
この記事を書いた人

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

sigezoをフォローする

広告横並びにする時の注意点

先に注意点を書いておくと、広告を横に並べるので当然コンテンツの横幅が狭いと無理。

例えばコンテンツの横幅が600pxなのに、横幅336pxの広告を2つ並べる事はできませんよね。

なので、先に設置する広告の横幅とコンテンツの横幅を調べておく必要があります。また、横に並べる２つ広告には隙間というか広告と広告の間の余白を作るので、20px程度余裕をもって設定しておく必要があります。

例えば300pxの横幅の広告を２つ並べるならコンテンツの横幅が620px以上あればOKです。

使っているテーマによって横幅が違うので一応チェックし、必要ならコンテンツの横幅を広くしておきましょう。

アドセンス広告設置の準備

先ほども書いたように、コンテンツの横幅のチェックし、それに合う横幅の広告コードを用意しておきます（PC用に２つとスマートフォン用に１つ）。

横幅がよく分からないという場合にはとりあえず横幅300pxの広告を２つ用意しておいて、試しに設置してみてもいいかも。広告のコードを取得してメモ帳などに貼り付けて準備しておきます。ちなみにスマートフォン用の広告サイズは300×250で用意しておくとちょうどいい感じ。

後は記事下など広告を設置する場所を確認しておきます。WordPressなら「single.php（個別ページ）」に設置するのが一般的なので、「single.php」のどこに広告を設置すればいいのか事前に確認が必要です。

設置する場所テーマによって違う場合が多いが、一応このブログで利用しているテーマ「Twenty Twelve」の場合、記事下に広告を設置するには「single.php」の次のコードを探します。

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

「get_template_part」で「content.php」を呼び出すというコードなので、似たような部分を探してみて下さい。

もしこのコードがない場合には適当な位置に「テスト」とテキストを入れて保存し、表示される場所を確認してみると確実です。

先ほどの「content.php」を呼び出すコードの直後に次のコードを入れます（single.php）。

<!-- 本文記事下の横並びアドセンス(スマホ/PC切り替え) -->
<p class="ad-bottom-label">スポンサーリンク</p>

<?php if (wp_is_mobile()) :?>
<div class="sm-ad-bottom">
ここにスマートフォン用の広告コード
</div>

<?php else: ?>

<div class="ad-bottom-main">

<div class="ad-bottom-left">
 
ここに左に設置する広告コード
 
</div>

<div class="ad-bottom-right">
 
ここに右に設置する広告コード
 
</div></div><?php endif; ?>

追加できたら一度「保存」。これでPCでは２つの広告、スマートフォンでは１つの広告という設置自体はこれで完了ですが、このままだと縦並びになっているので、スタイルシート（CSS）で横並びになるように調整していきます。

広告の位置調整で横並びに

スタイルシート（CSS）の一番下に次のコードを追加。

/* スポンサードリンクというラベルの部分 */
.ad-bottom-label {
  text-align:center;  /* ラベルを中央寄せ */
  margin-top:15px;  /* 上に余白 */
}

/* 横並び広告全体部分 */
.ad-bottom-main {
  margin-top:20px;  /* 上に余白（ラベルとの距離） */
  margin-bottom:20px;  /* 下に余白（下のコンテンツとの距離） */
}

/* 広告左 */
.ad-bottom-left{
     float:left;  /* 広告を左寄せ */
     margin-right:10px;  /* 右に余白（２つの広告の間の余白） */
}
 
/* 広告右 */
.ad-bottom-right{
     float:left;  /* これも広告の左寄せ */
}

/* 最後に左寄せを解除するための記述 */
.ad-bottom-main:after {
  content:"";
  display:block;
  clear:both;
}

これで一度保存して、サイトを表示させ、「F5」を押してリロードさせて確認（個別記事ね）。コンテンツの横幅が十分ならこれで広告は横並びになっているはずです。

一応PCで２つの広告が横並びになっていて、スマートフォンでは記事下に１つだけ広告が表示されているのを確認しておきましょう。

もしスマートフォンで広告が右横にはみ出しているような場合にはスタイルシートの最後に次の記述を追加。

@media screen and (max-width:599px){
.ad-bottom-sm{margin-left:-10px}
}

マイナスのmarginにしているので、数値を大きくする程左に移動させる事ができます。「-10px」か「-15px」くらいにしておけばスマートフォンページの広告ははみ出さずに設置できます。

さらに記事下だけでなく別の場所、記事中とかヘッダーとかサイドバーにもアドセンスを設置したいという場合にはこの記事へ。
⇒WordPressにアドセンス広告を設置する方法

コメント