【AFFINGER4】AMPページのアドセンスの中央寄せと「スポンサーリンク」のラベル追加方法

WordPressテーマ「AFFINGER4」のAMPページのアドセンス広告を中央寄せにする方法と「スポンサーリンク」のラベル表記を追加する方法をご紹介します。

WordPressダッシュボード→AFFINGER4管理→Google連携に関する設定→「AMP用のアドセンスコード」に入力したコードが適用される部分ですね。

2018年4月現在では、記事下のアドセンスは中央寄せがデフォルトとなっていますが、当ブログではAMPページの最初の見出し（h2）の前にもアドセンスを自動追加するカスタマイズを行っていますので、その関係で以下のカスタマイズを行っています。

記事下とショートコードを使用しているアドセンス広告に反映されるカスタマイズです。

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

子テーマの作成

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

AFFINGERのアップデート時にカスタマイズ内容が消えてしまわないように、ご自身のパソコンにある親テーマ内の2つの該当ファイルをFTPでお使いの子テーマ内にアップロードして子テーマを作成してください。

他のカスタマイズで既に作成済みの場合は新たに作成する必要はありません。

st-ad-amp.phpの編集

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

下の方にあるこの部分を見つけてくださいね。

上記コードに中央寄せのコードとラベル表記を追加します。
最後の</div>を忘れずに。

※AFFINGER5「WING」、及びAFFINGER4の新しいVerは、あらかじめ広告が中央寄せとなっていますが、最初の見出し（h2）の前にアドセンス広告を自動追加するカスタマイズの関係で上記コードを追加しています。

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

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

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

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

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

以上、AFFINGER4のAMPページのアドセンス広告を中央寄せにする方法と「スポンサーリンク」のラベル表記を追加する方法をご紹介しました。

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

関連記事