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

WordPressの記事下にアドセンス広告を横並び(ダブルレクタングル)で2つ並べているサイトが多いので、広告を2つ横並びで設置する方法も紹介しておきます。もちろんアドセンスだけでなく、他の広告バナーや普通の画像でも可能です。

ダブルレクタングル-1

ちなみにStinger系のテーマを利用している場合にはやり方が違ってくるのでこちらの記事を参考に。
Stinger5で記事下のアドセンスを横並び(ダブルレクタングル)にする方法

それではWordPressの記事下に横並びの広告を設置する手順を解説してみましょう。

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

先に注意点を書いておくと、広告を横に並べるので当然コンテンツの横幅が狭いと無理。例えばコンテンツの横幅が600pxなのに、横幅336pxの広告を2つ並べる事はできませんよね。

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

例えば300pxの横幅の広告を2つ並べるならコンテンツの横幅が620px以上あればいいかな。使っているテーマによって横幅が違うので一応チェックし、必要ならコンテンツの横幅を広くしておきましょう。
TwentyTwelveの横幅やサイドバーの幅を変更する方法

それからPCページではアドセンス2つ横並びえはOKですが、スマートフォンではスクロールせずに見える1画面に2つのアドセンスが表示されるのはNGなので、「PC」では2つ横並び、「スマートフォン」では1つだけ表示されるように条件分岐が必要ですので、それも覚えておきましょう。

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

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

横幅がよく分からないという場合にはとりあえず横幅300pxの広告を2つ用意しておいて、試しに設置してみてもいいかも。広告のコードを取得してメモ帳などに貼り付けて準備しておきます。ちなみにスマートフォン用の広告サイズは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では2つの広告、スマートフォンでは1つの広告という設置自体はこれで完了ですが、このままだと縦並びになっているので、スタイルシート(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;  /* 右に余白(2つの広告の間の余白) */
}
 
/* 広告右 */
.ad-bottom-right{
     float:left;  /* これも広告の左寄せ */
}

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

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

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

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

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

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

それから今回ここで「wp_is_mobile」という関数を使って条件分岐しましたが、この場合は「PCページ」と「スマートフォン&タブレット」という分け方になってしまいます。タブレットって横幅があるのでタブレットでの表示はPCと同じにしたいという場合には次の記事を参考にして下さい。
WordPressの条件分岐でスマートフォンとタブレットを分ける方法

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。