今回はAdSenseの話になるのですが、私個人としてはレクタングル広告が好きです。更にいうとサイドバーと記事下に2つのレクタングル広告が並んでいるスタイルが好きなんですね。しかしブログにレスポンシブデザインを適用していたり、AdSenseでレスポンシブの広告ユニットを使用していると、思いもよらずに違う形の広告が表示されたりもします。もちろんそれがレスポンシブの良さなのですが。でもやはりレクタングルにこだわりたい！と言う方へ。今回の記事を書いていきます。
レスポンシブデザインを適用している、はてなブログユーザーはもちろん、ブログやサイトにレスポンシブデザインを使用している全てのユーザー向けの記事になります。
【追記】６月１３日
スマホ表示の時にレクタングル広告が縦に2つ並んでしまう事への対処法を書きました。
広告ユニットの種類など
まずレクタングル広告というのは、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もクラス名を変更して下さい。
【ここから追記部分 ６月１３日】
スマホでレクタングルが縦に２つ並んでしまう時の対処法
上の方法でレンタグル広告をならべた場合、スマホで縦の２つの広告が表示されてしまいます。
※広告イメージ
この表示だとAdSenseではポリシーに反する事になってしまいます。そこで上下どちらかのレクタングル広告をdisplay:none;で消す事も一つの対処方法なのですが、広告が一つ減ってしまいます。これでは取りこぼしが出てしまいます。
そこで、特定の画面サイズの時には上下どちらかの広告を違う場所に移動して表示させます。広告間になんかしらのコンテンツが表示されていれば、AdSenseポリシーに反さないようなので、広告を移動する手段を取ります。
広告を移動させるjQuery
下記のコードを使うと、PCやタブレットの時にはそのままに、スマホ（余裕をもって675pxを指定）で読み込まれた時やリサイズされた時（"load resize"）に、下のレクタングル広告がページャーの下の移動します。それ意外の時には元の位置（ads-slot-01の下）に移動します。今回は「.insertAfter」を使って「.pager」の後に表示させていますが、この部分を「entry-content」にすれば記事下に移動もできます。他にもサイドバーを指定したり、サイドバーのどこかに任意のID名やクラス名を付けておけば好きな位置に移動もできます。スマホで私のブログを見てもらえれば移動しているのを実際に確認出来ると思います。
（"load resize"）だとAdSenseが読み込まれ、移動した後にも読み込まれて広告が変化してしまうために、（"DOMContentLoaded resize"）に変更。
※完成イメージ
これでレクタングルが縦に並ぶ事を避ける事が出来ました。私はこの方法で続けていきます。レクタングルにこだわり続けたいと思っているからです。
しかし、移動をさせる事自体はAdSenseのポリシーに反してはいないのですが、いつどう変わるかは分かりません。こちらも自己責任にて変更をお願いします。
もし私のAdSenseが消えていた時は察して使わないように下さい（笑）
詳しくは下記の記事にも書いています。
【ここまで追記部分】
※画像はイメージですが上記の書き換えを行いCSSを適用すればこの用に表示されます。
最後に
様々な種類の広告が増えてきている中で、レクタングル広告だけ表示したいという人がどれ位いるかは分かりませんが、私のように広告はレクタングル！というこだわりがある人の参考になれば嬉しいです。
