【AFFINGER4】AMPページのフッターのカスタマイズ～文字色変更とキャプションの非表示方法～

WordPressテーマ「AFFINGER4」のAMPページのフッター（サイトタイトル・キャプション・コピーライト）の文字色変更とキャプション（キャッチフレーズ）の非表示のカスタマイズ方法をご紹介します。

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

通常ページのキャプションの非表示方法は、下記ページ内で説明しています。

通常ページの表示に合わせて、AMPページでも自由にカスタマイズが可能です。
必要な部分だけ参考にしてみてくださいね。

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

子テーマの作成

今回のカスタマイズは「st-amp-css.php」（文字色変更を行う場合）と「st-footer-content-amp.php」（キャプションを非表示にする場合）を編集します。

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

フッターの文字色変更方法

下記の表示例は全てピンク（#ff6893）に変更していますが、赤枠部分（サイトタイトル・キャプション）と青枠部分（コピーライト）は、個別に設定が可能です。

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

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

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

上記コード内の「#212121」の部分のカラーコードを変更すると、サイト名とキャプションの文字色、その下の「#b22222」の部分のカラーコードを変更すると、マウスホバー（タップ）時の文字色に反映されます。

コピーライトの文字色変更方法

下記は、先に説明したコードのすぐ下にあるコードです。

上記コードの2カ所の「#999」 の部分のカラーコードを変更するとコピーライトの文字色に反映されます。

それぞれ、お好きなカラーコードに変更してみてくださいね。

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

キャプションを非表示にする方法

当ブログでは、下記のようにコピーライトの文字色変更にプラスしてキャプションを非表示にしています。

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

下から5行目のコード内に2カ所ある<?phpのすぐ後ろに「//」（半角）を入力してコメントアウトするだけでカスタマイズ完了です。

編集済みのコードです。

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

以上、AFFINGER4のAMPページのフッターの文字色変更とキャプションの非表示方法をご紹介しました。

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

関連記事