Xeory Base：トップページ下にアドセンスを２つ横並びにするカスタマイズ

前回の記事「Xeory Base：記事下にアドセンスを横並び（ダブルレレクタングル）にするカスタマイズ」は他のページにも応用することが可能です。

同じ方法で、トップページ下にアドセンス広告を入れ、かつそのアドセンス広告を横並びに２つ表示する（ダブルレクタングル）ことができます。

今回はトップページ下に横並びで２つアドセンス広告を表示するカスタマイズを紹介します。

今回のカスタマイズも、こちらのサイト「アフィリエイトで稼ぐ方法を全部話そうと思う」様のやり方を使用させていただきました。

このカスタマイズをすることにより、

PC画面では、トップページの下（フッター上部にあるメニューの上）に、上の画像のように横並びに２つアドセンス広告が表示されるようになります。

またモバイル画面では、１つだけ広告が表示されるようになります。

※ファイルを直接いじる場合には、事前にバックアップをとっておくことをお勧めします。ファイルの改変は全て自己責任でお願いいたします。（詳しくはトップページのメニューにある利用上の注意をご覧ください。）

それでは、「Xeory Base」で、トップページ下にアドセンス広告を入れ、かつそのアドセンス広告を横並びに２つ表示する（ダブルレクタングル）カスタマイズのやり方を紹介します。

1 メインインデックスのテンプレート(index.php）へコードを挿入
2 スタイルシート(style.css）へコードを挿入

メインインデックスのテンプレート(index.php）へコードを挿入

WordPress管理画面の「外観」→「テーマの編集」から、右端にある「メインインデックスのテンプレート（index.php）」ファイルを開きます。

メインインデックスのテンプレート（index.php）ファイルの中で、

<?php

endif;

と書いてある部分を探します。

その下に下記のコードを貼り付けます。



<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; ?>

コードと記載がある部分には、自分のアドセンスコードを貼り付けます。

アドセンス広告はサイズが大きい方が良いと言われているため、今回私は、

スマートフォン用コード：300×250

左と右に配置する広告コード：336×280

を貼りつけることにしました。

広告サイズはお好きなよう決めてください。

コードを追加した後「ファイルを更新」ボタンを押すと反映されます。

現時点では、個別投稿の下に広告を２つ設置しただけ（PC版の場合）です。

縦に２つ広告が表示されている状態で大丈夫です。

スタイルシート(style.css）へコードを挿入

次に、PC版の画面での広告が２つ横並びに表示されるように、スタイルシート（style.css）を書き換えます。

（すでに他のページにダブルレクタングルを入れ、スタイルシートを書き換えている場合には今回書き換える必要はありません。）

WordPress管理画面の「外観」→「テーマの編集」から、右端にある「スタイルシート（style.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; /* 右に余白（２つの広告の間の余白） */

}

/* 広告右 */

.ad-bottom-right{

     float:left; /* これも広告の左寄せ */

}

/* 最後に左寄せを解除するための記述 */

.ad-bottom-main:after {

  content:"";

  display:block;

  clear:both;

}