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

投稿日:

affinger-non-narrow_doublerectangle

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

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

affinger-width-1060

1060 ⇒ 1114pxへ

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

横並びにするCSSと方法

方法は簡単。

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

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

CSSの内容

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

 

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

check-doublerectangle

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

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

336-doublerectangle

完成イメージ

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

関連記事

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

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

AFFINGER4の記事幅について

AFFINGER4の記事幅は740pxです

affinger-740px

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

参考:1060 - 320 = 740px(記事の幅)

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

affinger-640px

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

affinger-50pxx2

参考:740 - 100 = 640px

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

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

affinger-672px

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

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

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

negative-margin

  • アドセンス部分のみ幅を広げるか (CSS使う)
  • サイト全体の幅を広げるか(1114pxにする)

の違い

サイト幅を1114px以上にする理由

なぜ1114pxで指定するかと言うと、アドセンスとアドセンスの間に20pxの余白を設定されているためにアドセンス広告+中央余白20pxの合計692pxが必要だからです。

□ 20px □ ← 広告の間に余白

参考:(336x2) + 20(余白) + 100(余白) + 320(サイド) = 1112px

計算上2px猶予が設けられているのは、記事の周りに1pxのボーダーを付けるか否かのゆとり。

よって記事をボーダーで囲わない場合は、1112pxでも実際には横並びになります。

すべては読みやすい記事の為に

最後になりますが、
なぜサイト幅を広げないかというと「読みやすい記事」を目指すためです。

デフォの1060 を 1114 にしたところで54pxの違いですから、実際のところ大きな違いはないでしょう。

yotta
公式方法がベストだと思います。

しかしながら、記事幅を1060よりもっと狭めたい時に今回のネガティブマージンCSSの方法が有効になってきます。

参考までに当サイトの文章が書かれている幅は現在550pxです(PC観覧時)

haba-line

AFFINGERのデフォは640pxですから、90px幅を狭めています。

更にはちなみに情報ですが、AFFINGERの作者であるENJIさんのサイトの文章幅は548pxでした。

記事の幅を狭める方法も紹介してますので、よろしければこちらもどうぞ

AFFINGERの記事幅を変更する色々なパターンをまとめました

この記事のカスタマイズ環境

  • カスタマイズなしAFFINGER4 (Version: 20171227β)
  • ワードプレス(バージョン 4.9.1–ja)

-Affinger4

関連記事とスポンサーリンク

Copyright© 前略、ヨッタさんへ , 2018 All Rights Reserved.