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

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

【AFFINGER4】AMPページのヘッダーのカスタマイズ~サイトタイトルとキャプションの文字色変更方法~

投稿日:

WordPressテーマ「AFFINGER4」のAMPページのヘッダーのサイトタイトルとキャプション(キャッチフレーズ)の文字色変更のカスタマイズ方法をご紹介します。

通常ページでは、WordPressダッシュボード→外観→カスタマイズ→「基本エリア設定」で指定することができる部分ですね。

簡単なファイル編集で、AMPページでも同じように表示することができます。

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

スポンサーリンク

子テーマの作成

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

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

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

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

続きを見る

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

サイトキャプションの文字色変更方法

下記赤枠部分のキャプション(キャッチフレーズ)の文字色変更方法です。
当ブログのようにロゴ画像を設定している場合はこちらのカスタマイズだけでOKですね。

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

パソコンの「Ctrlキー」+「F」で表示される検索欄に「ブログ名の下のキャプション」と入力してマークされる部分の少し下にある下記コードを探してください。

上記コードに文字色を指定するコードを追加します。「#ff6893」の部分は、お好きなカラーコードに変更してくださいね。

変更後のコードです。

サイトタイトルの文字色変更方法

続いて、サイトタイトルの文字色変更方法です。
下記は、ロゴ画像を設定していない場合の表示例です。

キャプションと同じく、WordPressダッシュボード→外観→テーマ→テーマの編集→「st-amp-css.php」(子テーマ)を開きます。

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

上記コード内の「#333」の部分をお好きなカラーコードに変更してカスタマイズ完了です。

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

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

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

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

続きを見る

以上、AFFINGER4のAMPページのヘッダーのサイトタイトルとキャプションの文字色変更のカスタマイズ方法をご紹介しました。

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

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

Twitter で

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

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

Copyright© Kanamii , 2017 AllRights Reserved Powered by AFFINGER4.