伝えたい想いを自分らしく・・・

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

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

投稿日:2017年3月9日 更新日:

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

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

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

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

スポンサーリンク

子テーマの作成

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

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

WordPressのカスタマイズ ~子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法~ - ゼロからのWordPress入門【18】

前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...

続きを見る

今後のアップデートでAMPに関わる部分の変更(親テーマのコードの変更)があった場合は、再度子テーマの作成とカスタマイズが必要になります。

st-ad-amp.phpの編集

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

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

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

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

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

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

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

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

【AFFINGER4】AMP化方法の全手順をまとめました

WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。 これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...

続きを見る

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

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

関連記事

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

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

続きを見る

【AFFINGER4】AMPページの最初の見出し(h2)の前にアドセンスを追加する方法

コードの追加場所を「子テーマ」のfunctions-amp.phpに変更しました。(テーマのアップデートの際の再編集は必要なくなりました) WordPressテーマ「AFFINGER4」のAMPページ ...

続きを見る

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

Copyright© Kanamii , 2017 All Rights Reserved Powered by AFFINGER4.