パソコン画面での記事下などにレクタングルの広告を横に2つ並べて表示する方法は、ダブルレクタングルと呼ばれています。Simplicityでは、ダブルレクタングル表示用のウィジェットがありましが、Cocoonには備わっていません。
本記事では、Cocoonで記事下にダブルレクタングル広告を設置する方法を紹介します。
Cocoonでダブルレクタングルのウィジェット提供を見送った理由
SimplicityとCocoonの制作者、わいひらさんがサポートフォーラムで、ダブルレクタングルを見送った理由についての説明を以下に紹介します。
左右にコードを分けて入れられる
ということができる利点に対して
- PC広告ウィジェットに入力項目が2つ必要になるので邪魔（ダブルレクタングルフォーマット以外では使わないのに）
- もしくはダブルレクタングルウィジェットをもう一つ増やす必要がある
- コードが複雑になる
- コードの保守性が下がる
という難点の方が目立ったので、今回は採用を見送りました。
上記に加えて、記事枠一杯に横長にしたレスポンシブ広告を設置できるようになったこと、左右の広告の収益パフォーマンスを分けて計測するほどの必要性を感じなくなったことも採用を見送った理由として挙げています。
こらはとても妥当なお考えだと思いました。記事下のほぼ同じ大きさの広告スペースを1つの広告で埋めるか、それとも2つの広告で埋めるかの違いです。
実際のところ、ダブルレクタングル表示専用のウィジェットを使用しなくても、テキストウィジェットを使用して比較的簡単にレクタングル広告を並列に並べて表示することはできます。
そのため、テーマの方でわざわざダブルレクタングル広告のウィジェットを用意する必要性は少ないと思います。
横幅一杯のAdSense レスポンシブ広告は増加中
AdSenseのレスポンシブ広告は、設置された位置の幅に併せて自動的に広告の大きさを調節して表示する機能を備えています。そのため、記事下の枠一杯、またはそれに近い横幅で広告を表示することができます。
2017年夏にネイティブ記事内広告が、AdSenseがサポートする広告フォーマットのバリエーションに加わりました。ネイティブ記事内広告はレスポンシブデザインとなっており、記事の横幅に近い大きさで表示されることが通常です。
ネイティブ記事内広告が加わってから記事の枠の幅一杯の広告は増えてきています。そのため、記事下のレスポンシブ広告に表示可能な広告数も多いです。
シングルではなくダブルレクタングルを所望する事例、理由
現在、記事下はシングルのレクタングル広告の採用が増えてきていますが、従来のようにレクタングル広告を2つ並べて掲載することを希望するサイト運営者の方は少なくないと思います。
ダブルレクタングルでは、種類の異なる広告を掲載することが可能です。例えば、AdSenseとAmazon、楽天とAmazonのレクタングル広告を組み合わせて表示することなどが可能です。
AdSenseは自動広告もあるため、記事下はAmazonと楽天やその他のレクタングル広告を設置するなどの選択肢もあります。
記事下ダブルレクタングルの設置方法
Cocoonには、Simplicityの様なダブルレクタングル専用のウィジェットは提供されていませんが、オリジナルのPC用テキストウィジェットが標準で装備されています。PC用テキストウィジェットは、その名の通り、PCでアクセスした時のページのみに表示されるテキストウィジェットです。
通常のテキストウィジェットのコード入力欄にダブルレクタングル設置コードを入力すれば、記事下にレクタングル広告を並べて表示することができます。
AdSense レクタングル広告コードの作成取得方法
ダブルレクタングルに使用する広告コードは、レスポンシブではなくサイズ固定の広告ユニットを使用します。AdSenseの場合のレクタングル広告の作成方法を以下に紹介します。
［広告の設定］-［広告ユニット］のページを表示し、［新しい広告ユニット］を押します。作成する広告の種類の中から、「テキスト広告とディスプレイ広告」を選びます。
広告ユニットの作成ページが表示されます。名前を入力して、広告サイズを選びます。パソコンの記事下に設置するダブルレクタングルの場合は、338 x 280 レクタングル（大）が程良いサイズです。（デフォルトはレスポンシブですが、ダブルレクタングルに設置する広告ユニットは固定サイズをお勧め致します。）
［保存してコードを取得］のボタンを押すと、広告コードが作成されて表示されます。広告コードをコピーして、ウィジェットに貼り付けます。
ダブルレクタングル広告設置コード設置例
WordPressダッシュボードから［外観］から、ウィジェットのページを表示します。CocoonのPC用テキストウィジェット、「［C］PC用テキスト」をクリックし、ウィジェット設置場所を選択します。記事下に設置する場合は、「投稿本文下」になります。
［ウィジェットを追加］のボタンを押すと、指定した位置（ここでは投稿本文下）にPC用テキストウィジェットのウィンドウが表示されます。コード入力欄に、ダブルレクタングルの配置をした広告コードを入力します。
ダブルレクタングルコード例
<table>タグを使って、左右それぞれのレクタングル広告コードをテーブルデータ（<td>）タグ内に配置すると簡単に並べて広告を表示することができます。以下、コード例です。
<table> <tr> <td> 左側のレクタングル広告コード </td> <td> 右側のレクタングル広告コード </td> </tr> </table>
テキストウィジェット右下の［保存］ボタンを押して、ウィジェットをセーブします。
注意事項・留意点
ダブルレクタングル広告コードを入力したテキストウィジェットは、パソコン画面でのみ表示させるように指定する必要があります。表示端末を指定しない場合、モバイル端末で表示した時にレクタングル広告が縦に続けて表示されるようになってしまいます。縦に続けてレクタングル広告が表示されると、AdSenseのポリシー違反となる場合があります。（基本的にポリシー違反です。）
CocoonのオリジナルPC用テキストウィジェットを使用すれば大丈夫です。通常のテキストウィジェットやカスタムHTMLウィジェットを使用する場合は、ウィジェットロジックなどで、表示端末をパソコンに指定する必要があります。
モバイルの記事下にも広告を表示する場合は、レクタングル広告1つを別のウィジェットで設置します。
本ページの記事下の関連コンテンツの下のダブルレクタングルは、上で紹介した方法で広告コードを設置しています。
コメント
いまどき
テーブルでレイアウトはやらんわなー
HTML5では、テーブルでレイアウトエイドすることは非推奨です。記事下の広告設置にテーブルを使用することがレイアウトに該当するかどうかは考え方次第ですが、基本的には該当しないと思います。少なくともHTML5で非推奨としている理由には該当しません。また、記事下に設置する広告はメインコンテンツではありません。
広告の設置や掲載方法は、様々なやり方があります。求めること（例：記事下にダブルレクタングル広告を表示する）を実現する上で、適切と思われる方法を選べば良いのではと思います。もっと簡単で適切に表示する方法があれば、勿論そのほうがよろしいかと思います。
「いまどき」と言う点では、ダブルレクタングルの広告表示も場合によっては該当すると思います。CoCoonで標準となっているように横長のレクタングル広告を表示する方が今時の広告表示の形式です。
さらに、「いまどき、パソコン。」という見方もあると思います。サイトによっては、モバイル端末からの訪問が圧倒的の場合もあります。また、最新のトレンドの広告表示は自動化です。自動化の流れは、今後、さらに強まることは確実です。
だからと言って、パソコンでの広告掲載、記事下ダブルレクタングル広告表示が時代遅れで、ダメだと言うことではないと思います。広告の設置方法、実現方法についても同様です。
横長のレクタングル広告1つ表示と比べて、収益性がどちらが優れているかは、サイトやコンテンツによって異なります。パソコンでダブルレクタングルの広告を表示するかどうかもサイト運営者の考え方によります。ダブルレクタングルをどのように実現するかも、やり方は1つではないので、サイト運営者の考えなどによると思います。