STINGER5の記事下に設置されたアドセンスを横並びのダブルレクタングルに変更する方法。

2014年11月15日2015年5月9日

photo credit: keso via photopin cc

前回の記事でSTINGER5のサイドバーのカスタマイズ方法を書きました。

サイドバーから始めよう！STINGER5の導入と同時にカスタマイズしたところとその方法。

先日、BloggerからWordPress+STINGER5に引越しましたが、その数日後にBloggerが落ちて閲覧できなくなるという事態が発生。改めてWordPress...

2014.11.12

一通りカスタマイズを終えた後、どうしても気になったのが記事下にあるアドセンスの配置。

2つのアドセンスを縦に積み上げるデフォルトの状態でも良かったのですが、同じサイズのアドセンスを2つ横並びにするダブルレクタングルに変更したのでその方法を紹介します。

デフォルトのSTINGER5では記事下にあるアドセンス（336×280px）は縦に二つ配置されています。STINGER5の製作者・ENJIさん（@ENJILOG）によるとこの配置が最も効果が高いとのことなのでそのままでも良かったのですが、実験も兼ねてアドセンスを横並びにする”ダブルレクタングル”に変更しました。

なお、336×280pxのアドセンスを横に並べると記事部分の幅が広くなりすぎて文字の折り返しまでが長くなってしまうので、アドセンスのサイズは300×250pxに変更します。

それでは、変更作業を順を追って説明しましょう。

1.アドセンスを横並びにするためSTINGER5の記事部分の横幅を変更する

STINGER5のデフォルトのレイアウトがこちら。

記事部分の横幅が580pxしかなく、そのままだと300×250pxのアドセンスを横並びにすることができないので横幅を600px以上に広げる必要があります。

さらにアドセンス同士がぴったりと隣接しないようにアドセンス間の余白を10px取りたいのでSTINGER5のレイアウトを以下のように変更します。

記事部分の幅：610px（うち10pxがアドセンス間の余白）
記事部分の左右のパディング：片側40px（合計80px）
サイドバーの幅：300px
記事部分とサイドバー間の余白：20px

でコンテンツ全体の幅の合計が1010pxとなるのでstyle.css内の985行目あたりにある

#wrapper {
　max-width: 980px; 
　padding: 0 10px;
　margin: 0 auto;
}

#wrapper {

　max-width: 980px;

　padding: 0 10px;

　margin: 0 auto;

}

のmax-widthを1010pxに変更します。

#wrapper {
　max-width: 1010px;
　padding: 0 10px;
　margin: 0 auto;
}

#wrapper {

　max-width: 1010px;

　padding: 0 10px;

　margin: 0 auto;

}

これで記事部分の横幅を広げる作業は終了です。

2.STINGER5のCSSファイルを変更してアドセンスを横並びにする

アドセンスを横並びにする方法として左側のアドセンスをfloat: left、右側のアドセンスをfloat: rightで左右に振り分けることにしたのでstyle.cssファイル内に以下を追記します。

さらに、2つのアドセンスをfloatさせたことで高さを失ってしまい追従する要素（僕のブログの場合はSNSボタン）がせり上がってしまうので２つのアドセンスをdiv要素で内包し、クラス名を「gad」として250pxの高さを指定して高さを維持します。

/*記事下 左側のアドセンス*/
.gadLeft {
　float: left;
}

/*記事下 右側のアドセンス*/
.gadRight {
　float: right;
}

/*記事下 アドセンスの高さを維持*/ 
.gad {
　height: 250px;
}

/*記事下左側のアドセンス*/

.gadLeft {

　float: left;

}

/*記事下右側のアドセンス*/

.gadRight {

　float: right;

}

/*記事下アドセンスの高さを維持*/

.gad {

　height: 250px;

}

3.PHPファイルを修正してSTINGER5の記事下に2つのアドセンスを表示させる

single.php内の52行目あたりにあるアドセンスのコードを読み込んでいる部分を

<div style="padding:20px 0px;">
　<?php get_template_part('ad'); //アドセンス読み込み ?>
　<?php if(is_mobile()) { //スマホの場合 ?>
　<?php } else { //PCの場合 ?>
　<div class="smanone" style="padding-top:10px;">
　　<?php get_template_part('ad'); //アドセンス読み込み ?>
　</div>
　<?php } ?>
</div>

　<?php get_template_part('ad'); //アドセンス読み込み ?>

　<?php if(is_mobile()) { //スマホの場合 ?>

　<?php } else { //PCの場合 ?>

　　<?php get_template_part('ad'); //アドセンス読み込み ?>

　</div>

　<?php } ?>

</div>

から

<div style="padding:20px 0px;">
　<?php if(is_mobile()) { //モバイルの場合 ?>
  <?php } else { ?>
    <div style="padding:20px 0px;”>
      <div class=“gad”>
        <div class=“gadLeft">
        　<?php get_template_part('ad'); //左側のアドセンス読み込み ?>
        </div>
      　<div class=“gadRight">
          <?php get_template_part('ad'); //右側のアドセンス読み込み ?>
        </div>
      </div>
   <?php } ?>
</div>