AFFINGER5のAMPページに表示させた「記事内広告」の横幅をレスポンシブに変更する方法

AFFNIGER5のAMPページに「記事内広告」を表示させ、さらに横幅をレスポンシブに変更する方法をご紹介します。

AMPページに「記事内広告」を表示させる方法

AFFNIGER5のAMPページに「記事内広告」を表示させるには、記事内広告をオリジナルショートコードにセットし、「functions-amp.php」ファイルの「adsense」を「originalsc」に書き換えます。

あとは、コンテンツ内の「記事内広告」を表示させたい位置に、オリジナルショートコードをセットするだけです。

詳しくは、以下の記事を参考にしてください。

AMPページの「記事内広告」をレスポンシブに変更する方法

「originalsc」にセットした記事内広告は、300×250サイズに固定されているので、この横幅をレスポンシブに変更します。

横幅をレスポンシブに変更するには、ファイル「st-ad-amp.php」の幅を変更します。

手順は以下の通り。

サーバーのファイルマネージャーにログイン

ファイルを書き換えるので、サーバーのファイルマネージャーにログインしてください。

st-ad-amp.phpに移動

ファイルマネージャーログインしたら、AFFINGER5の「st-ad-amp.php」ファイルに移動します。

場所は、「public_html」＞「wp-content」＞「themes」＞「affinger5」＞「st-ad-amp.php」です。

「width="300"」を書き換える

st-ad-amp.phpの中に、

<amp-ad
type="adsense"
data-ad-client="ca-pub-<?php echo esc_js( $ad_client ); ?>"
data-ad-slot="<?php echo esc_js( $ad_slot ); ?>"
width="300"
height="250">
</amp-ad>

があるので、

<amp-ad
type="adsense"
data-ad-client="ca-pub-<?php echo esc_js( $ad_client ); ?>"
data-ad-slot="<?php echo esc_js( $ad_slot ); ?>"
layout="fixed-height" 
height="250">
</amp-ad>

に変更します。

横幅（width）が300に固定されているのをレスポンシブに変えました。

まとめ

AFFNIGER5のAMPページに「記事内広告」を表示させるには、まずは、記事内広告をオリジナルショートコードにセットし、「functions-amp.php」ファイルの「adsense」を「originalsc」に書き換えます。

次に、コンテンツ内の「記事内広告」を表示させたい位置に、オリジナルショートコードをセットします。

さいごに、ファイル「st-ad-amp.php」のコードをレスポンシブに変更します。

ちなみに、このカスタマイズはAdSenseヘルプの「レスポンシブ AMP 広告コードを修正する方法」に基づきましたが、ポリシー違反にならないという保証はありません。