読者です 読者をやめる 読者になる 読者になる

よなかのはなし

LifeHacks And Hello!Project Blog

レスポンシブ対応!tableタグを使わずアドセンスを横並びにするカスタマイズ

ブログ はてなブログ カスタマイズ

f:id:hiroseyonaka:20160905153448p:plain

8月の中旬にGoogleアドセンスの規約が変わり「広告3枚制限」が撤廃されたそうです。そこで記事中に2枚、記事下にダブルレクタングルで2枚広告を配置するカスタマイズを行ってみました。

Googleアドセンスの広告が1つの記事に4枚貼れる!

アドセンス使用における従来の規約では1つの画面に貼れる広告は3枚までと決まっていました。レスポンシブデザインを採用している当ブログは、記事中の大見出しの上に2枚、記事下のソーシャルボタンの上に1枚を配置していましたが、今回の枚数上限撤廃により記事下にダブルレクタングルが設置できるようになったわけです。

当ブログにおけるアドセンス広告位置ビフォーアフター

これまではjQueryを使ってブログ記事中にある大見出しh3の上、そして記事直下のソーシャルボタン上に広告を表示させていました。
今回はこのアドセンス広告を以下のように変更します。


f:id:hiroseyonaka:20160903032359p:plain


横並びとなる3・4枚目のアドセンス広告は、スマホ表示のときは右側の広告を非表示にし、左の広告1枚のみを表示するようカスタマイズ。


ディスプレイ幅によって広告を消すのはポリシー違反に当たるのかな?と思い調べてみましたが、レスポンシブサイトで行うぶんには問題ないようですね。
広告の修正についてはアドセンスヘルプの広告掲載ポリシーに記載がありました。

AdSense コードを以下の方法で改変することは禁止されています。

  • display:none などを使用して広告ユニットを隠す(ただし、レスポンシブ広告ユニットを実装している場合を除く)

AdSense 広告コードの修正 - AdSense ヘルプ

AdSense広告を横並びにしてダブルレクタングルを実装する

広告を横並びにするときよく使われるのがtableタグ。ただ個人的にtableでスタイリングするのがあまり好きじゃないので今回はあえてdivを使います。

1、アドセンス広告のコードを作成する

まずはGoogleアドセンスのサイトで広告コードを作成します。

広告を作成するときはユニットの概要を「イメージ/レスポンシブ」にしておいてください。


f:id:hiroseyonaka:20160903173311p:plain



アドセンス広告のコードを取得すると以下のような構造になっていると思いますが、今回はその一部を変更。


●レスポンシブ用のサンプル基本コード例

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

レスポンシブ広告コードを修正する方法 - AdSense ヘルプ

このコード内にあるdata-ad-format部分をautoからrectangleに変更します。上記のサンプルコードでは7行目にあたる部分ですね。

formatをレクタングルにすることで高さの揃った広告ユニットが表示されるため、ここは忘れずに変更しましょう。


2、HTMLコードを記述する

HTMLコードははてなブログのデザイン→→記事下に記入します。該当箇所には変更したアドセンスコードを記入しておいてください。


HTML

<!-- Googleアドセンス -->

<div class="adbox">
<div class="adsense-left">

//ここにアドセンス広告のコード1を貼る

</div>

<div class="adsense-right">

//ここにアドセンス広告のコード2を貼る

</div>
</div>
<!-- 記事本文のすぐ下に移動し、「スポンサーリンク」も追加。ただしIE8などの古いブラウザを除く -->
<script>
    if ( document.getElementsByClassName ) {
        var inserteds = document.getElementsByClassName("adbox");
        var footerAd = inserteds[inserteds.length - 1];

        var entryContent = document.getElementsByClassName("entry-content")[0];
    
        var sponsorLink = document.createElement("div");
        sponsorLink.textContent = "スポンサーリンク";
        sponsorLink.style.cssText = "font-size:70%";
    
        entryContent.appendChild(sponsorLink);
        entryContent.appendChild(footerAd);   
    }
</script>


補足

アドセンス広告のコードは2箇所とも同じものを記入しても問題ありません。初めは2つとも同じ広告が表示される事が多いと思いますが、徐々に記事に見合った広告が表示されるようになります。



広告をソーシャルボタンの上に移動させるスクリプトは「エンジニアがお金について本気出して考えてみた」様を参考にさせていただきました。



今回は左右の広告をadboxで囲っているため、参考コードの2行目をadboxというクラス名に変更しています。


f:id:hiroseyonaka:20160903174651p:plain


3、CSSを記述する

HTMLの次はCSSでスタイリングしていきます。

以下のコードをデザイン→→デザインCSSに貼り付けてください。


CSS

.adbox{
width:100%
}

.adsense-left{
width: 50%;
padding:0px;
display: inline-block;
}

.adsense-right{
width: 50%;
float:right;
padding:0px;
display: inline-block;
}

@media screen and (max-width:768px){
.adsense-right{
display:none;
}
.adsense-left{
width:100%;
}
}

変更点と解説

スマホで見たときに広告がカラム落ちして上下に並んでしまうとGoogleアドセンスのポリシー違反になるので、メディアクエリを利用して768px(タブレットのディスプレイサイズ)で右側の広告を非表示にしています。


また、width:100%を指定することによってスマホのディスプレイ幅でアドセンス広告のサイズが変わるため、iPhone5ならレクタングル中が、iPhone6やAndroidならレクタングル大と最適化されます。


実際にPC、スマホで見るとそれぞれこんな感じの表示になります。

PC

f:id:hiroseyonaka:20160905153448p:plain



スマートフォン

f:id:hiroseyonaka:20160905153512p:plain



記事下のダブルレクタングルはクリック率が高いといわれる位置です。tableタグを使わずアドセンス広告を横並びにするのは決して難しくはないのでぜひお試しを!