今回はAdSenseの話になるのですが、私個人としてはレクタングル広告が好きです。更にいうとサイドバーと記事下に2つのレクタングル広告が並んでいるスタイルが好きなんですね。しかしブログにレスポンシブデザインを適用していたり、AdSenseでレスポンシブの広告ユニットを使用していると、思いもよらずに違う形の広告が表示されたりもします。もちろんそれがレスポンシブの良さなのですが、レクタングルにこだわりたい！と言う方へ。今回の記事を書いていきます。
レスポンシブデザインを適用している、はてなブログユーザーはもちろん、ブログやサイトにレスポンシブデザインを使用している全てのユーザー向けの記事になります。
広告ユニットの種類など
まずレクタングル広告というのは、AdSenseの広告ユニットの種類一つで、形はスクエア。レクタングル大３３６×２８０やレクタングル中３００×２５０をよく目にすると思います。AdSenseの広告と言えばこの形が一番有名なのではないでしょうか。他にも小さいサイズのレクタングルが数種類あります。
レンタグル広告のイメージ
ここ数年はレスポンシブの広告ユニットが主流で、その要素のサイズに合わせて自由に形を変えてAdSense広告を表示してくれます。レスポンシブユニットにしておくと、サイドバーでは縦長ヴァーチカル広告が表示されていたり、記事上下では横長のバナー等が表示されたりすます。広告のサイズを気にせずに配置出来るのがレスポンシブ広告の良さ。
しかし、自分の意図と違うサイズの広告が表示されてしまうのがレスポンシブユニットの難点でもあります。レスポンシブユニットの良さが逆に悪くもあるという事ですね。
それなら最初からレクタングルだけ貼っておけば良いじゃないかとツッコマれそうですが、そうするとブログやサイトをレスポンシブデザインにしている時に表示枠から広告がはみ出してしまったりする訳です。
そこで、レスポンシブユニットで表示される広告をレクタングル広告だけにしたい！と言うことです。基本的にAdSenseでレスポンシブの広告ユニットを作っておけば、タブレットやスマホではレクタングルで表示される可能性は高いです。PCの表示の時に様々な形の広告になってしまいます。ただそれだけと言えばそうですし、見るのは私自身ではなく、ユーザーになるのですが、ここまで来ると自分自身のこだわりですね。同じような方もいるかと思い今回は記事で書く事にしました。
今回紹介する方法は、規約に反する事ではありませんが、今後AdSenseの規約が変更になる可能性が１００％ないとは言えません。また、AdSenseのコード等をいじる為、この方法を取り入れる方がいましたら、慎重かつ自己責任にて作業をして下さい。
レクタングルのみレスポンシブに対応させる方法
まずはAdSenseの広告ユニットの作成でレスポンシブデザインを選択してユニットを作りコードを取得します。ここまでは普通のやり方と変わりありません。
コードを書き換える
サイドバーや記事下に一つのレクタングルを使う場合にはコードを一箇所修正するだけで、レクタングル広告だけをレスポンシブに表示させる事が出来ます。
data-ad-format="auto"のautoをrectangleに書き換えます。
Before 「data-ad-format="auto"」
After 「data-ad-format="rectangle"」
これでヴァーチカル（縦長）やバナー（横長）は表示されずに、レクタングルだけが表示される事になります。もちろんレスポンシブに表示されるので。PCだけでなくやスマホの表示だけでなく、ラップトップやダブレット（２カラム縮小の場合）の表示時にレスポンシブデザインでサイドバーが縮小された場合でも、レクタングルが縮小して表示されるので便利に使用する事が出来ます。スマホで横に表示した場合に横長（６００×３００）程の広告がまれに表示される事があります。
※ラップトップやタブレット（２カラム縮小の場合）レンタグル時の広告（１５０×１５０）で表示される種類は少ない。
※広告部分は自分で作った画像をはめ込んでいます。
レクタングルではなく縦型のヴァーチカルの方が好きだという人はdata-ad-format="vertical"に書き換える事でヴァーチカル広告のみをレスポンシブに表示対応させる事も出来ます。
ページに複数のレスポンシブ広告を表示する場合は、上のコードは一度書いておけば全ての広告に適用されます。はてなブログであれば「headに要素を追加」にコピペしておくといいでしょう。
より複雑な記事下のレクタングル広告
サイドバーや一つのレクタングルの表示がメインになるのであれば、簡単にレスポンシブに対応する事が出来ましたが、記事下にはレクタングル（大）を2つ並べたい。その場合には少し複雑になります。更にはレスポンシブデザインの表示の違いにも対応するので難易度は高くなります。
まず、上と同じようにコードをレクタングルに書き換える迄は同じなのですが、その後、広告にクラス名を付加します。そして、親となるボックスを新規に作ります。
広告枠の説明
コードに付けるクラス名は任意の名前を付ける事が出来ます。例では.ads-slot-01と.ads-slot-01とクラス名を付けました。
親ボックスはなくても作る事が出来るのですが、上下の要素との距離をとる場合には必要になります。こちらもクラス名は任意で付けています。AdSenseは他の要素と近いのを嫌います。手間は増えてしまいますが、ある程度の距離を取る為に親のボックスも用意しておきましょう。
レクタングル広告にCSSを適用する
PCでの表示ではレクタングル大３３６×２８０を２つ並べて表示します。ラップトップとタブレット（縦横）の表示の場合は横並びを解除してレクタングル大３３６×２８０を縦並びにして表示。この時に上下の広告が近くなりすぎないようにスロット１の下にmarginを指定します。
Mobile L（iPhone６Plus、Nexus６P等）でも縦横でレクタングル大が表示され、Mobile M（iPhone６．５、GalaxyS5等）では縦表示の場合はレクタングル中３００×２５０を表示し、横にした時にはレクタングル大３３６×２８０を表示させるようにしています。（スマホで横にして見る人はいるか分かりませんが）これらの表示を出来るように、ブレークポイントにレスポンシブ用のCSSを記述していきます。今回ブレークポイント二箇所だけに記述をしていますが、自分のブログ・サイトの表示幅に合わせてブレークポイントを足したりしていって下さい。
最近のスマホは画面も大きくなってきているのでレクタングル大を表示する事も出来るのですが、テーマやテンプレートによっては表示枠の横幅が３３６より小さい場合があります。その時のために余裕をもってブレークポインでレクタングル中３００×２５０を表示させる事にしています。もしここでもレクタングル大３３６×２８０を表示させたい場合は、３５９以下（iPhone５等）のブレークポイントを作りレクタングル中３００×２５０を表示させるようにするのも良いでしょう。
※当記事の例と違うクラス名をつけた場合には下のCSSもクラス名を変更して下さい。
これでレスポンシブデザインに対応したレクタングル広告をサイドバーと記事下に２つの並べる事が出来ました。
※画像はイメージですが上記の書き換えを行いCSSを適用すればこの用に表示されます。
最後に
様々な種類の広告が増えてきている中で、レクタングル広告だけ表示したいという人がどれ位いるかは分かりませんが、私のように広告はレクタングル！というこだわりがある人の参考になれば嬉しいです。