【Googleアドセンス】広告を2列横並びで配置するダブルレクタングルのCSSとHTML【WordPress】

こちらの記事では、Googleアドセンス広告やアフィリエイトASP広告を横並び2列で配置させる「ダブルレクタングル」の作り方について記載しています。

様々なブログサイトで、アドセンス広告を横並びで2つ記事下などに配置させているケースをよく見かけると思います。

当ブログも広告を2列配置させる「ダブルレクタングル」を使用しており、先日「広告を2つ横に並べるにはどうしたら良いですか？」という質問を頂いたので、広告を2列にする方法を解説します。

ダブルレクタングルとは？

2列横並びの広告配置

当サイト自体が「ダブルレクタングル」仕様なので、PC画面でご覧頂けると分かりやすいですが、一応参考画像を掲載しておきます。

ブログサイトを運営していると記事内や、記事下などの部分に広告を2つ並べたいというブロガーの方は多いのではないでしょうか？

▼Googleアドセンス広告を2列表示

• スマホ画面：1列表示
• PC画面：2列表示

下記で紹介するダブルレクタングルは、Googleアドセンス広告をスマホ画面とPC画面で表示方法を臨機応変に変化させるレスポンスシブ対応に設定しています。

スマートフォンのモバイル端末では広告を1列表示にして、パソコンやタブレット端末では2列で表示させることが可能です。

HTMLとCSSだけで作れる

ダブルレクタングル広告は、HTMLとCSSだけで作れるので初心者でも簡単にブログサイトへ導入可能です。

ですが、使用しているブログのテーマが「THE THOR (ザ・トール)」「ACTION (AFFINGER6)」以外では、下記の「clearfix」に対応しているとは限らないです。

▼clearfixとは?

「clearfix」とは、テーブルやブロックなどを横並びにした際にレイアウトの横ズレが起きるので、それを綺麗な2列にするコードです。

当サイト管理人が仕様している「THE THOR (ザ・トール)」「ACTION (AFFINGER6)」では、正しく「clearfix」が使えるのでおすすめです。

アドセンス広告を2列横並びにする方法

1、ダブルレクタングルHTML

Googleアドセンス広告を2列に並べるダブルレクタングル広告のHTMLになります。

▼HTMLコード構造の図

上記のHTMLを図で表示すると分かりやすいかと思います。

HTMLで広告の周囲に役割を与えたので、次は役割を2列に並ぶようにCSSでレイアウトします。

2、ダブルレクタングルCSS1

Googleアドセンス広告を2列に並べるダブルレクタングル広告のCSS1つ目になります。

広告全体の「kiziad」と、左右広告枠の「adleft・adright」のレイアウト設定です。

▼importantで余白の削除

使用しているテーマによっては、余白が入ることがあるので外枠の「.kiziad」には「padding 0px」で最優先で指定する「!important」を付けています。

左右広告枠の「.adleft・.adright」には、横幅 336pxの広告を並べるように設定し、「float」で広告に右側・左側と2列に並ぶ方向を命令しています。

3、ダブルレクタングルCSS2

Googleアドセンス広告を2列に並べるダブルレクタングル広告のCSS2つ目になります。

上記のCSSは、レイアウト崩れ防止の「clearfix」の代わりとして使用します。

通常では、「hr」によって横棒が引かれるのですが、「display:none」に設定しているので画面上に横棒や、余計な余白は表示されません

4、ダブルレクタングルCSS3

Googleアドセンス広告を2列に並べるダブルレクタングル広告のCSS3つ目(モバイル表示用のCSS設定)になります。

▼多少の余白を設定

▼スマホ画面では1枚表示の指示

5、ダブルレクタングルCSS4

Googleアドセンス広告を2列に並べるダブルレクタングル広告のCSS4つ目(PCやタブレット表示用のCSS設定)になります。

ブログサイトの横幅1081px以上でPC用と仮定して、外枠の「.kiziad」を幅680pxと設定しています。

記事本文の場所となる幅で、この数値で広告2列の幅を広げたり狭めたりできます。

▼メインコンテンツの幅に調整

画面幅は、上記のモバイル表示用設定も含めて、使用しているブログ幅に合わせて臨機応変に変更してください。

記事本文の幅とは、上画像の赤枠の部分になります。

アドセンス広告を2列横並びにする方法

HTMLとCSSの合体まとめ

それでは最後に、上記で紹介したHTMLとCSSを、繋げられるものは1つにして表示します。

ダブルレクタングル広告のHTML

ダブルレクタングル広告のCSS

Googleアドセンス広告を2列横並びにする「ダブルレクタングル広告」の幅などの数値は、使用しているブログサイトのレイアウトに合わせて変更してください。

今回紹介した方法は、「WordPress・はてなブログ・livedoor Blog」など、サイトのデザインを変更することができるサービスなら利用可能です。

ダブルレクタングルの注意点

レスポンスシブのみ可能

Googleアドセンス広告をダブルレクタングルにする方法、「display:none」はレスポンシブ広告のみ利用可能です。

広告を2列横に並べる方法を使う際は、右側広告を「レスポンシブタイプ」の広告を使うようにしましょう。

▼広告掲載のガイドライン

※AdSense 広告掲載に関するポリシーより

レスポンシブタイプを「336×280」などのレクタングルサイズへ固定する方法は、以下の記事でやり方を解説しているのでご覧下さい。