広告を左右に2個並べて表示する方法 をお探しですか？
Google AdSense の審査を無事通過して、サイトに広告を掲載できるようになって一通りページへの広告設置も終わったら、今度は広告自体のクリック率の向上や視認率の向上など、広告設置の最適化にウェイトをシフトしたくなるものです。
ですが、広告の設置方法には１つの決まった正解は存在しないため、試行錯誤をしながら、自分自身のサイトに最適な広告設置方法を模索していく必要があります。
そこで、自分自身だけで広告設置の最適解を見つけるのは難しいため大手の企業サイトとかを参考にしてみると、そういった大手サイトでよく見かけるのは、各記事ページのコンテンツの下に広告を2個並べるというスタイル。
このスタイルは、サイトの訪問者が、記事を一通り読み終えて次のアクションを考えるタイミングで広告が表示されるため、興味のある内容が広告として表示されているとクリックされる確率が高いのでは？という考え方に基づく広告設置スタイルです。
この記事下に広告を2個左右に並べるスタイルを実現する方法としては、CSSを駆使する方法もありますが、WordPressであれば、プラグインを利用してCSSの知識など無しに簡単に実現することが可能になっています。
今回の記事では、WordPressのプラグインを利用してGoogle AdSense広告を記事下に左右に２個並べて表示する方法を解説します。記事下に広告を左右に２個並べることは、全てのサイトでのクリック率向上を保証するものではありませんが、試行錯誤の一つの方法として、ぜひトライしてみてくださいね。
WordPressプラグインの準備
実際には、１種類のプラグインをインストールするだけで広告を左右に2個並べることが実現できてしまいます。
利用するプラグインは「Ad Inserter」。
まず手始めに、プラグイン「Ad Inserter」をインストールするところから始めましょう。
WordPressの公式サイト ： Ad Inserter
Ad Inserter の基本的な使い方
「Ad Inserter」のインストールは、その他のプラグインのインストールと同じですので、普通にインストール作業を完了させましょう。
「Ad Inserter」をインストールしたら、いよいよ作業開始ですが、「Ad Inserter」自体の基本的な利用方法については別の記事にまとめていますの、初めて「Ad Inserter」を利用する場合はその記事を参考にして基本を押さえるところから始めましょう。
広告を左右に2個並べて表示する方法
広告を左右に2個並べるためには、いくつかの準備が必要です。
レクタングル（長方形）サイズの広告コードの取得
記事（投稿）ページの横幅の確認
当たり前と言えば当たり前ですが、広告を左右に2個並べて表示するためには、
まず、レクタングル（長方形）サイズの広告が必要ですし、
用意したレクタングル（長方形）サイズの広告を横に2個並べるだけの横幅も記事掲載部分に必要です。
ですので、まずはこれらの準備を行います。
Google AdSense のレクタングルサイズの広告コードの取得
広告コードの取得は、こちらの記事を参考にしてみてください。
レクタングルサイズのサイズ感
レクタングル（長方形）サイズの広告サイズとしては、以下の6サイズが用意されています。
336 × 280 (横の長さ(px) × 縦の長さ(px))
300 × 250
250 × 250
200 × 200
180 × 150
125 × 125
サイズ的には、より大きいサイズの広告を選べば選ぶほど収益性は高くなるのですが、一番多きサイズを選ぶ場合は2個横に並べるとすると 336 + 336 の合計で 672 pixel(px)のサイズ幅が本文部分の横幅として必要になります。当然、ページの本文部分の横幅との兼ね合いがあるので、2個横に並べることができるギリギリのサイズを選ぶと良さそうですね。
記事本文部分の横幅のpixel数の確認
WordPressを利用している場合、これは利用しているテーマなどによってもまちまちでしょう。
自分自身でCSSなどを修正して記事本文部分の横幅を変更している場合も同様です。
ですので、厳密に横幅を確認するためには、CSSの記載箇所を確認していくことになります。
ただ、例えばテーマをインストールしていて、どのCSSを見ると横幅が確認できるのか良く分からないようなケースもあると思います。そんなケースでは、トライ＆エラーで最適な広告サイズを探り当てていきましょう。具体的な方法としては、広告サイズを大きいサイズから徐々に小さいサイズへと変更していって、うまい具合に左右に広告が横並びになるかどうかを試していってください。先ほどの6種類のレクタングルサイズの広告は全てのサイズで横幅が異なるため、大きいサイズ感の広告から順に試していけば、どれかで横幅が収まるハズです。ちょっと面倒くさい作業にはなりますが、CSSの横幅の記載場所を探すよりは手っ取り早く目的を達成できると思いますので、ちょっとだけ頑張ってみてくださいね。
ちなみに、広告を左右に2個並べようとして記事本文の横幅よりもサイズが大きくなった場合はどうなるのでしょうか？その場合は、縦に広告が並ぶだけで特にエラーが発生したりはしませんので、安心してトライ＆エラーを繰り返してみましょう。（もちろん記事ページ自体が表示されなくなるようなこともありませんのでご安心を。）
広告を左右に2個並べて表示するための Ad Inserter の設定方法
ここまでで準備作業は完了です。
あとは実際の設定作業を残すのみとなりました。
結論から言うと、以下の2つの広告設定を Ad Inserter で行えば作業は完了です。
左右それぞれ別の設定を行っていきますので、それぞれの設定内容を見ていくことにします。
左側の広告の設定
まずは左側の広告の設定内容です。
①1ブロック目
広告コードを設定するブロックを指定します。
今回の設定では空きブロックが2個必要となります。ちなみに、これは空いているブロックが2個あればよく、1ブロック目と2ブロック目など、続いている必要はありません。（2ブロック目と5ブロック目が空いている、などでも全く問題ありません）
②挿入位置
ページの中で広告の挿入位置を指定します。今回は記事下に左右に2個並べて広告表示したいので、“コンテンツ下”を表す“After Content”を指定します。
③整列方法
この設定項目が、広告を左右に2個並べて表示する方法 のミソと言えばミソの部分となります。
この設定項目で、広告の整列方法を指定することができます。簡単な設定項目としては
左詰め
右詰め
中央に配置
などを選択することも可能です。
今回は左右に並べて広告を2個表示したいので、それが可能となる“Float Left”を選択します。
④記事タイプ
ここで、広告を設置するページタイプを選択することができます。
通常の記事ページ（投稿ページ）を表す“Post”
カテゴリーページを表す“Category pages”
タグページ/アーカイブページを表す“Tag / Archive pages”
あたりを選択しておけば無難だと思います。
ここまで設定したら１ブロック目の広告設定内容を保存しましょう。
右側の広告の設定
続いて右側の広告の設定内容です。
①2ブロック目
広告コードを設定するブロックを指定します。
空いている2つ目のブロックを利用して広告設定を行います。
②挿入位置
ページの中で広告の挿入位置を指定します。こちらは1つ目のブロックと同じように、“コンテンツ下”を表す“After Content”を指定します。
③整列方法
この設定項目は、1つ目のブロックとは設定内容を変える箇所になります。
具体的には“Float Right”を選択します。
④記事タイプ
こちらも1つ目のブロックと同じように、
通常の記事ページ（投稿ページ）を表す“Post”
カテゴリーページを表す“Category pages”
タグページ/アーカイブページを表す“Tag / Archive pages”
を選択しておきます。
ここまで設定したら２ブロック目の広告設定内容を保存しましょう。
これで広告を左右に2個並べて表示する設定は全て完了しました！下のイメージのようにレクタングルサイズの広告が左右に2個並んで表示できていると思います。お疲れさまでした！
モバイルの禁止事項への対応
AdSense広告を利用する場合、いくつかの禁止事項が存在します。その中でもモバイル端末に対する禁止事項が存在しており、今回のようにレクタングルサイズの広告を左右に2個並べて表示させる場合は注意が必要になります。
先ほどまでの設定内容はPC画面での広告配置を想定しており、その設定のままでモバイルで画面表示させると、広告を左右に2個並べて表示させるのには横幅が足りないことになり、広告が上下に2つ並んで配置されることになります。
広告サイズとして、最大サイズの 336 × 280 で設置している場合、広告が上下に2個並んで配置されてしまうと画面の大部分を広告だけで占有してしまう可能性がでてきます。
Googleとして、モバイル画面がAdSense広告だけで埋め尽くさている状態は推奨しておらず、最悪のケースでは広告の配信停止などのペナルティが課される可能性があります。
Ad Inserter には広告設置を行うデバイスの種類を限定する機能も標準で装備されているので、ここでは上記の危険性を回避するために、その機能を利用してPCの場合にだけ広告が表示されるように設定してみようと思います。
Ad Inserter のデバイス限定での広告設置機能
先ほどの Ad Inserter の広告コードを設定する画面に「Devices」というボタンが表示されています。
この「Devices」ボタンをクリックすると、画面下部に広告を設置するデバイスの条件を設定できるタブが表示されてきます。
このタブを利用して設定を行っていきましょう。
①「Devices」ボタンをクリック
ボタンをクリックすると、上のイメージのように下部にタブ領域が表示されます。
③具体的な広告表示デバイスの設定を行うことができます。
左端のチェックボックスにチェックを入れます。
真ん中のリストボックスでは“show”を選択します。
右側のリストボックスでは、広告挿入を有効化するデバイスを選択できます。PC（Desktop）、タブレット（Tablet）、モバイル（Phone）から選択することができます。
まとめ
いかがでしたでしょうか？
比較的クリック率が良好と言われている、記事下のレクタングルサイズ広告の左右2個表示について、WordPressのプラグイン「Ad Inserter」を利用した設定方法を解説してきました。
英語表記のプラグインを利用することもあり、多少取っつきにくさはあるかもしれませんが、今回の記事に記載されている手順通りに作業を進めていけば十分設定が終えられる程度の難易度だと思います。
ちなみに、「Ad Inserter」はそれなりに応用が利く広告挿入プラグインとなっているため、これを機に使いこなしてみてもいいかもしれませんね。
いずれにしても、広告設置は試行錯誤の連続となりますので、その試行錯誤作業の手助けとしてこの記事がお役に立てば、こんなに嬉しいことはありません。