AFFINFERのAMPページのデザインを変更する方法です。
st-amp-css.php
を子テーマに作成し、minify化を解除したのちにカスタマイズしていきます。
minify化とは?
空白・改行・コメントを削除し、ソースコードを軽量化することです。
ファイルサイズが小さくなり高速で表示できるようになります。
AFFINGERはとても手軽にAMP化できるステキなテーマですが、カスタマイズしないで使うと大変シンプルで灰色一色です。

通常ページ

AMPページ
当然AMP化しても内容は変わらないのですが…画面内にメリハリがなく、強調箇所もマーカーくらいしかなく分かりにくいです。
このシンプルなAMPページをカスタマイズして通常ページのデザインに寄せていきます。
Contents
まずst-amp-css.phpを子テーマに作成する。
作成すると言ってもダウンロードしてからそのままアップロードするだけです。
AMPページのデザインはstyle.css
ではなくst-amp-css.phpを編集する必要がありますが、まず親テーマがバージョンアップされた時のために子テーマを作成します。
デザインを変更するだけであればsingle-amp.php
などの変更は必要ないのでst-amp-css.php
だけで大丈夫です。
子テーマはAffinger購入者に配布されているので、子テーマ自体の作り方についてはここでは触れません。
/public_html/wp-content/themes/affinger5
の中にst-amp-css.php
というファイルがあるのでこれをダウンロード。
そののち、/public_html/wp-content/themes/affinger5-child/
のフォルダの中に上げなおします。
これでAMPページのデザインは子テーマから読み込まれるようになりました。
親テーマをバージョンアップしても変更したカスタマイズは消えませんが、バグの修正などがあった場合はその修正も効かないため注意は必要です。
ポイント
子テーマのファイルに追記していけるのはfunction.php
とstyle.css
のみです。
親のst-amp-css.php+子テーマのst-amp-css.php
に必要なことを追記していく、ということはできません。
必要な情報は全て子テーマのst-amp-css.php
に記述してある必要があります。
minify化されている箇所をコピーし、通常のCSSコードに変換する
WP管理画面の外観>テーマエディターからテーマの編集に進んでいき、先ほどアップロードした子テーマのst-amp-css.php
を選択します。
すると17行目の ?>
と 21行目の ?>
の間、19行目にCSSらしきものがびっしり書き込まれているのが分かると思います。

びっしり…
内容を理解するのが大変ですが、一応この形のまま変更を加えてももちろん反映してくれます。
しかしあまりに見づらい…ので通常のCSSに変換してから修正を加えていきたいです。
通常のCSSに変換するにはCSSのコード整形ツールを使うと便利です。
19行目のコードを全て切り取って左の枠にペーストすると…
いつものCSSに変換してくれます。
超見やすい。
あとは変換後のCSSをst-amp-css.php
の19行目に張り付ければOKです。
文頭の*
もそのまま張り付けてかまいません。
実際にカスタマイズをする
あとは通常のCSS同様にカスタマイズしていきます。
phpファイルに書き込んでいますがCSSの書き方で大丈夫です。

chromeの検証が超便利
PCでAMPページを開いてchromeの検証で変更したいところのクラスを調べていきます。
今回はh2タグ、pタグのフォントサイズ、見出し付きフリーボックスのカラー、ふきだしのカラーとフォントサイズを変更しました。
結果

通常ページ

AMPページ改
フォントサイズとマージンに若干の違いがありますが、デザインをだいたい寄せることができました。
このやり方の問題点
- 表示を高速化させるためのminify化なのに本末転倒
- ふきだしを追加したらCSS書き足さないとダメかも
まずなにより第一に、AMPにして高速表示させるためのminify化なのに解除したら意味ないじゃん…ということです。
ちなみにst-amp-css.php
のファイルサイズは47.1KB、minify化を解除して変更を加えたところ56.31KBでした。
この違いをどう見るかですが…最善を尽くす場合はデザインを変更した後に再度minify化したらよいと思います。
こちらのサイトでCSSをminify化できます。
そして2点目、st-amp-css.php
の一番したのあたりを見ていて気付いたのですが、現在使っているふきだし1と2のデザインについては記述があったのですが、使っていない3以降については記述がありませんでした。
3以降を追加する場合は自分でデザインを記述する必要がありそうです。
(おそらく追加した時点で親テーマのst-amp-css.php
には自動でデザインが追記されるのですが、子テーマにst-amp-css.php
が存在するため読み込まれない)