Stinger3子テーマ「CANDY CRAZY」で広告を２つ並べる方法。

WordPressテーマのStinger3、そしてその子テーマである「CANDY CRAZY」を導入し、順調にいろいろ貪っていたのですが、突然カベにぶち当たってしまいました……。

http://dmgadget.info/wordpress-adsense/dmgadget.info

こちらを参考にさせていただいて、googleアドセンス広告を記事下に2つ並べる“ダブルレクタングル”をやってみようと試してみたんですが……

〜WordPressカスタマイズ備忘録 その1〜

ところどころ、数値や表記が違っててうまくいかない！

Stinger3の子テーマであるCANDY CRAZYは、それ自体が記事の幅や配置がStinger3から改編されているので、参考記事どおりにやってもうまくいかないんですよね。

どうしてもダブルレクタングルにならず、レイアウトが大きく崩れてしまいます。

う〜ん、こちとらコピペするのが精一杯の素人なんで、スタイルシートを読み解いて臨機応変に対処するなんてできないんだぜぇ〜(T_T)

どうしたもんかなぁ〜 ・ ・ ・ できましたｗｗｗ

試行錯誤すること◯日、なんとか形になりました。

というわけで、忘れないうちにやり方を書き留めておきます。

記事幅の変更

まずは記事幅の変更です。子テーマCANDY CRAZYのstyle.cssを編集して記事幅を広げます。

変更するのは「ヘッダーのカスタマイズ」部分の

#container #header #header-in #h-l h1 {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: normal;
  line-height: 8px;
  margin: 10px auto 0;
  padding: 10px 0 10px 10px;
  text-align: right;
  width: 986px;
}
#h-l .descr {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: normal;
  line-height: 8px;
  margin: 10px auto 0;
  padding: 10px 0 10px 10px;
  text-align: right;
  width: 986px;
}
#container #header #header-in #h-l .sitename {
  font-size: 55px;
  line-height: 1.2;
  margin: 10px auto 0;
  text-align: left;
  width: 986px;

“986px”３ヶ所を“1000px”に書き換えます。

#container #header #header-in #h-l h1 {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: normal;
  line-height: 8px;
  margin: 10px auto 0;
  padding: 10px 0 10px 10px;
  text-align: right;
  width: 1000px;
}
#h-l .descr {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: normal;
  line-height: 8px;
  margin: 10px auto 0;
  padding: 10px 0 10px 10px;
  text-align: right;
  width: 1000px;
}
#container #header #header-in #h-l .sitename {
  font-size: 55px;
  line-height: 1.2;
  margin: 10px auto 0;
  text-align: left;
  width: 1000px;

それと、「基本設定のカスタマイズ」の

#wrap #wrap-in #main {
  background-color: #FFFFFF;
  border: none;
  padding: 35px 10px;
  width: 600px;
}

こちらを

#wrap #wrap-in #main {
  background-color: #FFFFFF;
  border: none;
  width: 605px;
  padding: 35px 10px;
  padding-right: 20px;
  padding-left: 20px;
}

と書き換えます。

引用（blockquote)とコメント欄の変更

参考記事に書かれているとおり、引用文やコメント欄が左にとびだしてしまうのですが、こちらも数字の調整が必要でした。

引用文の場合、「記事表示のカスタマイズ」の

.post blockquote {
  background-color: #F3F3F3;
  background-image: url("images/quote.png");
  background-position: left top;
  background-repeat: no-repeat;
  border-left: 20px solid #E9E9E9;
  margin: 20px 0 20px -40px;
  padding: 70px 20px 20px;
}

こちらのmargin:を

.post blockquote {
  background-color: #F3F3F3;
  background-image: url("images/quote.png");
  background-position: left top;
  background-repeat: no-repeat;
  border-left: 20px solid #E9E9E9;
  margin: 20px 0 20px 0px;
  padding: 70px 20px 20px;
}

としました。

また、コメント欄は「コメントのカスタマイズ」の

#comments {
  background-color: #EEEEEE;
  border-left: 1px solid #FF2D55;
}

こちらに１行追加して

#comments {
  background-color: #EEEEEE;
  border-left: 1px solid #FF2D55;
  margin: 20px 0 20px 0px;

としました。

ダブルレクタングルの設置

続いて記事下にダブルレクタングルを表示する設定ですが、こちらは別のサイトを参考にさせていただきました。

kotukotu.boo.jp

まずはこちらのコードをテキストエディタにコピーします。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
スマホ用の記述
<?php else: ?>
PC用の記述
<?php endif; ?>

次に、レクタングル(中)の広告を「スマホ用」「PC記事下ダブルレクタング左」「PC記事下ダブルレクタングル右」と３つ、Google Adsenseアカウントで作り、さきほどのコードのそれぞれに挿入します。つまり

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- スマホ用 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php else: ?>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- PC記事下ダブルレクタング左 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- PC記事下ダブルレクタングル右 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php endif; ?>

となります。（*部分は任意の数字になります。）

そして、single.phpをエディタで開き、50行目の

    <?php get_template_part('ad');?>

を消して、その箇所にさきほどのコードをペーストします。

レイアウトの調整

設置した広告が縦に２つ表示されてしまうので、style.cssの最後に以下の分を追加します。

/*---------------------------------
アドセンス用のダブルレクタングル設定
--------------------------------*/
 div #ad-bottom-oya{
padding:5px 0px 5px 0px;
height:250px;
margin-bottom: 30px;}
 
div #ad-bottom-left{
float:left;}
 
div #ad-bottom-right{
float:right;}

いかがでしょうか？これで個別の記事下にGoogleアドセンス広告が２つ、横並びで表示されるはずです。

最後に、single.phpの115行目

    <?php get_template_part('ad');?>

を削除して余分なアドセンス広告が表示されないようにしておきましょう。

おつかれさまでした。