アドセンス広告を投稿の下に２つ配置する方法とスマホ対応

2015年11月12日

現時点(2015/11/12)では、テーマをXeoryを使っているんですが、非常にシンプルなのでしっかりとAdsenseの広告を二つ配置して、広告収益をより高めるために、カスタマイズしていきたいと思います。

目的

良く見かけると思いますが、PCで表示した時に投稿の下に二つアドセンス広告が出るようにしたいと思います。その方が収益性が高まるとのことなので。

但し、シンプルにやってしまうとスマホで綺麗に表示されないため、PCの時とスマホの時としっかりと出しわけをして対応していきたいと思います。

実際にやってみる

さぁ、PHPでしっかりと記述していきます。

記述内容は以下。

<div id="double-rectangle">スポンサードリンク</br>
 <?php if (is_mobile()) :?>
 <!– スマホの埋め込み広告コード –>
 <?php else: ?>
 <div id="left-rectangle">
 <!– PCの左側の埋め込み広告コード –>
 </div>
 <div id="right-rectangle">
 <!– PCの左側の埋め込み広告コード –>
 </div>
 <?php endif; ?> 
</div>

これをどこに書くかというと子テーマの中のsingle.php。

大体contentとかが終わった後に埋め込みます。

※埋め込む位置はしっかりと覚えて表示をチェックしながらやりましょう。自分はこれで1時間正しい位置を探すのにかかったｗ

次にCSSをいじってしっかりと表示を整えていきます。

内容は以下

div#double-rectangle {
 text-align: center;
 overflow: hidden;
 margin-bottom: 30px;
}
div#left-rectangle {
 float: left;
 margin-left: 30px;
}
div#right-rectangle {
 float: left;
 margin-left: 15px;
}

これも子テーマの中でCSSに追記を作っていきます。

綺麗に表示されるようになりました！