AMP for WordPress のAMPページのフォントを変更する方法

プラグイン、AMP for WordPressを使用してAMP化した場合、デフォルトでの記事のフォントは明朝体になります。AMPのページのフォントを通常ページと同じにしたいと思う方も多いと思います。CSSに使用するフォントを指定することで、表示するフォントを変えることができます。AMP for WordPressでは、CSSにコードを追加する関数が予め用意されています。本記事では、AMP for WordPressの関数を使って、コンテンツ（body)のフォントを変更する設定方法を紹介します。

AMP for WordPress でAMPページのフォントを指定追加する方法

既存のCSSに設定を追加する場合は、”amp_post_template_css”と言う関数を使用します。フォントのサイズは16ピクセル、メイリオ、ヒラギノ角ゴ、MS P ゴシックなどの比較的ブログで普及しているフォントを使用するCSSフォントコード設定を関数を使用して設定します。

add_action( 'amp_post_template_css', 'amp_additional_css_styles' );

function amp_additional_css_styles( $amp_template ) {
// CSSに追加するコード（CSSコード以外は入れないで下さい）
?>
body {
font: 16px "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
}
<?php
}

上のコードをコピーします。設定するフォントは、お好みによって変更して下さい。

WordPress ダッシュボードの「外観」から「テーマの編集」を選択します。右側に表示されるテーマファイルの一覧の中の「テーマのための関数（functions.php）」をクリックし、ソースコードを表示させます。functions.phpのコードの最後に、コピーしたコードを貼り付けて、［ファイルを更新］ボタンを押して設定を保存します。

備考：
上の例では、親テーマを直接編集しています。しかし、親テーマを直接編集して設定した場合は、テーマが更新されると設定内容が上書きされてしまい、再設定が必要となります。テーマの更新の毎に設定を行うことは保守性が良くありません。子テーマを使用すれば、設定はテーマを更新しても保持されるため、保守性が良いです。テンプレートファイルの編集は、子テーマを利用することを強くお勧め致します。

作業は以上です。

AMPページを表示して、設定が反映されているか確認します。