こんにちはgreenです。
みなさんはAMP対応してますか？
私は、AMP対応を1度実施しましたが、スマートフォンのツイッター経由で記事を開くと、吹き出し設定などカスタマイズした内容が反映されていませんでした。
ということで、AMP対応を諦めましたが、気になって眠れないのです。
そんなことないよ、いつも早寝早起きでおじいさんみたいばぶー👶
ということで、AMP化の再挑戦をしたいと思います。
読んで欲しい人は、AMPに対応していない人、はてなブログのProにするか迷っている人になります。
記事の内容は、AMP対応、AMP対応の確認、最後にまとめを書きます。
AMP対応
冒頭でも書きましたが、AMP対応は一度実施しており失敗しています。
失敗の内容は、AMP対応の記事を開くと吹き出し設定などカスタマイズした内容が反映されていないという内容です。
失敗の原因は、AMP用のCSSが設定出来ていなかったことです。
では、AMP用のCSSを設定したいと思います。
設定の手順は、カスタマイズ内容を確認し、AMP用ＣＳＳの設定を行い、カスタマイズ内容が反映されているか確認します。
カスタマイズ内容の確認
このサイトのカスタマイズ内容を確認すると、次のカスタマイズをしていることが分かりました。
- グローバルメニュー
- 関連コンテンツ
- パンくずリスト
- トップに戻るボタン
- カテゴリーの色設定
- 目次
- 見出し
- 蛍光ペンのマーカー
- 吹き出し
- パンくずリスト
AMP用ＣＳＳの設定
ここからがAMPの設定です。
まずは、はてなブログ管理画面のAMPを配信する（β版）にチェックを入れます。
※[設定]＞[詳細設定]タブの上から12番目にあります。
※AMP対応は、PROのみ対応可能となっています。
次に、デザインCSSの内容をAMP用CSSにコピーします。
この時、AMP用のCSSにテーマは設定出来ませんので、1~3行目の＠importの内容はコピーしないようにしてください。
AMP対応の確認
AMP用のCSSが設定出来ましたので、カスタマイズの内容がAMP対応の記事に反映されているか確認します。
確認方法は、プレビューのスマートフォン（AMP）を選択して、カスタマイズ内容が反映されているか確認します。
早くも1つ目のカスタマイズ内容であるグローバルメニューが表示されていません。
失敗＿|￣|○
AMP用のCSS設定は失敗していますが、表示速度が気になるので、PageSpeed InsightsでAMP対応した記事の処理速度を確認しました。
※AMPの記事を指定する場合URLの後に?amp=1が必要です。
はっ速い、この速さは魅力的＿|￣|○
グリーンの思考は停止中👶
まとめ
今回の記事のまとめは大きく２つです。
- AMP対応を行うと、記事の表示が速くなる。
PageSpeed Insightsのスコアでは、パソコンンが100、モバイルが93と大きく改善されました。 - はてなブログのAMPを利用すると、記事の見た目が悪くなる。
注意点の詳細は下の引用で確認ください。
はてなブログにおいてAMPを利用する際には、次のような制約があります。
- はてなブログのデザインテーマは反映されません
- デザイン設定でカスタマイズできるサイドバーモジュールや、HTMLの自由記述（記事上下、ヘッタ、フッタなど）は配信されません
- 記事中のstyle属性など、スタイル関連のHTMLは反映されません
- 記事中のJavaScriptは反映されません（このため広告などが表示されないことがあります）
- （HTTPSでなく）HTTPで配信されている画像は表示されません（はてなフォトライフやInstagramなどはHTTPSに対応しています）
デザインCSS以外のヘッダーのタイトル下・記事の記事下・記事のフッターに書いた次のカスタマイズ内容が反映されていないようです。
- グローバルメニュー
- 関連コンテンツ
- パンくずリスト
- トップに戻るボタン
というか、サイドバーの内容もありません。
逆にデザインCSSに設定した下のカスタマイズ内容は、一部変な表示になっている箇所はありますが、AMP対応の記事でも反映されています。
- カテゴリーの色設定
- 目次
- 見出し
- 蛍光ペンのマーカー
- 吹き出し
一旦、この状態でAMP対応を行い、グローバルメニューなど対応出来ていないカスタマイズは、今後対応したいと思います。
あれ❓タイトル下のHTMLを記載出来ないので、どこに書いたら良いのだろう🤔
つんだかも😅
参考に、サイトの表示速度を改善しようとした時の記事です。
表示速度を優先するなら、デザインを諦めてAMP対応をする方が良さそうです。
上で紹介した記事のAMP対応版の見た目を確認したい場合は、👇のリンクを選択してください。
【ブログ運営】ウェブに関する主な指標（LCP）が気になるので改善中です！
2020年9月22日追記
「記事中のstyle属性など、スタイル関連のHTMLは反映されません」の影響により、文字の色や取消し線も表示されなくなりましたので、2度目も失敗です。
AMP対応やめました＿|￣|○
最後まで読んでいただきありがとうございます。
※今回の対応を実施する場合は、AMPのエラーが発生する可能性がありますので、十分注意して実施してください。あと、通常のCSSのテーマ設定を消さないように！
