[無料WordPressテーマ] CocoonのAMPページで横長のバナー広告をレスポンシブ表示する方法

WordPressテーマ Cocoon イメージ

Cocoonの広告ウィジェットを利用してGoogle AdSenseの広告ユニットを設置すると、AMPページには自動でAMP用にタグ変換したコードを貼ってくれるという非常にすばらな機能がありますが、今回その広告ウィジェットを利用して横長のバナーを表示しようとしたところ、AMPページではレスポンシブレクタングル表示になってしまうという現象に遭遇しました。

調べてみるとどうやら現在のCocoonの仕様ではそうなるのが正解のようです。そこで当エントリーではCocoonのAMPページに横長のバナー広告をレスポンシブ表示する方法について調べてみました。

現在のCocoonの仕様

これは元々AMPページで広告ユニット(と言うか画像?)にサイズが設定されていないとAMPエラーになってしまうのを防ぐ為だったと思いますが、Cocoonではその対策としてウィジェットに貼られたコードと広告フォーマットからamp-adタグにメディアクエリを使用して広告サイズをセットするという処理を行っているようです。

その結果、data-ad-format=”horizontal”にしていても広告フォーマットをバナーにしていてもAMPページではレスポンシブレクタングルに変換されてしまうんですね…これが。

Cocoonのソースを追ってみましたが、関連コンテンツユニットとリンク広告ユニット以外は全てレクタングルかレスポンシブレクタングルになる感じでした。

メインカラムに貼る広告なら私もこの自動変換の仕様にお任せするんですが、今回はどうしても横長のバナーで広告を表示させる必要があったので、このCocoonの自動変換機能を使用しないで自分でAMP用のレスポンシブ広告コードを書くしか方法は無さそうでした。

カスタムHTMLウィジェットを使う

とは言うものの、自分でAMP用のレスポンシブ広告コードを書いたところで自動変換されちゃうんですよね…これ一体どうすりゃいいのよ?とか思ってたら、広告ウィジェットを使わずに普通のカスタムHTMLウィジェットを使えばいい事に気が付きました。

AMPページに表示するウィジェットの設定

私が今回使いたいのは高さ100px固定のバナー広告なのでコードはこんな感じになります。

幅が可変で高さが固定のAMP広告
<amp-ad
   layout="fixed-height"
   height="100"
   type="adsense"
   data-ad-client="ca-pub-1234567891234567"
   data-ad-slot="1234567890">
</amp-ad>

参考レスポンシブ AMP 広告コードを修正する方法 – AdSense ヘルプ

AdSenseのヘルプページのコードはwidthやheightの値を””で括ってないのが微妙に気になりますが一応ちゃんと効いてるようです…私は心配なのでつけておこうと思いますけど。

このコードをカスタムHTMLウィジェットにコピペして、data-ad-clientとdata-ad-slotの内容を自分のIDに置き換えればOKです。

AMPページだけに表示するにはウィジェットの一番下にある表示設定をクリックし、プルダウンメニューからチェック・入力したページで表示を選択、ページタブの一番下にあるAMPページにチェックを入れます。もちろん保存するのを忘れないで下さいね?

ウイジェットをAMPページのみ表示する為の設定

これでCocoonの自動変換処理を通さずにAMPページでAdSenseの横長バナー広告をレスポンシブ表示出来るようになります。

AMPページで横長バナーをレスポンシブ表示する方法でした

一般的な広告表示にはこのCocoonの広告ウィジェットは本当に便利で使い勝手がいいと思いますが、今回のバナー表示に関してはこのような形でカスタムHTMLウィジェットを使う以外に方法が思いつきませんでした。

今後、広告フォーマットにバナーが設定されている場合はAMPページでもバナー表示になるよう変更される可能性もありますが、とりあえず現在の仕様ではこの方法で何とか出来ますので、もし私と同様のケースでお困りの方がみえたらお役に立てば幸いです。