アドセンスの配置、悩みまよね。
どこに置けばいいのか？どの形がクリック率が高いのか？などなど、話し出すと付きません。
今回はデスクトップ用でクリック率が高いと言われている、「ダブルレクタングル配置」を改良した「ダブルレスポンシブ」配置を提案したいと思います。
ダブルレクタングル配置とは？
フルブラウザで、レクタングルのアドセンスを横並びにダブルで配置する布陣。
[cc id=2335]
これです。（スマホとかで見ている方は一つしか表示されていないと思います）
そもそもクリック率がイイと言われているレクタングルを横にダブルで表示させる豪華絢爛な広告配置。（しつこいとも言う）
ダブルレスポンシブとは？
こちらも上で紹介したダブルレクタングル配置と同じく、アドセンス広告を横に二つ横に並べます。
だた、違うのは中身がレスポンシブ広告である。と言う点です。
レスポンシブのアドセンスの何がイイかと言いますと、今のご時世、フルブラウザで見てくれる人ばっかりでもないわけです。
サイトのテーマにも寄るかと思いますが、訪問者の半分以上がスマホ、またはタブレット、なんてサイトも多いと思います。(当サイトはデスクトップ7割です)
勿論最近のワードプレスのテーマの多くはレスポンシブ表示に対応していますので、クライアントのブラウザの横幅に応じて中身のサイズが変化します。
そうなった時にレクタングル広告ではサイズが可変ではないため、表示崩れが起きてしまいます。
上がipad proで見た場合の「ダブルレクタングル」下が「ダブルレスポンシブ」配置です。
上の方は広告が少し重なってしまっているのが分かると思います。
さらに横幅が圧迫されるipadサイズでは上の写真のように、ダブルレクタングルではメインカラムを完全にはみ出してしまいます。
下側のダブルレスポンシブは綺麗に収まっていますね。
縦長バナーの横並びの是非についてはさておき(笑)
ダブルレスポンシブを作る
ダブルレスポンシブの配置の作り方を解説します。
アドセンス管理画面から広告ユニット作成
レスポンシブ広告のユニットを作成します。
アドセンスの管理画面左側のメニューから、「広告」→「広告ユニット」→「新しい広告ユニット」を選択して、ユニットの作成ウィザードに進みます。
テキスト広告とディスプレイ広告を選択して、レスポンシブユニットを作成します。
名前は管理画面でわかりやすいような名前を付けておけばなんでもOKです。
HTML
<div class="col2-wrap">
<div class="col">
<!-- ここに広告コードを貼り付け -->
</div>
<div class="col up480">
<!-- ここに広告コードを貼り付け -->
</div>
</div>
CSS
@media (max-width: 480px) {
.up480 {
display: none;
}
}
@media (min-width: 480px) {
.col {
float: left;
margin-bottom: 2%;
}
.col2-wrap>.col:nth-child(odd) {
margin-right: 2%;
}
.col2-wrap>.col {
width: 49%;
}
}
.col2-wrap {
margin: 0 0 1em;
}
.col {
width: auto;
margin-left: 0;
background-color: transparent;
text-align: -webkit-center;
text-align: center;
}
お使いのテーマによっては多少マージンなどの調整が必要な可能性がありますが、これでレスポンシブの横並びが完成です。
ちなみにスマホ表示の時にアドセンス縦にダブルは流石にうっとおしいと思いますので、スクリーンの横幅が480px以下のデバイスでは二個目の広告を非表示にする調整をしています。
480pxの部分はテーマのブレークポイントに合わせて調整する方がいいかもしれません。
まとめ
クリック率が上がると言われているダブルレクタングルを一段階進化させた、ダブルレスポンシブを是非試してみてください。
こちらの記事もオススメです。
コメント