AMPAMP化することで様々なメリットがあり、様々なサイトでAMP化が進んできていますよね。WordPressや一部の無料ブログだと、プラグインやボタン1つでAMP化できるとこが増えていますが、それ以外だったらどうしたら良いのか。AMP化する際にHTMLやCSSをどのように変更したら良いのか、その基礎を解説していきます。コンテンツの転載は固くお断りいたします。Contentsコード解説htmlタグエンコード指定AMP専用タグのためのJavaScriptcanonicalCSS!importantstyle属性ボイラープレート画像さいごにコード今回、基礎の解説に使用するコードは以下のようなものです。コードの解説は後でご紹介します。1つ目のコードはAMP化前のHTMLです。2つ目の以下のコードは、AMP化前のHTMLのためのCSSファイルです。!important;}3つ目の以下のコードは、AMP化後のHTMLで別のCSSファイルはありません。先程のコードで、AMP化で追加される部分と変更される部分について簡単に解説していきます。htmlタグhtmlタグは以下の2種類のどちらかに書き換える必要があります。終了タグは変更する必要がありません。エンコード指定ページのエンコードを指定する必要があります。AMP専用タグのためのJavaScriptAMP化ページでは、様々なタグがAMP専用のものに置き換える必要があります。そのタグを処理したりするために、以下のJavaScriptを読み込みます。canonical非AMPページとAMPページの2つがある場合、非AMPページへのcanonicalが必要です。非AMPページが不要な場合は、AMPページ自身へのcanonicalが必要です。styleタグを使用して書き込む必要があります(カスタムフォントは別です)。styleタグに追加して下さい。!importantAMP化ページでは以下のように『!important』を使用することは出来ません。style属性を用意することは出来ないので、CSSはstyle要素に記述する必要があります。JSが読み込まれるまでの間に必要なものです。画像AMP化をする場合、imgタグは『amp-img』に置き換え、終了タグの『</amp-img>』も必須になります。基本的にwidth属性とheight属性が必要になり、画像の縦幅と横幅のピクセル数を指定します。AMPで表示する画像は、画像の大きさをそのまま表示させようとしてしまい、画面幅が600pxしかないのに画像幅が800pxあると、画面外へはみ出してしまいます。これを防ぐために『layout="responsive"』が必要です。これを記述することで、画面幅に対して常にアスペクト比を維持しつつ100%の幅で表示されるようになります。テスト(Google)』でテストすることが出来ますので、エラーがないかチェックしてみて下さい。[Go言語入門]基本的なデータの扱い方と種類[Go言語入門]コードの中にコードの解説。2017プライバシーポリシーコンテンツの転載は固くお断りいたします。