アドセンス広告を横並びの「ダブルレクタングル」で表示する方法。2つ広告を表示してクリック率UP!

アドセンス広告を貼る際の基本のひとつでもある「ダブルレクタングル」。
しかし基本といってもブログを始めたばかりの人では、ダブルレクタングルの意味だったり、表示させる難易度は高いと思います。
今回はアドセンス広告をダブルレクタングルで表示する意味や、表示するための方法をいくつか紹介します。

ダブルレクタングルとは?

表示形式

ダブルレクタングルとは広告を横並びで2つ表示することです。

よく記事の下(フッター付近)に正方形の記事が2つ並んでいる場合がありますが、それがダブルレクタングルというものです。
基本的には「300×250」といった、比較的正方形に近いサイズの広告を並べることになります。

クリック率を上げる

広告をダブルレクタングルにする大きな理由は、2つの違う広告を表示させてクリック率をアップすることです。

アドセンス広告は読者にクリックしてもらわないと報酬が発生しません。
そのため読者に興味を持ってもらえるような記事を少しでも多く表示させたいです。

そこて読者の目に止まりやすい場所に複数の記事を貼って興味を持ってもらおうというわけです。

スポンサードリンク

ダブルレクタングルで表示する方法

ではさっそく広告をダブルレクタングルで表示する方法を紹介します。
とりあえず2つほど書いておくので、好きな方をお使いください。

テーブルを使って表示する

テーブルのセルを使って広告を横並びにする方法です。
とりあえずコードを書いてみます。

<table>
<tbody>
<tr>
<td>広告コードその1</td>
<td>広告コードその2</td>
</tr>
</tbody>
</table>

これだけです。
テーブルの書き方さえ分かれば簡単にできるので、htmlに不慣れな人でもダブルレクタングルで広告を表示できるようになります。

ただこれだけではテーブルの大きさや広告の位置が調整できないので、以下のようにtableタグ内にコードを記述します。

<table style="width:600px;border-collapse: collapse;"
              border="1"
              align="center">

width:600px・・・1つの広告のサイズが300×250の場合、テーブル全体の横幅を600pxにする
border-collapse: collapse・・・線の種類を1本線に指定
border="1″・・・線の太さを1pxに指定
align="center"・・・テーブル全体を画面中央に表示

ここで気をつけたいのは「border」と「align」は「style=""」内に記述していません。
この場合の「border」と「align」はtableタグ専用の要素なので、別々に記述してください。

上記のコードで広告を表示するとこうなります。

テーブルの線が目立ちますがCSSをあまり理解していなくても出来るので、不慣れな人にはオススメです。

CSSを使って表示する

こちらはCSSを使って本格的に表示していく方法です。

htmlやCSSの仕組みを理解していないと少々難しいですが、何かと微調整ができるので覚えておいて損は無いです。
テーブルのように線が出たりもしないので、そういった細かいところが気になる人は使っていきましょう。

では最低限使うコードを書いていきます。

/*クラス名*/
.ads-rectangle{
  display:inline-block;
}

/*実際のコード*/
<div class="ads-rectangle">
広告コードその1
</div>
<div class="ads-rectangle">
広告コードその2
</div>

横並びにする基本的なコードは以上になります。
クラス名は自由に設定してくれればOKです。

ただこれだけのコードでは広告は横並びにはなっても、表示位置が左寄りで広告同士がくっついてしまうので、広告の表示位置の調整をします。

/*クラス名*/
.ads-rectangle{
  display:inline-block;
  margin:10px;/*上記のコードに追加*/
}

<div style="text-align:center;">/*上記のコードに追加*/
<div class="ads-rectangle">
広告コードその1
</div>
<div class="ads-rectangle">
広告コードその2
</div>
</div>/*上記のコードに追加*/

これで2つの広告がいい感じに表示されると思います。
「text-align:center」と「margin:10px」を追加して、広告全体を画面の中心寄せにして、広告同士に間隔を取ります。
実際はこんな感じです。


広告同士の間隔を調整したいならmarginの値を弄ってください。

コードを書く人にもよりますが、個人的にはCSSで表示したほうが他にも色々と追加しやすいと感じます。
CSSに不慣れな人では色々とややこしいことになるのでこの記事では触れませんが、記事を表示するデバイス(パソコン・スマホ)の画面に応じて広告を一つだけ表示できるような設定も追加しやすいです。

CSSの扱いにも慣れることを考えると、こちらの方法を取ってもいいと思います。

最後に

以上でアドセンス広告をダブルレクタングルで表示する方法の紹介を終わります。

せっかく表示するスペースがあるのに広告を表示できないともったいないですし、なによりクリック(広告収入)を逃してしまう可能性もあります。
できるだけ早めにこういった手段を覚えて、記事スペースを無駄なく活用しましょう!


スポンサードリンク