広告表示について

このブログテーマのPC表示時のメインコンテンツ幅は600pxしかありません。
なので、350×250のレクタングル（中）を、2つ並べて表示することは基本的にできません。

しかし、メインコンテンツの左右には余白をもたせているので、実際は630pxあります。（左右の線も含む）

この余白部分まで使えば、レクタングル（中）を2つ並べることも可能です。

例えば、広告2つをdivで囲んで記入します。（ここでは、記事の下ということでads_bottomとします。）

<div class="ads_bottom">
ここに350×250のレクタングルを1つ
ここに350×250のレクタングルをもう1つ
</div>

上記だけでは縦に2つ並ぶだけですが、CSSで下記のように設定すると横に並びます。

.ads_bottom {
    width: 610px;
}

しかし、右側に寄った感じになってしまうので、CSSを2行追加します。

.ads_bottom {
    width: 610px;
    position: relative;
    left: -3px;
}

これで、常に2つ並びます。常にです。
ウインドウサイズを小さくしても常に横に2つ並んでしまうのです。
ということで、上記CSSに、条件を付けます。

@media (min-width: 728px) {
.ads_bottom {
    width: 610px;
    position: relative;
    left: -3px;
}
}

最大値から最小728pxまでは、この条件にします。なので727px以下になると広告が縦に2つ並びます。

質問がありましたので、回答してみました。
これで、いかがでしょうか？

（本来は、メインコンテンツの横幅を広げたほうがいいのかもしれませんが・・・。テーマの設計が行き当たりばったりで・・・。）

cyancy.hatenablog.com