ダブルレクタングルのCSSコード。3分で完了する簡単設定

「ダブルレクタングルにしたい」
「横並びにキレイに並べたい！」
「でも縦に並んだりズレたりする……」

そう、ダブルレクタングルって
他人のサイトを参考にしてやっても
なぜか上手くいかないんですよね。
 
私もさんざんいろいろ試してみて
ようやく「コレだ！」っていう
CSSのコードの設定を見つけました。

そこで今回は私が
グーグルアドセンスのレクタングル広告を

ダブルレクタングルにする方法を
分かりやすく紹介していきます。

ダブルレクタングルCSSコードとHTMLの設定方法

ダブルレクタングル　やり方

で検索すると色んな人が色んな方法を
様々に紹介していますが

私が最終的にたどり着いたのが
こちらのシンプルなCSSコードと
HTMLの構成です。
 
まずWordPressや無料ブログのCSSに
以下のコードを貼り付けてください。

貼り付けたら忘れずに「保存」を。

広告配置の微調整

アドセンス広告の上下のスペースを
もう少し広げたり縮めたい場合は

.wrのmargin:2em 0;

の2emを5emにするとか
1emにするなどして調整可能です。

 
そして次にWordPressの
アドセンスのプラグインやphpなどに
以下のHTMLを貼り付けてください。

その際に

※右のアドセンスコード※

と書かれたスペースに
右に表示したいアドセンスのコードを

※左のアドセンスコード※

と書かれたスペースには
左に表示したいアドセンスのコードを
それぞれ挿入してください。

完成形がコチラ。

 
 
なお左右のアドセンスコードは
別々に用意しても

左右共通に使いまわしても
どちらでもお好きなほうでOKです！

上下に重なってしまう……

この方法で設置しても
レクタングルが上下に重なってしまう場合は
ブログのカラムの横幅が狭いせいです。

レクタングル（大）を横に2つ並べる場合

336+336+20（広告間のスペース）=692

最低でも692pxの横幅が必要です。

テーブルでダブルレクタングルはダメ？

一部のサイトでは以下のような

「テーブルタグ」を使って
ダブルレクタングルを設置する方法が
紹介されています。

しかし本来、テーブルタグは
複数の項目を表にするためにあります。
 
ですからダブルレクタングルのために
テーブルタグを使うのは
HTMLのルールからすると間違いです。

スマホではダブルレクタングルはNG！

このようなダブルレクタングルは
あくまでPC表示のためにあります。

スマホでは画面の幅がせまく
ダブルレクタングルにすると
縦に2つ並んで表示されてしまいます。
 
そのような広告表示をすると
ポリシー違反になるため

スマホでは非表示にするか
シングルのレクタングルを表示するよう
設定しておく必要があります。

PCとスマホの表示を
切り分ける（切り替える）方法は
以下の記事で解説しています。

まとめ

ダブルレクタングルにするCSSの紹介と
設定方法をご紹介してきました。

現在は昔ほどは利用者が減ってきて
ダブルレクタングルは時代遅れ……
みたいな意見も聞かれます。
 
昔にはなかった
レスポンシブなどの
新しいアドセンス広告の形態が
続々登場していますからね。
 
しかし私のブログでは
まだまだ現役バリバリ！

しばらくはまだ使えると思いますよ。