【Stinger3カスタマイズ備忘録】Adsenseを並列表示させる方法

ブログ

2014.04.072015.05.24

WordPress用の無料テンプレート「Stinger 3」で記事タイトル下や記事下にAdsenseなどを並列させて表示させる方法を備忘録メモ。

デフォルトの広告はサイト右上のスペースのみStinger3のウィジット機能で表示させていますが、タイトル下や記事下に表示させるためにはテンプレートを順に修正していきます。

参考にしたのは以下のサイト。非常に明快で助かりました。

「STINGER3でアドセンスのPC版表示を横並びのレクタングルにする設定」
「アドセンス収益が2倍に！STINGER3でブログ収益アップするためのカスタマイズ #Stinger-WP」
「超初心者のためのWordPressスタートの記録~アドセンスを並べました→見出しのズレを直しました」

作業を開始するにあたりレイアウトを考える

Stinger3はPC版とスマホ版とでAdsenseの表示方法が異なるため、最終的なできあがりをイメージしておく必要があります。

今回は以下の通りでまず作成することにしました。

①ＰＣ版(計3箇所）

・右上にデフォルトAdsense
・タイトル下記事上に300X250サイズと楽天同サイズを並べて2枚(ダブルレクタングル）
・記事下に300X250サイズと楽天同サイズを並べて2枚(ダブルレクタングル)

②スマホ版（計3箇所）
・タイトル下記事上に300X250サイズと楽天同サイズを並べて2枚(ダブルレクタングル）
・本文記事下に300×250サイズ1枚
・関連記事下に300×250サイズ1枚

コードを取得する

Adsenseや楽天モーションウィジットのコードをそれぞれのサイズで取得します。
コードはできれば効果測定するためにもそれぞれ別で取得します。

記事タイトル下や記事下に広告設置（PC用とスマホ用の切り替え方法)

Stinger3ではPC版とスマホ版ではレイアウト上、広告表示のソースを分けています。
そのためのソースがこちら。

この事例ではPC版ではAdsenseと楽天モーションウィジットを並列して表示し、スマホではAdsenseのみ１つ表示するようにしています。

<!-- 本文記事下のアドセンス・楽天(スマホ/PC切り替え) -->
<?php if (wp_is_mobile()) :?>
スマホ用(300x250)のAdsenseコードを記載 
<?php else: ?><div style="padding:20px 0px;">
<div id="ad-bottom-oya"><div id="ad-bottom-left">
　PC用・左(300x250)Adsenseコードを記載
</div><div id="ad-bottom-right">
 PC用・左(300x250)楽天コードを記載
</div></div></div><?php endif; ?>

ソース修正場所について

３のソースを既存のソースと置き換えます。その際、バックアップを取るようにしておくと万が一の時にも安心です。
具体的には、single.phpの記事下、関連記事に記載されている「<?php get_template_part(‘ad’);?>」の部分を上記のPC版スマホ版の広告切替コードに差し替えます。

尚、関連記事下に記載されているAdsenseの広告部分は、スマホ用だけ残しておきます。
（PC版は右上とダブルレクタングルで計３つ広告枠をつかってしまうため、関連記事下は削除しておきます）

サイトのレイアウト幅の調整について

ただこの並列するためのソースを置き換えただけではデフォルトのStinger3では表示されません。これはサイトの幅が並列記述したダブルレクタングルの幅とあっていないためです。そのため、本文のカラムを広げる必要があります。
ダブルレクタングルにするためにStinger3のstyle.cssをカスタマイズして記事の横幅を広げます。

具体的な修正箇所はこちら。

#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
width: 986px; ⇒1000px
margin-right: auto;
margin-left: auto;
}
#wrap #wrap-in #main {
float: left;
width: 550px; ⇒605px
padding-right: 39px; ⇒20px
padding-left: 39px; ⇒20px
padding-top: 20px;
border: 1px solid #ccc;
background-color: #FFF;
border-radius: 4px 4px 4px 4px;
padding-bottom: 20px;
}

その他の調整項目について

その他、見出しがすれるので、h2、コメント、引用の部分（いずれもstyle.css内）も若干ソース修正する必要があります。

具体的な修正方法はこちら

まずh2です。

h2 {
     font-size: 24px;
     padding-top: 5px;
     padding-right: 10px;
     padding-bottom: 5px;
     padding-left: 35px;
     border-left-width: 5px;
     border-left-style: solid;
     border-left-color: #1a1a1a;
     color: #333;
     line-height: 30px;
     margin-top: 20px;
     margin-right: 0px;
     margin-bottom: 20px;
     margin-left: -40px; ⇒-20px

}

次に引用。

/*引用*/
.post blockquote {
     background-color: #f3f3f3;
     background-image: url(images/quote.png);
     background-repeat: no-repeat;
     background-position: left top;
     padding-top: 70px;
     padding-right: 20px;
     padding-bottom: 20px;
     padding-left: 40px;
     margin-top: 20px;
     margin-right: 20px;
     margin-bottom: 20px;
     margin-left: -40px; ⇒-20px
     border-left-width: 1px;
     border-left-style: solid;
     border-left-color: #CCC;
}

最後にコメント。

#comments {
     font-size: 14px;
     line-height: 20px;
     color: #333;
     background-color: #EDF2FA;
     margin-left: -40px; ⇒-20px
     padding-top: 10px;
     padding-right: 20px;
     padding-bottom: 10px;
     padding-left: 50px;
     margin-bottom: 20px;
     border-left-width: 1px;
     border-left-style: solid;
     border-left-color: #5484D2;
}