賢威7：記事本文の後にアドセンス広告を横並び表示する方法（ダブルレクタングル）

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、WordPressテーマ：賢威7サイトの記事本文の後に、広告を2つ横並びにする方法を紹介したいと思います。

「ダブルレクタングル」なんて呼ばれたりもしているみたいですが、ブログサイトでよく見かけるやつです。広告を横に2つ並べたらクリック率が上がった！という話も聞いたりしますし、追加する広告コードを変えればアドセンス以外の広告も表示させることもできます。

また、ここではテーマファイルを編集して広告コードを追加していくので、一記事ずつ広告コードを追加していく手間もかかりません。なんだかセールストークみたいになってしまいましたけど、自分的には結構オススメなカスタマイズなので、よかったら参考にしてみて下さい。

2016年3月12日追記

読者の方から336✕280（レクダングル大）の場合について質問をいただいたので、336✕280のサイズでダブルレクタングルにする方法を追記しました。

カスタマイズ前

↓　今回広告を追加する場所

カスタマイズ後

↓ PCサイズでは横並び

↓ 幅を狭めると縦並びに

1. single.php を編集

まずは個別記事（投稿）に広告を表示させる方法です。

今回のカスタマイズでは本文の後にアドセンスなどの広告を表示させたいので、個別記事を表示させる single.php を編集していきます。single.php の53行目付近に以下のコードがあるので、

<?php if (the_keni('social_post_view') == "y") get_template_part('social-button2'); ?>

このコードの下に、以下のコードを追加します。下のコードにある「広告コード（300px＊250px）」の部分には、広告を表示させるコードを入力して下さい。サイズが合えば、アドセンス以外のコードを入力しても大丈夫です。

<div class="content-ad-wrap">
    <div class="content-ad">
        広告コード（300px＊250px）
    </div>
    <div class="content-ad">
        広告コード（300px＊250px）
    </div>
</div>

コード編集後、single.php を保存してページを読み込むと下の画像のようになりました。広告はどの個別ページにも表示されるようになりましたが、縦に2つ並んだ状態です。

2. CSSファイルを編集

本文の後に広告を2つ表示させることができたので、今度はCSSファイルを編集して見た目を整えていきます。

親テーマ（賢威7本体）の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加します。

.content-ad-wrap:before {
    content: "";
    display: table;
}
.content-ad-wrap:after {
    content: "";
    display: table;
    clear: both;
}
.content-ad-wrap {
    width: 100%;
    text-align: center;
}
.content-ad {
    margin-bottom: 30px;
}
@media only screen and (min-width : 1200px){
    .content-ad {
        width: 48%;
        float: left;
    }
}

保存・更新すると、広告が2つ横並びで表示されるようになりました。

ブラウザの幅を狭めると、縦に中央配置されるようになります。

2-1. PCサイズは左寄せ、それ以外は中央寄せにするには

先ほどのコードは、PCサイズでもそれ以外でも中央寄せにしましたが、「PCサイズでは左寄せ」、「それ以外のサイズでは中央寄せ」にするには、先ほどのCSSコードを以下のコードで置き換えます。

.content-ad-wrap:before {
    content: "";
    display: table;
}
.content-ad-wrap:after {
    content: "";
    display: table;
    clear: both;
}
.content-ad-wrap {
    width: 100%;
    text-align: center;
}
.content-ad {
    margin-bottom: 30px;
}
@media only screen and (min-width : 1200px){
    .content-ad-wrap {
        text-align: left;
    }
    .content-ad {
        width: 48%;
        float: left;
    }
}

違いが分かりにくいかもしれませんが、左側の広告がTwitterや「タグ」と書かれた文字の左端に揃いました。ブラウザの幅を狭めると、先ほどと同じように中央配置されます。

3. 固定ページにも同じように広告を表示させるには

今度は固定ページにも広告を横に2つ表示させる方法です。「方法」と言っても、個別記事でも固定ページでもテーマファイルはあまり変わらないので、ここでの編集内容は全く同じです。

page.php の52行目付近に以下のコードがあるので、

<?php if (the_keni('social_page_view') == "y") get_template_part('social-button2'); ?>

このコードの下に、以下のコードを追加します。下のコードにある「広告コード（300px＊250px）」の部分には、アドセンスなどの広告を表示させるコードを入力して下さい。

<div class="content-ad-wrap">
    <div class="content-ad">
        広告コード（300px＊250px）
    </div>
    <div class="content-ad">
        広告コード（300px＊250px）
    </div>
</div>

↓　page.php 編集後

これで固定ページにも同じようにダブルレクタングルの広告が表示されるようになりました。

4. 広告コードを一記事ずつ編集→追加する場合

最後はPHPファイルを編集せずに、それぞれの記事ごとに広告コードを追加する方法です。

この場合でも、PHPファイルを編集する場合とはコードを追加する場所が違うだけなので、広告を表示させたい位置で以下のコードを追加します。

<div class="content-ad-wrap">
    <div class="content-ad">
        広告コード（300px＊250px）
    </div>
    <div class="content-ad">
        広告コード（300px＊250px）
    </div>
</div>

上のコードを本文などに追加すると、下のような感じで横並びの広告を表示させることができます。

5. 336✕280（レクダングル大）を使用する場合

2016年3月12日追記

336✕280（レクダングル大）を使用する場合については余白がかなり狭くなってしまうので、下のように広告と広告の間の余白を広めに開けるコードを追加すると良いかもしれません。

※ 4%の部分は 100% – 48% x 2 = 4% で計算しています。

.content-ad-wrap:before {
    content: "";
    display: table;
}
.content-ad-wrap:after {
    content: "";
    display: table;
    clear: both;
}
.content-ad-wrap {
    width: 100%;
    text-align: center;
}
.content-ad {
    margin-bottom: 30px;
}
.content-ad:first-child {
    margin-right: 4%;
}
@media only screen and (min-width : 1200px){
    .content-ad-wrap {
        text-align: left;
    }
    .content-ad {
        width: 48%;
        float: left;
    }
}

ちなみにメインコンテンツの横幅を広げるともっと横幅に余裕ができるので、336✕280のような大きめサイズでは下のような横幅を広げるカスタマイズもオススメです。良かったら試してみてください。

おすすめ記事