アドセンスやバナーなど、横に二つの広告を並べる為のCSSとHTMLの覚え書き

記事の下にどうにかFacebookのLikeboxと楽天のバナーを並べて貼りたかったので色々調べた結果の覚え書きメモです。

アドセンスのレクタングルやスクエアなどを二つ並べる時にも使える方法です。

Learn html, css and Firebug / dmhoro

テーブルタグで広告を二つ並べるやり方は結構解説されています。
が、やはり表をつくる訳でもないのにテーブルタグを使うのには少し抵抗があったので、HTML＆CSSでやってみました。

並べるLikeboxと楽天バナーはともに横幅250PXです。
検索してみると詳しく説明してサンプルまで置いているブログがありましたので、参考にしつつ、このブログのカラム幅に合わせて調整してみました。

まずHTML

<div class="ads">
<div id="adleft">
　↑
ここに左側のバナーor広告のタグ
　↓
</div>
<div id="adright">
　↑
ここに右側のバナーor広告のタグ
　↓
</div>
</div>
<br class="clear" />

続いてCSS

.ads {
  text-align: center;
  margin:5px auto;
  width :520px;　/* バナーサイズとmarginを計算して調整 */
}
.ads #adright {
  float: right;
  margin: 5px;
}
.ads #adleft {
  float: left;
  margin: 5px;
}
/* Opera用の指定 */
.ad p,.ads p {
  text-align: center;
  margin:5px auto;
}

marginの数値も、ブログのカラム幅に合わせて適宜ほどよい感じに調整していけばOKです。