ボクアフィ

ボクのアフィリエイト日記

AdSense AFFINGER5 AMP

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

更新日:

この記事は約3分で読めます。
AFFINGER5のAMPページに表示させた「記事内広告」の横幅をレスポンシブに変更する方法

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

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

AFFNIGER5のAMPページに「記事内広告」を表示させるカスタマイズ

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

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

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

AFFINGER5でコンテンツ内の任意の位置にAdSense「記事内広告」を表示する方法
AFFINGER5で好きな場所にAdSense「記事内広告」を表示する方法

AFFINGER5でコンテンツ内の好きな場所に、好きな数だけ、AdSenseの「記事内広告」を表示させる方法をご紹介します。

続きを見る

AFFNIGER5のAMPページに「記事内広告」を表示させるカスタマイズ
AFFNIGER5のAMPページに「記事内広告」を表示させるカスタマイズ

AFFINGER5で生成したAMPページに、AdSenseの「記事内広告」を記事内の好きな場所に、好きな数だけ設置する方法をご紹介します。

続きを見る

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

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

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

手順は以下の通り。

  1. サーバーのファイルマネージャーにログイン
  2. st-ad-amp.phpに移動
  3. 「width="300"」を書き換える

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

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

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 広告コードを修正する方法」に基づきましたが、ポリシー違反にならないという保証はありません。

AFFINGER5のAMPページに3種類のAdSense広告ユニットを表示させる方法
AFFINGER5のAMPページに3種類のAdSense広告ユニットを表示させる方法

AFFINGER5のAMPページに、AdSense「リンクユニット」「記事内広告」「関連コンテンツ」の3種類の広告ユニットを表示させる方法をご紹介します。

続きを見る

おすすめ記事

EWWW Image Optimizerの設定画面

WordPress

画像を「EWWW Image Optimizer」でWebPに変換する方法

2018/11/26  

WordPressプラグイン「EWWW Image Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。

AdSenseの「ページビュー」と「表示回数」の違い

AdSense

AdSenseの「ページビュー」と「表示回数」の違い

2018/06/30  

AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

Google WordPress プラグイン

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

2018/06/08  

WordPressで人気のプラグイン「Contact Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。

-AdSense, AFFINGER5, AMP

Copyright© ボクアフィ , 2019 All Rights Reserved.