【AFFINGER4】AMPページの記事タイトルの上（アイキャッチ画像の下）にアドセンスを追加する方法

WordPressテーマ「AFFINGER4」のAMPページの記事タイトル上（アイキャッチ画像の下）のファーストビューの位置に、高さを100pxに固定したレスポンシブサイズのアドセンス広告を追加するカスタマイズ方法をご紹介します。

見本ページhttps://kanamii.jp/1514/amp/

以前にご紹介した、通常ページのアイキャッチ画像の下にアドセンスを追加する方法を参考にしてくださった方は、まず初めにAMPページに表示されてしまう広告コードを非表示にするカスタマイズを行う必要があります。

子テーマの作成

今回のカスタマイズは「single-amp.php」と「st-amp-css.php」を編集します。

AFFINGER4のアップデート時にカスタマイズ内容が消えてしまわないように、ご自身のパソコンにある親テーマ内の2つの該当ファイルをFTPでお使いの子テーマ内にアップロードして子テーマを作成してください。
他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。

single-amp.phpの編集

WordPressダッシュボード→外観→テーマ→テーマの編集→「single-amp.php」（子テーマ）を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「タイトル」と入力してマークされる下記部分を探してくださいね。

上記コードのすぐ上に次のコードを追加します。

コード内の2箇所の「*****」部分は、レスポンシブサイズのアドセンスコードの下記赤線部分の「data-ad-client="ca-pub-」以下の数字と「data-ad-slot="」以下の数字に書き替えてください。

参考AMP 広告ユニットを作成する/AdSenseヘルプ

st-amp-css.phpにコードを追加

次に、WordPressダッシュボード→外観→テーマ→テーマの編集→「st-amp-css.php」（子テーマ）を開きます。

最下部に下記コードを追加してカスタマイズ完了です。
追加したコードが反映されない場合は、キャッシュをクリアして再度ご確認ください。

• 「スポンサーリンク」の文字の下の余白をゼロに指定
• 文字サイズを12pxで指定（数値はお好みで変更可能です）

パソコンでのAMPページの表示確認方法を含めた、AFFINGER4のAMP化方法の全手順は下記ページで説明しています。

以上、AFFINGER4のAMPページの記事タイトルの上（アイキャッチ画像の下）にアドセンスを追加する方法をご紹介しました。

最後までお付き合いくださりありがとうございます。

関連記事