AdSense（アドセンス）の広告を横に2つ並べてBloggerで設置したいとき（レスポンス対応）

おすすめ記事ピックアップ

AdSense（アドセンス）の広告を横に2つ並べて表示したいですよね。クリック率が高くなるとかで。横に１列に表示される方法ですが、検索するとtableタグを使ったやり方しか見つかりませんでした。tableタグを使うと、レスポンスに対応できないので、良くない悪い設定方法なんです。

cssをちょっと知っている人なら、ボックス作ってフロートすれば、いいんでしょう？という感じだと思います。ボックス作ってフロートするやり方はいろいろあるので、あくまでも一例として設置方法説明します。cssで作ればこんな風に、横幅が足りないときは、縦並びになります。

横に並べるためのCSSコード

参考のCSSコード（どこかCSSのサイトを参考にして作ったコードです。参照元をリンクしたかったのですが、どこのサイトだか分からなくなってしまいました。すいません。clearfixあたりの書き方を引用しました。）です。BloggerのCSSのエリアにでも張り付けてください。

マージンで上下のスペースを調整したり、パディングで隙間など調整してください。

/*------------------------------------------------------
AdSense（アドセンス）を横に並べるCSS
------------------------------------------------------*/
.adbox {
float: left;
margin: 0px 0px 0px 0px;
padding: 0 2px;
}
.adboxcontainer {
overflow: hidden;
padding: 20px 0px 20px 0px;
}
/* clearfix */
.adboxcontainer:before,
.adboxcontainer:after {
content: "";
display: table;
}
.adboxcontainer:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.adboxcontainer {
zoom: 1;
}

HTMLコード

記事の見出し直下や、記事の最後などに表示させるために、HTMLのテンプレートに張り付けることを前提に書いています。HTMLのテンプレートのどこに記述するべきかは、自分で探すほかありません。コンテナを作ってボックスでフロートしています。

<div class='adboxcontainer'>

<div class='adbox'>
※ここにアドセンスのコードを張る
</div>

<div class='adbox'>
※ここにアドセンスのコードを張る
</div>

</div>

AdSense（アドセンス）のコードは、BloggerのHTMLテンプレートに直接書くエラーがでるはずなので、文字参照して張り付けてください。

なんでも文字参照するサービス
http://furimuke.sub.jp/changemoji/cal.html

実際に張り付けるときは、こんな感じになります。AdSense（アドセンス）のコードを一部文字参照しています。こうすればエラーが出ず、Bloggerに設置できます。

あと300×250のAdSense広告のみで設定すると良いかもしれません。レスポンスタイプや、異なるサイズの広告を入れるとぐちゃぐちゃになるかも。