アドセンス広告を横並びの「ダブルレクタングル」にする方法
アドセンス広告を貼る際の基本のひとつでもある「ダブルレクタングル」。
「空いた画面を有効活用する」「別々の広告を表示させる」「クリック率をアップさせる」などのメリットがあります。
しかし一見簡単そうに見えても、広告をバランスよく横並びに表示するにはある程度のプログラムの知識が要ります。
今回はアドセンス広告をダブルレクタングルで表示する意味や、表示するための方法をいくつか紹介します。
ダブルレクタングルで表示する方法
ではさっそく広告をダブルレクタングルで表示する方法を紹介します。
とりあえずいくつか方法を書いておくので、好きなものをお使いください。
テーブルを使って表示する
一番簡単なのがテーブルのセルを使って広告を横並びにする方法です。
とりあえずこれがそのコードです。
<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つ表示されたままになってしまいます。
モバイル用に広告を1つだけ表示したい場合の方法も解説しているので、htmlやCSSをある程度覚えてきたら挑戦してみましょう。
最後に
ダブルレクタングルは何かと便利な表示方法です。
せっかく表示するスペースがあるのに、広告を複数表示できないともったいないでしょう。
そこで2つの広告を表示することで、別々の商品広告を表示させるのでクリック率も上がります。
少し応用すれば3つの広告を横並びに表示させることもできます。
2カラム・3カラムのサイトだとスペース的に厳しいでしょうが、1カラムのサイトなら可能でしょう。
できるだけ早めにこういった手段を覚えて、記事スペースを無駄なく活用しましょう。