AMP対応サイトになりました

このたびitehito.netは、ほとんどのページがAMP(Accelerated Mobile Pages)で構成されたページになりました。当サイトを利用される方は特に意識することなくAMPに対応したページをご覧いただけます。

AMPの詳細についてはプロジェクトのウェブサイト(AMP Websites – amp.dev)をご確認いただくのが間違いないと思いますが、ざっくり言うと、”Accelerated”と称している通り、ウェブサイトをすばやく表示できるようにするための規格です。

ではAMPに対応してことで当サイトの表示が早くなったかと問われると、まだ体感できていないというのが正直なところです。

さて、ここからはマニアックな話になります。

設定したことメモ

当サイトでは「WordPress」と「Twenty Fifteen」テーマ、デザインなどのカスタマイズ用の「子テーマ」という構成になっています。今回、AMPプロジェクトが提供する「AMP」プラグインを導入し、[標準]テンプレートモードに設定しました。

もともと子テーマでは、ウェブサイトの色やフォント、余白の設定の調整と、ほぼほぼ親テーマのままのシンプルな運用だったためか、デザイン崩れやエラーもほぼなく、見た目も従来と変わらずにAMP化できました。

なお、サイト内検索の結果を表示するページだけAMPに未対応です。サイト内検索の検索結果ページにはGooleカスタム検索エンジンを埋め込んで検索結果を表示していますが、AMP対応の方法をまだ理解できておらず、AMP化を保留しています。

CSSファイルをまとめました(関連記事のデザイン崩れ)

AMP化した段階で、実は1か所だけデザイン崩れがありました。この記事の下のほうにもある「関連記事」の部分です。「Jetpack」プラグインの関連記事の機能を使っています。

もともと「Twenty Fifteen」親テーマのCSS、子テーマのCSS、関連記事(Jetpack)のCSSをそれぞれ参照する運用をしていたのですが、AMP化後はJetpackのCSSが適用されていないようでした。そこで、関連記事の部分のスタイルシートを子テーマのCSSに書き加えて調整しました。ついでにスタイルシートの一元管理のために、親テーマのCSSの内容を子テーマのCSSに移植しました。

コメントを残す

名前・メールアドレス・サイトの入力は任意です。メールアドレスが公開されることはありません。

このサイトはreCAPTCHAで保護されています。reCAPTCHAにはGoogleのプライバシーポリシーおよび利用規約が適用されます。