キロバイトまで許可」などの特徴もあります。firstlayout.netでも、今さら対応するの面倒や。AMPに対して、そんな熱はもうない。AMPの対応方法(ワードプレス)AMPへの対応方法は、理解すればそんなに難しくはないという印象です。ワードプレスの場合、テーマで機能として備わってる物も多く、設定でオンオフするだけです。ワードプレス自体が、AMP推進とのことで、自動で対応してくれる日が来るかもしれません。面倒なんでやるなら勝手にやってほしいけど、それで意図しない表示の仕方されるのも困る。stories.wordpress.org上記のプラグインは簡単です。インストールして、有効化するだけです。デメリットは簡易すぎて、デフォルトのカスタマイズでは、ヘッダーなどの色や文字色を変えれるだけ。そのままでは、他のサイトと被る可能性が高いですね。広告載せたりするのには、プラグインのファイルを編集する必要があります。簡単に設定できるので、簡易にAMPを体験するという意味では、良いプラグインだと思います。...ja.wordpress.orgこちらのプラグインも簡単にAMPを実装できます。カスタマイズ性も良く、イメージ的にはAMPのプラグイン内で、さらにテーマを設定するようなイメージです。テーマも複数あり、機能性も良く、アドセンス等の広告の設定も可能。ちなみにテーマは全て無料というわけではなく、有料も多めです。CSSでカスタマイズできるので、CSSを触れる人は無料のテーマを選んでから、ある程度変更できるので、問題ないかと。そのCSSも体感上、けっこう書き込んでも、CSSの制限(50kb)に引っかからない印象。広告の表示位置も決まった場所のみの表示ですが、タイトル下とかフッター下とか6か所ぐらいで基本的な場所なので、ぜんぜん問題ないかと思います。デメリットとしては、しょうがないですが、翻訳されていないのでわかりにくいところ。同じ会社が出してるPWAのプラグインもありますが、そちらも良い感じです。(キャッシュ強め)他のサイトで試して使った感想ですが、今のところ重たいと感じた事はないです。AMPページを簡単に、でもちゃんと「こだわりたい」という人にはおススメです。追加この方法なら、けっこう簡単にプラグインなしでAMPの実装できるなぁという記事を発見しました。ライフプラグインでのAMP対応だとデザインを自由に変えられないという制限があるので、プラグインを使わずに独自にAMP対応を行なってみました。記事詳細テンプレートが読み込まれるタイミングでフィルターフックでAMP専用テンプレートに差し替え、本文内もAMP用に差し替えています。get_template_partでAMP用のデザインファイルを呼び出して表示してる旨、解説されています。amp-custom></style>箇所には、テーマ直下にamp.cssというファイルを作って、cssを読み込ませたい場所に、以下の内容を追加してます。amp-boilerplate>の下に入れてます。AMP対応注意点AMPでは使えないタグがあったり、使えないタグを使えるように専用のタグに変更したり、制限があるので、ルールに沿って作成・対応させないとエラーがでます。Consoleから日々エラーですよーと言われてました。現在はエラーを対応したのと、Cocoonテーマのおかげで基本的にエラーはありません。ちなみに当ブログのエラーに関しては、ほとんどが、過去に挿入したAmazonのアフィリエイトバナーが原因でした。このように、アフィリエイトタグ等をそのまま入れてる場合は、全ての過去の記事に対応させる必要があるので、修正コストがかかる場合はカテゴリーで分けて対応するなど、AMPの対応を考えた方がいいかもしれませんね。ワードプレスでAMP対応した際の画像テーマを自身で作成しAMP対応させた場合など、ワードプレスのデフォルトの機能によりAMP対応を邪魔?される事があります。AMPページ表示時、画像を無理やり320pxの幅に書き換えるようにテーマを作成していたのですが、画像が枠に収まらず突き抜ける現象が発生しました。要素を調べると勝手にwidthに100vwの指定が。したもんかと、一個ずつ調べると「srcset属性」と「sizes属性」が原因の模様。srcset属性とは、この画像にはこの大きさの画像が使えますよという候補の標示する属性。sizes属性とは、どのサイズで表示させたいか指定する属性。この二つの属性の指定がうまくいかないと、AMPページの画像の表示がうまくいかないことも。対策の一つとしてデフォルトで入ってしまう「srcset属性」を入れないようにフィルターフックを使って、functions.phpに追記します。StoriesAMPの機能を使った、画面全体で表示するスライド式のページです。「おしゃれなWEB版のパワーポイント」と言えば、怒られるかもしれませんが、そういった方が伝わるかも。Storiesの制作方法について、公式のテンプレートもあるのですが、ワードプレスでの話にはなりますが、プラグインを使って制作する方法が超絶簡単だったので、下記にまとめました。Storiesをワードプレスのプラグインで簡単作成インスタグラムやフェイスブックでは、もはや定番の「ストーリーズ」。AMPページのストーリーズが2018年に発表されてから、作成方法の記事などを見てきましたが、テンプレートがあるとはいえ、ただただ面倒くさそう。現段階ではAMP対応を行うことで、検索順位(SEO)への影響はないと言われてます。AMP対応する事で、先にも記載しましたが、トップニュース項目などに表示されることによって、普段の検索結果より、よりよい効果を得られる可能性があります。SEO関係ないって言っても、「管理しているのはGoogleさんじゃん、どうせ影響あるんじゃない?」って思いますよね。影響あるという事を書いてる記事も見当たります。実際に僕も気持ち程度、正しく対応すればあると思います。上記のワードプレステーマでのAMP対応注意点で書いた、AMP対応ページがサーチコンソールで全滅した件なんですが、修正を行った結果、検索結果が微妙に上がりました。データとして微妙ですし、検索順位も微妙ですし、たまたまのたまたまかもしれませんが、多少効果あるんじゃないの?むしろ、ないとやる気が起こらないよーという感じです。変化があれば記載します。他に運営しているメディアサイトでは、AMPの対応を辞めました。メディアサイトにはAMPが向いていないという記事を見ていたのですが、他サイトよりどこかで差をつけたいと思い、プラグインで対応させていましたが、管理での部分を含め、メリットを感じれず、辞めました。辞めた時に発生したのが、404エラーです。当たり前ですが、今までのAMPページがなくなるので、エラーになります。辞めたくても辞めれないというヤク〇ザのような状態になりましたが、辞めました。404に関して、リダイレクトでどうにかしようかなと思いましたが、検索結果などには数日で自動的にAMPページのURLは削除され元のURLに反映されるとのことで、特に何もしなかったです。一点、気を付けないといけないAMPページへの流入経路が、AMPを押してるTwitterです。過去のツイート分はうまく表示されなくなりました。こちらに関しては期間を空ければ本来のURLに戻ってましたが、どれぐらいの期間なのかは不明です。Twitterからの流入が多い場合は、要注意です。ちなみに、このツイートからのリンクに関して、どういう仕組みなのか、当ブログのTwitterからはAMPページには飛ばず、よくわからない仕様です。分かり次第、追記します。↑仕組み上、AMPページがAMPページのCDN等にキャッシュされてなかったからですね。今は、基本的にはTwitterからでもAMPページが表示されるようになりました。AMP対応について必要かどうかまとめAMPについて、最初知ったときは、「また新しいのん出てきた」でと、腹が立ちました笑ですが、スマホ主流の時代だからこそ、しょうがないのかなぁって思いながら、勉強がてらAMP対応を試してきました。わからないところや試している途中ですが、AMP対応しても必ず表示されるわけではないですし、広告だったりCSSだったりできる事が増えてきた印象もありますが、まだまだメリットが、わかりにくいというのが、私の感想です。そもそも、AMPページ云々よりも、普通のページを早く表示させる事に、集中したほうが良いですよね。当たり前ですが、AMPでいろいろ制限されたサイトより、華やかで個性的でも表示が速く軽くて読みやすいサイトの方が良いですよね。個人的結論AMPが必要か必要じゃないかは、基本的にはあった方がいいけど、必ず表示されるものじゃないし、PC・スマホのアクセスを考慮して、サイトによってはいらない!この1年ぐらいで「AMP対応したけど、辞めました」という話や記事はちょろちょろ見たり聞いたり。結局、5Gの時代が来て、通信の転送量が底上げされて、AMPの制限緩和か別の技術が出てくるか、せっかくAMP対応したのに思っている以上に早く過去の産物とかになったら嫌ですよね。すると、AMPが基準になる時代がくるかもしれないですし、なんとも言えないですが、Googleの方が利用者が便利にと思って、開発されているのであれば応援したい気はします。TwitterシェアするTwitterFacebookはてブPocketLINEPinterest東田ダダーンをフォローするこのブログを購読する当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可をしてください。東田ダダーンが更新された際、更新した旨、通知されます。購読する東田ダダーン東田ダダーン関連記事WordPress【フロントエンド】ワードプレスの管理画面からカテゴリー別に色を設定し、表示に反映するワードプレスの管理画面からカテゴリーの表示色をカスタマイズ・設定する方法を紹介します。人の気持ちの変化とは一瞬の刹那。次の瞬間には、違う色がいいと、そんな気分屋さんも多いはず。そんな世知辛い世の中だから。Tips令和にも残そう、懐かしい90年代WEBデザイン。令和、平成も残りわずかですね。そんな新しい時代に突入する昨今(元号、関係あるのは日本だけやけど)、あえて懐かしいデザインで作成されたサイトを集めてみました。Tipsサーバーをカラフルボックスに変更、使用した感想やデメリット2018年の年末にサーバーをロリポップからスターサーバーに変えーの、そして年号は令和に変わり半年でカラフルボックスに変えました。気をつけてください、女心と秋の空とサーバー。1か月利用して気になったデメリットを追加しました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。miniで照明の色を、声を使って操作する方法2019.12.142019年を振り返る【アクセス数が増えたとか、個人的アレコレ】2019.12.012020.01.14PROFILEアラサー、産まれたばかりの娘、フロントエンドな東田ダダーンです。東田の中のヒガシダを目指し、玩具のレビューやWEB技術記事、子育てブログを更新しています。雑記、雑記、雑記ブログでございます。RANKINGページ遷移時にアニメーションを入れる方法【ライブラリなし】2019.07.252019.12.06CSSの疑似要素before、afterを使って三角形等の装飾する2018.09.042019.09.06PWAをワードプレスで実装してみて感じた事。先っちょだけでも、フォローお願いします。miniで照明の色を、声を使って操作する方法2019.12.142019年を振り返る【アクセス数が増えたとか、個人的アレコレ】2019.12.012020.01.14PROFILEアラサー、産まれたばかりの娘、フロントエンドな東田ダダーンです。東田の中のヒガシダを目指し、玩具のレビューやWEB技術記事、子育てブログを更新しています。雑記、雑記、雑記ブログでございます。RANKINGページ遷移時にアニメーションを入れる方法【ライブラリなし】2019.07.252019.12.06CSSの疑似要素before、afterを使って三角形等の装飾する2018.09.042019.09.06PWAをワードプレスで実装してみて感じた事。先っちょだけでも、フォローお願いします。タイトルとURLをコピーしました。