記事下にアドセンスを横並び表示してスマホと表示を切り替える【賢威７】

アドセンスの配置について悩んでいましたが、多くのニュースメディアでレクタングル大を記事下に横並び表示させています。

様々なテストを行った結果、収益見込みが高いのでダブルレクタングルにしているのだと思います。

そこでこのブログでも記事下にアドセンスを横並び表示させることにしました。

アドセンスのレクタングル横並び表示でやりたいこと

そこで、PCでは記事下にレクタングル大を2つ横並び表示。

けれどこのままだとスマホで画面上に2つの広告が表示され規約違反になります。

※広告の配置に関するポリシーが変更され、現在はスマホ画面に2つ以上アドセンス広告が表示されても規約違反ではなくなりました。

 

 

そこでPCとスマホの表示を切り替え、スマホではレクタングル大ではなく、モバイル推奨とされているレクタングル（300×250）を1つ表示させたいと思います。

コードを追加する位置

アドセンスを配置する場所は投稿ページの記事下、ソーシャルボタンの上が個人的には理想的。

投稿ページはどのテーマでもだいたいsingle.phpだと思います。

賢威7を利用しているので賢威7を前提にすると、single.phpの本文下のソーシャルボタンを呼び出す、

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

このコードの上に追加します。

 

single.phpに追加するコード

わたぼんさんの「WordPressでアドセンス広告を横並びに設置する方法と注意するべきポイント」に書かれているコードを使わせてもらいました。

<!-- 本文記事下の横並びアドセンス(スマホ/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; ?>
<!-- アドセンス終了 -->

このコードを賢威7では

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

の上に追加すると、ソーシャルボタンの上に表示されます。

 

<?php if (wp_is_mobile()) :?>
<div class="sm-ad-bottom">
スマホ用アドセンス

 

コードを見ると、モバイルの場合に表示するコード。

<?php else: ?>

それ以外（モバイル以外）の場合に表示するコードと、条件分岐タグを使用してスマホとPCの表示が切り替わるようになっています。

ただこのコードだけでは縦にレクタングル大が2つ表示されるだけなので、スタイルシートで表示を整える必要があります。

スタイルシートに追加するコード

style.css（賢威7ではbase.css)に以下のコードを追加します。

/* ----------------------------------------------------
 アドセンス記事下ダブルレク大
-----------------------------------------------------*/

/* スポンサードリンクというラベルの部分 */
.ad-bottom-label {
text-align:center;  /* ラベルを中央寄せ */
margin-top:30px;  /* 上に余白 */
}
/* 横並び広告全体部分 */
.ad-bottom-main {
margin-top:20px;  /* 上に余白（ラベルとの距離） */
margin-bottom:50px;  /* 下に余白（下のコンテンツとの距離） */
}

/* モバイル表示部分 */
.sm-ad-bottom {
margin-top:20px;  /* 上に余白（ラベルとの距離） */
margin-bottom:30px;  /* 下に余白（下のコンテンツとの距離） */
text-align:center;  /* 広告を中央寄せ */
}

/* 広告左 */
.ad-bottom-left{
float:left;  /* 広告を左寄せ */
margin-right:10px;  /* 右に余白（２つの広告の間の余白） */
}

/* 広告右 */
.ad-bottom-right{
float:left;  /* これも広告の左寄せ */
}

/* 最後に左寄せを解除するための記述 */
.ad-bottom-main:after {
content:"";
display:block;
clear:both;
}

 

これでPCではレクタングル大が横並び表示され、スマホではレクタングルが1つ記事下に表示されるようになります。

上下の間隔を広げたい場合、margin-topとmargin-bottomの数値を変えれば広告とソーシャルボタンや記事本文との間隔を変えられます。

参考にしたソースコードだと表示される広告の位置が指定されていないので、スマホでも中央表示されるようにコードを付けたしました。

PCでも中央に寄せよう思いましたが、つまずいたことがあるので当分はこの間までにしておこうと思います。

 

PC表示での問題点

1カラムのみ、あるいは2カラムのみを使用するなら問題はないです。

けれど通常は2カラムを使用し、特定の記事だけ1カラムの記事にしたい場合に問題が生じます。

表示を中央に寄せたい場合、.ad-bottom-leftにmargin-leftを記述すれば調節できます。

ただ、1カラムと2カラムでは記事幅が異なるので、margin-leftでは同時に指定できません。

スマホ表示ではtext-align:center;をCSSに追加してアドセンスを中央寄せできましたが、PCではfloatを使用しているためなのか中央に寄せることができませんでした。

margin: 0 auto;でも上手くいきません。

1カラムを使用することは多分ないと思いますが、もはや手に負えません（笑）。
異なるカラム数のページがなければ問題はないので、しばらくはこのままでいようと思います。

今回はレクタングルの横並び表示について書きましたが、賢威7にインフィード広告を表示させる方法も書いています。

賢威７の一覧ページにアドセンスのインフィード広告を配置する方法と注意点

今日のたつじんへの一歩