2012-12-19
アドセンスやバナーなど、横に二つの広告を並べる為の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です。
関連記事
忍者おまとめボタンを利用してソーシャルボタンをアドセンスの横に配置する手順 そういえばWordPress3.4にした時に管理画面に入れなくなったのでその時にやった事などをメモ WordPressの更新通知をTwitterとアメーバなうを利用してアメブロに流すように設定 【WordPress】レスポンシブデザインを使った時にスマホとパソコンで忍者admaxを出し分ける方法 WordPressのデフォルトタグウィジェットで表示されるタグクラウド数の上限数を変更する方法 WordPressを3.5にしてみたら、例によって管理画面にログインできなくなったので解決してみた WordPressのパーマリンク設定って結局何でもいいんじゃないかという話