AFFINGERで"記事の幅を広げずに"アドセンスを横並びにする方法。336x280サイズのダブルレクタングル

公式サイト解説による通常の方法でいくと、アドセンスを横並びにするにはサイト幅を広げる必要があります（1114px以上に設定）

何も設定しない通常のAFFINGER4は、サイト幅が1060pxです。

1060 ⇒ 1114pxへ

この記事では、
サイト幅を1114pxに広げることなく通常サイズのままアドセンスを横並びにする方法をご紹介します。簡単なCSSを使います。

横並びにするCSSと方法

方法は簡単。

手順としては、CSSをコピペして、AFFINGER4の設定をチェックする流れです。

まずは次のコードを子テーマのStyle.cssにコピペします。

/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
 main .adbox {
	margin: 0 -26px;
   }
}

CSSの内容

.adboxという336px広告ウィジェットが表示される部分だけ、必要最低限サイズで横に広くネガティブマージンで調節。#詳細後述

あとは、AFFINGER4管理にある「横並びにする」へチェックを入れたら完成です！（ココは幅を広げる場合でもチェック必要）

PC閲覧時に記事下のアドセンス広告を横並びにする ※「PC閲覧時のサイトの幅」を1114px以上に設定して下さい

幅を広げずに横並び広告で表示されていると思います。

完成イメージ

内容としては以上ですが、もう少し具体的にひも解きます。

AFFINGER4でダブルレクタングルの片方をA8などのアフィリエイトバナーにする方法

AFFINGERの記事幅について
この方法を行う目的について

AFFINGER4の記事幅について

AFFINGER4の記事幅は740pxです

#contentInnerという全体幅が1060pxで、
そこからサイドの320pxを引いた値です。

参考：1060 - 320 = 740px（記事の幅）

さらには記事の内側(Article)である実際に文章が入るところは640pxの幅です

左右に50pxずつの余白があります

参考：740 - 100 = 640px

横並びにするには672px必要

336 x 280 のアドセンス広告を横並び（ダブルレクタングル）にするには、倍の大きさである672pxが最低限必要な値となります。

640pxの横幅に対して、672pxは入りませんね。32pxのヨコ幅が不足です。

物理的な幅がないため、AFFINGER4では「PC観覧時のサイト幅を1114px以上に設定する」ように書かれています。

つまり、不足している幅を用意したら横並びになるという理屈ですから、「広告設置されている部分だけ」横にマイナスの値で広くしたのがご紹介したCSSです。

/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
 main .adbox {
	margin: 0 -26px;
   }
}