レスポンシブ対応!Gushでアドセンスをダブルレクタングルで貼る方法!

tsuruno19_TP_V

どうも、チコ(@gamerchiko)ですよ!18歳になったのでついに当ブログでも念願の「Google Adsense」を導入しましたよ!やったね!PCでこの記事をご覧の方は分かると思いますが当ブログでは記事下に広告を2つ並べる「ダブルレクタングル」と呼ばれる物にしてみました。

今回は「Gush」でアドセンスをこの「ダブルレクタングル」で貼る方法を紹介しようと思います。今回紹介する方法はレスポンシブにも対応していて画面の横幅が小さくなると広告が横並びから縦並びに勝手に変化するおまけ機能もあります。「Gush」以外でも出来ると思うので試してみてください。

「ダブルレクタングル」で貼る際の注意!

モバイル向けの配置方法: 上記の各上限は、モバイルサイトにも適用されます。また、モバイルサイトの場合は、2つ以上の AdSense 広告を画面に同時に掲載することはできません。ウェブサイトがレスポンシブ デザインの場合、端末に応じてサイトの大きさが変わることで、このポリシーに準拠しない位置に広告が表示される可能性がありますのでご注意ください。

広告の配置に関するポリシー – AdSense ヘルプ

この通り、モバイルサイトの場合は画面の中に複数の広告を同時に掲載する事は規約違反となっています。ダブルレクタングルで貼ってしまうと確実に画面の中に2つの広告が同時で掲載されてしまいます。なので、モバイルサイトでは画面の中に1つだけ掲載するように設定する必要があります。

単一記事の投稿(single.php)へ記入

<?php if(is_mobile()) { ?>
<!-- スマホに掲載する広告のコードを記入 -->
<?php } else { ?>
<div class="ad-left">
<!-- ダブルレクタングルの左側の広告のコードを記入 -->
</div>
<div class="ad-right">
<!-- ダブルレクタングルの右側の広告のコードを記入 -->
</div>
<div style=”clear:both;”></div>
<?php } ?>

私と同じテンプレートの「Gush」を使っていて記事内にダブルレクタングルで広告を貼りたい方は「単一記事の投稿(single.php)」に以上のコードを好きな所に記入してください。

「is_mobile」という条件分岐タグはデフォルトでは使えないので「【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう!」を参考にして使えるようにしてください。

スタイルシート(style.css)へ記入

.ad-left,.ad-right{
	margin:0 auto;
	width:300px;
}

次に以上のコードを「スタイルシート(style.css)」の好きな所に記入してください。「Gush」を使っている方は「@media screen and (min-width : 768px){」より上の部分に記入してください。

.ad-left{
	float:left;
}

.ad-right{
	float:right;
}

最後に以上のコードを「スタイルシート(style.css)」の好きな所に記入してください。「Gush」を使っている方は「@media screen and (min-width : 768px){」より下の部分に記入してください。この手の知識はまだ勉強中で疎いので間違ってたらアドバイスしてくださるとありがたいです。

参考にしたサイト

【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう!

スマホとPCで広告の分け方とダブルレクタングルについて! | ミックス×2 ビジョン

最後に

今回は「Gush」でアドセンスをダブルレクタングルで貼る方法を紹介しましたがいかがでしたか?広告が2つ並んでいると見栄えが良い気がします。質問や誤字脱字の指摘はコメント欄でお願いします。

スポンサーリンク

オススメ記事

スポンサーリンク

この記事を友達に教える

ブログ内検索

コメント

TOP