【THE THOR(ザ・トール)】AMPページのCSSをカスタマイズする方法

2020年5月現在、THE THORにてAMPページのCSSをカスタマイズする機能は提供されていません。

ただし、ひと手間かければカスタマイズする方法はありますので私の備忘録のためにも残します。同じような方の参考になれば。

これらのカスタマイズはテーマの機能として提供されるカスタマイズ機能ではありませんので、あくまでも自己責任の元で実施してください。

このブログは分け合って無料テーマcocoonを使うことに決めました。こちらの記事はTHE THORを利用していた当時のカスタマイズ内容です。

THE THORではAMP設定時にカスタマイズから設定できるCSS設定は効かない

「外観」→「カスタマイズ」→「追加CSS]でCSSを書いてもダメ。

「外観」→「テーマエディター」→（子テーマ：THE THOR CHILD）「style-user.css」に直接記述してもダメ。

なぜってそういうものだから。
これらを触ってAMPのCSSを変更できるようにする機能が実装されるものを待ちましょう。

テーマの機能としてできなくてもブログの見栄えのためにCSSはカスタマイズしたい。

AMPの規格は外部CSSファイルの読み込みをサポートしない。なぜってそういうものだから。

スタイルシートを当てたければ直接該当ページにインラインでスタイル指定すれば良い。

通常、投稿ページのメイン部分はsingle.phpテンプレートが利用される。CSSの読み込みとかもここで設定する。

で、カスタマイズでこのテンプレートは変更できる。各テーマが実現しているのこの切り替え機能。

以下、親テーマであるwp-content/themes/the-thor配下のファイルを直接参照・修正します。
実施する場合はバックアップを取得して作業することを推奨します。

※カスタマイズを推奨するものではありません。

THE THORを適用中にAMP用URLのリクエストが来た場合はsingle-amp.phpが設定される。

だからsingle-amp.phpテンプレートにCSSを埋め込んでやればいい。

single-amp.php に元々記述されてるインラインCSS用の締めタグ</style> を見つける。

その直前にカスタマイズしたいCSSを追記すればいい。

デフォルトでは3500line前後に記述があった気がする。テキストエディタでgrepするのが早い。

THE THORの機能でAMP化する際に、AMP規格にのっとってタグを最適化しているケースがある。CSSのセレクタでそのタグを要素指定しているともちろん設定は効かない。

分かりやすいのは<img>タグから<amp-img>への変換とか。imgと指定しているセレクタがあればamp-imgに修正する。

WordPressのテーマ更新機能でテーマの更新を実施すると今回修正したコードは消えますので再度修正が必要です。

やっぱり管理画面からカスタマイズできる機能が欲しい。
FITさん、機能追加をお待ちしております。