Xeory Base：記事下にアドセンスを横並び（ダブルレレクタングル）にするカスタマイズ

WordPress無料テーマ「Xeory Base」で、記事下にアドセンス広告を入れ、かつそのアドセンス広告を横並びに２つ表示する（ダブルレクタングル）カスタマイズを紹介します。

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

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

PC画面では、個別投稿記事の下（ソーシャメディアとの連携の上）に、上の画像のように横並びに２つアドセンス広告が表示されるようになります。

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

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

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

1 個別投稿(single.php）へコードを挿入
2 スタイルシート(style.css）へコードを挿入

個別投稿(single.php）へコードを挿入

WordPress管理画面の「外観」→「テーマの編集」から、右端にある「個別投稿（single.php）」ファイルを開きます。

個別投稿（single.php）ファイルの中で、

<?php the_content(); ?>

</section>

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

</section>に下記のコードを貼り付けます。



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

}