読者の未来に、少しでも役立つネタを配信するブログ。2019年7月14日TweetWordPressのAFFINGERテーマを使っていて、AMP対応を考えている方に、読んでほしいブログです。モバイルページを高速化できるAMPですが、AFFINGERテーマを使っていれば簡単にAMP化することができます。【参考】AMP化したページ(モバイルで見てください。)そこで今回は、AFFINGERテーマのブログをAMP化する方法と注意点について書いていきます。AMP化の注意点AMP化する前に知っておくべきことまずAMP化する前に、AMPの概要、メリット、デメリットは簡単に知っておきましょう。AMPとは、モバイルでウェブページを高速化させる仕組みです。ページをAMP化させると、通常のページとは別に、URLの異なるAMP用のページがもう1つ出来上がります。ページが高速化するかというと、読み込みに時間がかかるJavaScriptを表示させないなど、ページを高速化させる仕様になるからです。AMP化は今のところ直接的に検索のランキングに影響しませんが、ページの速度が上がる、離脱率が下がるなどして、間接的にページの評価が上がる可能性はあります。(ページの速度自体はランキングに直接影響すると言われています。)ただし高速化の代償として、AMP用の設定が必要になったり、JavaScriptで表示されていた画像や広告などが表示されなくなったり、導入にあたりデメリットも存在します。AMP化する方法AMPが理解できたところで、AFFINGERのブログをAMP化する方法を紹介していきます。※私はAFFINGER4を使っており、別バージョンでは少し異なる可能性があります。AMP化する方法は、AFFINGER作成者のブログを参考にしています。【参考】AMP対応のWordPressテーマ「AFFINGER5」についてAMP用サイドバーメニューの設定AMP化されたページは、サイドバーメニュー(三本線のメニュー)が表示されないので、AMP用のメニューを設定していきます。「外観」にある「ウィジェット」をクリックします。「AMPサイドバーウィジェット」に「01_STINGERサイドバーメニュー」を挿入します。これで設定は完成です。AMP用のグーグルアナリティクスの設定AMP化されたページは、そのままだとグーグルアナリティクスで計測ができないため、AMP用の計測設定をしていきます。PRO管理」をクリックします。「Google連携に関する設定」にある「アナリティクスコード(トラッキングID)※AMP用:UA-」という場所に、AMP用のページを計測するアナリティクスのコードを入力します。AMP用のページを計測するコードは、既に使っているコードと同じでも計測可能です。一方で、AMP用のページを分けてトラッキングしたい方は、グーグルアナリティクスで新しいコードを発行し、入力する必要があります。グーグルアナリティクスで歯車のアイコン(設定)をクリックします。「プロパティを作成」をクリックします。プロパティの設定で、「ウェブサイトの名前」は好きな名前、「ウェブサイトのURL」はサイトのURL(//以下)をそのまま入力し、作成します。設定画面のトップで、プロパティの「▼」をクリックすると新しいプロパティが確認できるので、新しいプロパティをクリックします。トラッキングIDの場所にあるUA-以下をコピーします。「アナリティクスコード(トラッキングID)※AMP用:UA-」に貼り付けます。あとは設定を保存して、設定の完成です。AMP用のアドセンスの設定AMP化されたページは、そのままではアドセンスが表示されないので、AMP用のアドセンスを設定していきます。先ほどのアナリティクスコードの下に「AMP用のアドセンスコード」とあり、「data-ad-client(ca-pub-以降の数字)」「data-ad-slot」の場所にアドセンスのコードを入力します。アドセンスのコードは、既に設定してある場所から「data-ad-client」「data-ad-slot」を見つけて、数字をコピーします。(「data-ad-client」はca-pub-以降の数字)「data-ad-client(ca-pub-以降の数字)」「data-ad-slot」の場所に貼り付けます。あとは設定を保存して、設定の完成です。AMP化したいページでAMP化の設定AFFINGERテーマでは、AMP化したいページごとにAMP化の設定をしていきます。AMP化したいページの設定画面で、「AMP設定」をクリックして開き、「AMPに対応する」にチェックを入れます。ページを更新すれば、対象のページのAMP化が完了しています。AMP化されたページの表示を確認AMP化の設定が完了したら、AMP化されたページの表示を確認していきます。AMP化されたページは、URLの最後に「amp」を付けると確認ができます。AMP化されたページが開きました。見てのとおり、背景色がAFFINGERのデフォルト色(灰色)になっているなど、通常のページとデザインが異なっていることがわかります。ページの表示速度はめちゃくちゃ速いです。他にも「AMPテスト」のサイトで、AMP用のURLを入れることで、ページの有効性をテストすることができます。他、AMP対応でやったことAMP対応は一応完了しましたが、背景色が灰色のままだったので、背景色を白にする設定をしました。「外観」にある「テーマエディター」をクリックします。「st-amp-css.php」をクリックして、ファイルを開きます。#FFFFFF;」(白)に書き換えます。AMP化されたページの背景色が白に変わりました。他にも、広告枠広げる、Google+ボタンを削除、グーグルの関連コンテンツを表示させる...など作業は残っているのですが、今回はここまでにしておきます。最後に、AFFINGERをAMP化したあとに気づいた注意点をまとめておきます。AMP用のデザインは、別で設定する必要がある先ほどの背景色もそうですが、見出しのデザイン、シェアボタン、広告の大きさなど、AMP用のページではデザインが反映できていませんでした。AFFINGERではAMP用にファイルが分かれているので、そこでコードを設定し直す必要があります。プラグインがほぼ機能しない通常のページではプラグインを使って記事上部にシェアボタンを表示しているのですが、AMP用のページでは表示されていませんでした。このようにAMP用のページでは、プラグインがほぼ機能しないようなので、プラグインを使っている方は注意が必要です。amazonのアフィリエイトなどが表示されない今回のページにはないですが、amazonのアフィリエイトが貼ってあるページをAMP化したときに、amazonのアフィリエイトが完全に表示されなくなっていました。amazonのアフィリエイトは、AMPに対応するコーディングを別途しないと表示ができないようです。amazonだけでなく、A8もバナーのみAMP化されたコードで表示可能など、アフィリエイト各社でAMPの制約があるようなので、注意が必要です。以上、AFFINGERテーマで、ブログをAMP化する方法と注意点でした。今後、AMPはますます普及してくると思うので、今のうちに準備しておいたほうが良いと思います。お付き合い頂き、ありがとうございました!何かあれば、ツイッターやメールまで。ブログをAMP対応する方法と注意点WordPressのAFFINGERテーマを使っていて、AM...2019/07/282つのエクセルを簡単に比較!ブックの整列を覚えよう2つのエクセルを比較して見たい方に読んでほしいブログです。日本で外国人と交流したい方に読んでほしいブログです。歯根嚢胞の摘出手術をしたので、治療や費用などをブログに書くよ結婚式の印刷物を即日格安で印刷できるキンコーズが超素敵!1万円の資金で株を始めたので、株の始め方を書いておくよこのブログを書いている人ネット企業ではたらくサラリーマンです。今までの知識や経験が、少しでも誰かの役に立てればと思い、ブログを開設しました。ブログ運営・TOEIC・英語・エクセル・IT関連のネタなど、定期的に情報を配信しています。ツイッターで気になる情報をつぶやいています!私のツイッターお問い合わせは、以下の宛先にお願いします!私のメールアドレス※内容によってはご返信できない点、ご了承ください。調査みらしん読者の未来に、少しでも役立つネタを配信するブログ。