WordPressテーマ「AFFINGER4」のAMPページのヘッダーのサイトタイトルとキャプション（キャッチフレーズ）の文字色変更のカスタマイズ方法をご紹介します。
通常ページでは、WordPressダッシュボード→外観→カスタマイズ→「基本エリア設定」で指定することができる部分ですね。
簡単なファイル編集で、AMPページでも同じように表示することができます。
見本ページhttps://kanamii.jp/1514/amp/
スポンサーリンク
子テーマの作成
今回のカスタマイズは「st-amp-css.php」を編集します。
AFFINGER4のアップデート時にカスタマイズ内容が消えてしまわないように、ご自身のパソコンにある親テーマ内の該当ファイルをFTPでお使いの子テーマ内にアップロードして子テーマを作成してください。
他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。
-
-
WordPressのカスタマイズ ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】
前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...
サイトキャプションの文字色変更方法
下記赤枠部分のキャプション（キャッチフレーズ）の文字色変更方法です。
当ブログのようにロゴ画像を設定している場合はこちらのカスタマイズだけでOKですね。
WordPressダッシュボード→外観→テーマ→テーマの変更→「st-amp-css.php」（子テーマ）を開きます。
パソコンの「Ctrlキー」+「F」で表示される検索欄に「header .descr」と入力してマークされる部分にある下記コードを探してください。
|
1 2 3 4 5 6 7 |
header .descr { margin-bottom: 0; padding-bottom: 0; font-weight: normal; font-size: 13px; line-height: 24px; } |
上記コードに文字色を指定するコードを追加します。「#ff6893」の部分は、お好きなカラーコードに変更してくださいね。
変更後のコードです。
|
1 2 3 4 5 6 7 8 |
header .descr { margin-bottom: 0; padding-bottom: 0; font-weight: normal; font-size: 13px; line-height: 24px; color: #ff6893; } |
サイトタイトルの文字色変更方法
続いて、サイトタイトルの文字色変更方法です。
下記は、ロゴ画像を設定していない場合の表示例です。
キャプションと同じく、WordPressダッシュボード→外観→テーマ→テーマの編集→「st-amp-css.php」（子テーマ）を開きます。
パソコンの「Ctrlキー」+「F」で表示される検索欄に「header .sitename a」と入力してマークされる部分にある下記コードを探してくださいね。
|
1 2 3 4 5 |
header .sitename a { color: #333; text-decoration: none; font-weight: bold; } |
上記コード内の「#333」の部分をお好きなカラーコードに変更してカスタマイズ完了です。
追加したコードが反映されない場合は、キャッシュをクリアして再度ご確認ください。
パソコンでのAMPページの表示確認方法を含めた、AFFINGER4のAMP化方法の全手順は下記ページで説明しています。
-
-
【AFFINGER4】AMP化方法の全手順をまとめました
WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。 これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...
以上、AFFINGER4のAMPページのヘッダーのサイトタイトルとキャプションの文字色変更のカスタマイズ方法をご紹介しました。
最後までお付き合いくださりありがとうございます。
関連記事
-
-
【AFFINGER4】AMPページも自分色♪カスタマイズまとめ
当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。 当ブログの開設当初に利用していたWordPressテーマは「STINGER PLUS」。 まだ1年の月日も経っ ...
