ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

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

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

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

AMP for WordPress デフォルトのAMPページ

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

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


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

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

ファイルを編集して、CSS用のコードを追加します。

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

作業は以上です。

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

AMPページでの記事本文のフォント変更後

無事、フォントが変更されています!

YouTube

本記事の内容をYouTubeで紹介しています。

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top
error: Content is protected !!