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

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

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

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

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

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

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

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

スポンサーリンク

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

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

個別投稿(single.php)ファイルの中で、

<?php the_content(); ?>

</section>

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

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

<!-- 本文記事下の横並びアドセンス(スマホ/PC切り替え) -->
<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

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

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

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

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

このように縦に2つ広告が表示されている状態で大丈夫です。

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

次に、PC版の画面での広告が2つ横並びに表示されるように、スタイルシート(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/* 右に余白(2つの広告の間の余白) */
}
 
/* 広告右 */
.ad-bottom-right{
     float:left/* これも広告の左寄せ */
}
/* 最後に左寄せを解除するための記述 */
.ad-bottom-main:after {
  content:"";
  display:block;
  clear:both;
}

一番下にある「ファイルの更新」ボタンを押すと反映されます。

このように2つ横並びに表示されます。(PC版)

モバイルでも確認すると1つだけ広告が表示されていると思います。

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