【AFFINGER5】AMPページのデザイン（css）をカスタマイズする

AFFINFERのAMPページのデザインを変更する方法です。

st-amp-css.phpを子テーマに作成し、minify化を解除したのちにカスタマイズしていきます。

AFFINGERはとても手軽にAMP化できるステキなテーマですが、カスタマイズしないで使うと大変シンプルで灰色一色です。

通常ページ

AMPページ

当然AMP化しても内容は変わらないのですが…画面内にメリハリがなく、強調箇所もマーカーくらいしかなく分かりにくいです。

このシンプルなAMPページをカスタマイズして通常ページのデザインに寄せていきます。

まず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ページのデザインは子テーマから読み込まれるようになりました。
親テーマをバージョンアップしても変更したカスタマイズは消えませんが、バグの修正などがあった場合はその修正も効かないため注意は必要です。

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ページ改

フォントサイズとマージンに若干の違いがありますが、デザインをだいたい寄せることができました。

このやり方の問題点

まずなにより第一に、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が存在するため読み込まれない）