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

WordPress Twenty Seventeen
AMPカスタマイズ
AMPページ の フォントを変更する
 
プラグインの AMP for WordPressで『AMP化』したページは、フォントが明朝体になってしまうので、通常ページと同じフォントになるよう「AMPのカスタマイズ」を行った。
 
「style.php」の「font-family:」を変更した結果
 
以下に、AMPページのフォント変更要領を記載。
 
スポンサー リンク
 
 
1. AMPの 「style.php」を変更する
 
『functions.php』で変更する方法もあるが、この方法だと枠線が表示されないという問題点が発生することもあり、AMP for WordPress で用意されている 「style.php」を変更することとした。
 
『functions.php』での変更要領。
 
 
2. AMPテンプレートファイルのコピー
 
「wp-content」→「plugins」→「amp」の中に、「template」フォルダーがあるので、この中のすべてのファイルをコピーする。
AMPテンプレートファイルのコピー
 
「twentyseventeen-child」の中に、「amp」フォルダーを作成し、この中にコピーして編集する。
 
「AMP」プラグインは「amp」フォルダが存在していれば、プラグインのテンプレートではなく「amp」フォルダ内のテンプレートを優先的に認識するので、
 ①.プラグインのファイルを直接いじらなくて済む。
 ②.トラブルがあっても、(子)テーマ内の
  「amp」フォルダにあるファイルを削除すれば、
  元のAMPページが表示される。
 ③.プラグインの更新に影響されない。
 ④.WordPress ダッシュボードから編集できる。
と、安心・便利である。
 
 
3. 「style.php」のカスタマイズ
 
WordPress ダッシュボードのメニューから「外観」→「テーマの編集」を選択する。
WordPress ダッシュボードのメニューから「外観」→「テーマの編集」を選択する
 
右側の「テーマファイル」に表示される「amp」を展開する。
右側の「テーマファイル」に表示される「amp」を展開する
 
「amp」の中から「style.php」を選択すると、ソースコードが表示される。
「amp」の中から「style.php」を選択する
 
「style.php」のソースコードの 【body】の中にある【font-family】を変更する。
【body】の中にある【font-family】を変更する
 
AMP フォントの変更 。
 
「ファイルを更新」をクリックして完了。
 
 
4. 変更結果
 
AMP for WordPressで『AMP化』したディフォルトのページ。
『AMP化』したディフォルトのページ
 
「style.php」の「font-family:」を変更した結果。
「style.php」の「font-family:」を変更した結果
 
 
以上。
(2018.09.30)
 
             

スポンサー リンク
 

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください