アドセンス広告を横並びの「ダブルレクタングル」で表示する方法。複数の方法でブログ別に対応

アドセンス広告を貼る際の基本のひとつでもある「ダブルレクタングル」ですが、「空いた画面を有効活用する」「別々の広告を表示させる」「クリック率をアップさせる」などの効果があります。

しかし一見簡単そうに見えても、広告をバランスよく横並びに表示するにはある程度のプログラムの知識が要ります。

今回はアドセンス広告をダブルレクタングルで表示する意味や、表示するための方法をいくつか紹介します。

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

表示形式

ダブルレクタングルとは広告を横並びで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を使って表示する

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

htmlやCSSの仕組みを理解していないと少々難しいですが、何かと応用が利くので覚えておいて損は無いです。

私はWordPressでブログを書いてますが、テーマによっては正常に表示されなかったりしたことがあるため、複数の方法を試してました。

いくつか方法があるので自分のブログ・好みにあった方法を使ってみてください。

①float:left rightを使う

「float:left」と「float:right」を使って広告を左右に寄せます。

最低限のコードはこちら。

/*クラス名*/
.ads-left{
  float:left;
}
.ads-right{
  float:right;
}
.ads-clear{
  clear:both;
}
/*実際のコード*/
<div class="ads-left">
広告コードその1
</div>
<div class="ads-right">
広告コードその2
</div>
<div class="ads-clear"></div>

「float:left」で左側の広告を左寄りに、「float:right」で右側の広告を右寄りにして横並びにしています。

最後に「clear:both」でfloatを解除しておきましょう

ただこれだと広告が極端に左右寄りになってしまうので、各クラスにプロパティを追加してある程度画面の中央に寄せることもできます。

.ads-left{
float:left;
margin-left:20px;/*上記のコードに追加*/
}
.ads-right{
float:right;
margin-right:20px;/*上記のコードに追加*/
}

marginで左右の広告を中央に寄せます。

「text-align:center」では中央寄りにできないので注意しましょう。

表示される画面サイズによってかなりスペースができてしまうので、調整が面倒だったり少し違和感が出ることもあります。

①inline-blockを使う

「display:inline-block;」を使って広告を横並びにします。

最低限のコードはこちら

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

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

各広告コードを「display:inline-block」で囲ってしまえば、簡単に横並びにできます。

同じ内容のクラスを別々の広告に使っていますが、後で微調整したくなったときのために分けて使ったほうがいいです。

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

そのため広告の表示位置の調整をします。

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

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

これで2つの広告がいい感じに表示されると思います。

「text-align:center」でコード全体を囲って画面中心寄りにして、「margin:10px」で広告同士に間隔を取ってます。

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

ただこれらの方法だけだとスマホなどのモバイル表示のときに広告が2つ表示されたままになってしまい、画面が広がったり上下に無理やり2つ広告が表示されたりします。

モバイル用に広告を1つだけ表示したい場合の方法も解説しているので、htmlやCSSをある程度覚えてきたら挑戦してみましょう。

アドセンス広告などをパソコン・スマホで分けて表示する方法。画面サイズに合わせて広告を非表示に

最後に

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

せっかく表示するスペースがあるのに広告を表示できないともったいないですし、なによりクリック(広告収入)を逃してしまう可能性もあります。

できるだけ早めにこういった手段を覚えて、記事スペースを無駄なく活用しましょう。