前回までは、WordPressテーマ「AFFINGER4」のAMPページのアドセンス広告のカスタマイズ方法をお伝えしましたが、ここからは細かい部分のカスタマイズに進みます。
今回は、AMPページの背景色の変更方法と背景画像を設定する方法の2種のカスタマイズ方法をご紹介します。
見本ページhttps://kanamii.jp/1514/amp/
反映されるのは、ヘッダー部分と...
フッター部分ですね。
シンプルだったAMPページもちょっぴり自分色に変身です♪
スポンサーリンク
子テーマの作成
今回のカスタマイズは「st-amp-css.php」を編集します。
AFFINGER4のアップデート時にカスタマイズ内容が消えてしまわないように、ご自身のパソコンにある親テーマ内の該当ファイルをFTPでお使いの子テーマ内にアップロードして子テーマを作成してください。
他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。
-
-
WordPressのカスタマイズ ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】
前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...
背景画像をアップロード
背景に画像を使用する場合は、画像ファイルをFTPで子テーマの中にある「images」フォルダ内にアップロード後、【画像ファイル名】の部分を書き換えた下記の画像パスをメモ帳にコピーしておいてください。
|
1 |
/wp-content/themes/affinger4-child/images/【画像ファイル名】 |
※お使いのテーマによってパスの一部（affinger4-child）の部分を変更してください。
AFFINGER5→affnger5-child
AFFINGER5「JET」→affinger5-jet-child
※背景色の変更のみを行う場合、こちらの作業は必要ありません。
st-amp-css.phpを編集
背景色を変更する場合
パソコンの「Ctrlキー」+「F」で表示される検索欄に「body」と入力してマークされる下記部分を探してくださいね。
|
1 2 3 4 5 |
body { min-width: 320px; background-color: #f2f2f2; word-wrap: break-word; } |
上記コード内のカラーコード「#f2f2f2」をお好きなカラーコードに書き換えてカスタマイズ完了です。
背景画像を設定する場合
先に説明したコードを下記のように編集します。
|
1 2 3 4 5 6 |
body { min-width: 320px; background-image:url("【画像のパス】"); background-repeat:repeat; word-wrap: break-word; } |
※【画像のパス】の部分は、あらかじめメモ帳に準備しておいた画像のパスに書き換えてくださいね。
追加したコードが反映されない場合は、キャッシュをクリアして再度ご確認ください。
パソコンでのAMPページの表示確認方法を含めた、AFFINGER4のAMP化方法の全手順は下記ページで説明しています。
-
-
【AFFINGER4】AMP化方法の全手順をまとめました
WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。 これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...
以上、AFFINGER4のAMPページの背景色の変更方法と背景画像の設定方法をご紹介しました。
最後までお付き合いくださりありがとうございます。
関連記事
-
-
【AFFINGER4】AMPページも自分色♪カスタマイズまとめ
当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。 当ブログの開設当初に利用していたWordPressテーマは「STINGER PLUS」。 まだ1年の月日も経っ ...
