2016年2月24日にリリースされた「AMP」ですが、WordPressをお使いの方はAutomatic社が作ったプラグインを利用してAMPの対応をしている方も多いのではないでしょうか。

AMP – WordPress Plugins

最近のアップデートでエラーが表示されることも少なく、自分が関わっているWebサイトはうまく表示できています。しかし、このプラグインで対応するとTHE・WordPressというようなデザインかつ書式が明朝体でなかなかダサいです。

そこで今回はAMPプラグインで表示されるページのデザインを修正する方法をご紹介したいと思います。

このサイトのAMPページ例：DEMO

なお、前回のAMPのアナリティクス対応記事と同様にプラグインを直接編集しますのでアップデートすると再度対応が必要になりますのでご注意下さい。

amp-style.phpを作成

FTPソフトを使い、テーマファイル直下に「amp-style.php」を作成して下さい。

amp-style.phpはphpファイル形式ですが、中身はカスタマイズしたいスタイルシートを記述して下さい。以下は記述例です。

amp-style.php
CSS
1
2
3
body {
  font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*明朝体じゃなくなります*/
}

ampプラグインの中にあるsingle.phpを編集

FTPでwp-content>plugins>amp>templates>single.phpを編集して下さい。

そして以下の12行目の</style>直前にamp-style.phpを挿入するコードを記述。

single.php
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic|Open+Sans:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<?php do_action( 'amp_post_template_head', $this ); ?>
<style amp-custom>
<?php $this->load_parts( array( 'style' ) ); ?>
<?php do_action( 'amp_post_template_css', $this ); ?>
<?php get_template_part('amp-style');?>
</style>

<?php get_template_part(‘amp-style’);?>はテーマファイル直下にあるamp-style.phpを呼び出すコードです。

以上でデザインのカスタマイズが完了です。

私は、これに加えて記事下にシェアボタンと関連記事を表示させています。なお、Google fontやFont AwesomeのようなWebフォントは使用できないのでご注意下さい。