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

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

【AFFINGER4】AMPページの背景色の変更方法と背景画像の設定方法

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

前回までは、WordPressテーマ「AFFINGER4」のAMPページのアドセンス広告のカスタマイズ方法をお伝えしましたが、ここからは細かい部分のカスタマイズに進みます。

今回は、AMPページの背景色の変更方法と背景画像を設定する方法の2種のカスタマイズ方法をご紹介します。

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

反映されるのは、ヘッダー部分と...

フッター部分ですね。

シンプルだったAMPページもちょっぴり自分色に変身です♪

スポンサーリンク

子テーマの作成

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

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

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

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

続きを見る

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

背景画像をアップロード

背景に画像を使用する場合は、画像ファイルをFTPで子テーマ(affinger4-child)の中にある「images」フォルダ内にアップロード後、【画像ファイル名】の部分を書き換えた下記の画像パスをメモ帳にコピーしておいてください。

※背景色の変更のみを行う場合、こちらの作業は必要ありません。

st-amp-css.phpを編集

背景色を変更する場合

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

上記コード内のカラーコード「#f2f2f2」をお好きなカラーコードに書き換えてカスタマイズ完了です。

背景画像を設定する場合

先に説明したコードを下記のように編集します。

※【画像のパス】の部分は、あらかじめメモ帳に準備しておいた画像のパスに書き換えてくださいね。

追加したコードが反映されない場合は、キャッシュをクリアして再度ご確認ください。

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

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

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

続きを見る

以上、AFFINGER4のAMPページの背景色の変更方法と背景画像の設定方法をご紹介しました。

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

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

Twitter で

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

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

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