はてなブログpro アドセンスを２つ横並びで表示させるダブルレクタングルを設置方法 スマホは1つ設置
どうも、@cucumberking9です。
多くのアフィリエイターやブロガーが使用しているアドセンス広告の貼り方「ダブルレクタングル」について解説と設置方法について書いていきます。
ダブルレクタングルとはPC（パソコン）の記事下の位置に2つ広告を横並びで表示させる表示法。
こういう風に設置すると広告のクリック率があがるといわれ、非常に人気のあるアドセンスの貼り方ですね。
はてなブログでアドセンスを2つ横並びに貼り付ける方法
はてなブログにアドセンスのダブルレクタングルを設置サクッと紹介します。
1.アドセンスコードを取得
まずGoogle AdSenseで336×250か300×250のアドセンスコードを2つ取得。
2.ダブルレクタングルのコードを作成
「アドセンスコード」という部分に、取得したアドセンスコードをそれぞれコピペで入力します。
<div id="my-footer">
<p style="text-align: center; font-size: 80%;">スポンサーリンク</p>
<table class="table-css">
<tr>
<td class="td-css"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- アドセンスコード -->
<ins class="adsbygoogle mobile"
style="display:inline-block;width:336px;height:280px"
data-ad-client="xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script></td>
<td class="td-css"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- アドセンスコード -->
<ins class="adsbygoogle mobile"
style="display:inline-block;width:336px;height:280px"
data-ad-client="xxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script></td>
</tr>
</table>
</div>
<script>
var myFooter=document.getElementById("my-footer");
var temp=myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
3.コードを「記事下」にコピペ
はてなブログの設定画面から「デザイン」→「カスタマイズ」→「記事」にある記事下に上記のコードの貼り付けを行います。
記事下にはれば記事の最後にダブルレクタングルを設置可能。
ちなみに記事上にはれば記事の上部にダブルレクタングルを設置できます。
記事の上にダブルレクタングルを貼り付けている人をちらほら見かけますが、一般的には記事下に設置している人が多いですね。
スマホにダブルレクタングルを表示させない設定
以前はスマホサイトの位置画面に複数のアドセンス広告を表示させることが禁されていました。
上記コードをそのまま貼るとスマホサイトにもアドセンスが2つ並んで表示され規約違反だったんですね。
今はアドセンスの利用規約が変わったので、問題ないとは思うのですが・・・
しかし、スマホの場合はアドセンス広告を1つだけが当たり前になっていますね。
ということでダブルレクタングル用に取得した2つのアドセンスコードの1つを、以下のように修正します。
アドセンスコードの以下の部分を
ins class="adsbygoogle"
下記に変更します。
ins class="adsbygoogle mobile"
こうすることで変更した方のアドセンスはスマホに表示されないので、PCではダブルレクタングル・スマホではレクタングルを1つ表示させるように設定することができるんです。
</table>と</div>の間にアドセンスコードを貼り付けます。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- hatena1 -->
<ins class="adsbygoogle widedisplay"
style="display:block"
data-ad-client="xxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
スマホに表示するレスポンシブデザインのコードを変更
ins class="adsbygoogle"
と表示されている部分を以下のように変更。
ins class="adsbygoogle widedisplay"
・CSSを設定する
続いて以下のCSSコードをデザインCSSコードに書きます。
CSSコードは以下の通り。
/* アドセンススマホ対応 */
@media screen and (max-width: 680px) {
.mobile{
display: none !important;
}
}
@media screen and (min-width: 680px) {
.widedisplay{
display: none !important;
}
}
上記コードをはてなブログの「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付けます。
以上で、はてなブログでのダブルレクタングルの設置は完了。
うまく設定できているはず。
この記事を参考にされている方はPCとスマホで自分のはてなブログを確認してみてください。
まとめ
多分一番最初にこのダブルレクタングルを使ったのはこれを書いた著者ではないかと思っています。
ブログ飯
どうでしょうか？
近年はスマートフォンの普及で、PCでサイトやブログを訪問する人が以前と比べ減りました。
この広告の貼り方も定番です、が古くなりましたね。
スマホでのアドセンス広告の貼り方が重要になってきています。
スマホで表示される広告は2つにすることも可能ですが（多分今は規約違反ではないはず）、1つの方がよいという通説がまだ残っています。
アドセンスを貼り付ける方のお役に立てれば嬉しいです。
