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つ表示する(ダブルレクタングル)カスタマイズを紹介を終わります。