HOME → 3 WordPress → 04 運用とトラブル → 

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

WordPress Twenty Seventeen
AMPカスタマイズ
AMPページ の フォントを変更する
 
プラグインの AMP for WordPressで『AMP化』したページは、フォントが明朝体になってしまうので、通常ページと同じフォントになるよう「AMPのカスタマイズ」を行った。
 
「style.php」の「font-family:」を変更した結果
 
以下に、AMPページのフォント変更要領を記載。
 

 

スポンサー リンク

 

 
 
0. AMP プラグインの種類
 
AMPのプラグインには、紛らわしい名前の2つのプラグインがある。
 
「AMP for WordPress」:正式名称は「AMP」?・・・こちらを使用中。
AMP for WordPress
AMP for WordPress
 
「AMP for WP」:正式名称は「Accelerated Mobile Pages」。
「AMP for WP」:正式名称は「Accelerated Mobile Pages」。
 
 
1. AMPの 「style.php」を変更する
 
『functions.php』で変更する方法もあるが、この方法だと枠線が表示されないという問題点が発生することもあり、AMP for WordPress で用意されている 「style.php」を変更することとした。
 
参考:『functions.php』での変更要領。
/*---------------------------------------------*/
/*             AMP フォントの変更              */
/*---------------------------------------------*/
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 Pゴシック","MS PGothic",Sans-Serif;
}
}
<?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 フォントの変更 。
body {
	background: <?php echo sanitize_hex_color( $theme_color ); ?>;
	color: <?php echo sanitize_hex_color( $text_color ); ?>;
	/* font-family: 'Merriweather', 'Times New Roman', Times, Serif; */
	font-family: 'メイリオ', 'Meiryo',arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'MS Pゴシック', 'MS PGothic', Sans-Serif;
	font-weight: 300;
	line-height: 1.75em;
}
 
「ファイルを更新」をクリックして完了。
 
 
4. 変更結果
 
AMP for WordPressで『AMP化』したディフォルトのページ。
『AMP化』したディフォルトのページ
 
「style.php」の「font-family:」を変更した結果。
「style.php」の「font-family:」を変更した結果
 
 
参考:
 
以上。
(2018.09.30)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

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

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