ど素人がCocoonのAMP対応で困ったことなどのメモ

タイトル通り、そもそもAMPの仕組み自体あんまり理解してなかった僕がCocoonでやったことなどのメモです。知識なさ過ぎて、途中で躓いても検索の仕方すら分からなかったので、同様に困っている方の参考になれば。

高性能WordPress無料テーマのCocoonのダウンロードは下記より

URL：https://wp-cocoon.com/

CocoonのAMP設定はボタン１つで設定可能

Cocoonの場合は無駄なAMPプラグインを入れる必要はありません。むしろ入れると余計ややこしくなります。「Cocoon 設定」から「AMP」タブをクリックし、「AMP機能を有効化する」にチェックを入れて保存。

AMPページでロゴを表示させたい方は幅600px,高さ60px以内の画像をアップロードする。

特にデザインも何もいじっていない場合は、AMPページのデザインも通常ページと同じようなデザインになります。

AMPで画像ギャラリーを使う

これが個人的に一番苦労しましたが、分かってしまえば簡単でした　笑。

同じく「Cocoon設定」の「AMP」タブからチェックを入れるだけ。

AMPギャラリーにチェック入れたのに全然反映されない！と思ってたけど、そもそも投稿画面でギャラリー表示したい画像のリンク設定をしてませんでした　笑。

上記のようにリンク設定しないと、そもそも画像をクリックできません　笑

AMPで新しいCSSを使うとき

僕みたいに技術的な事が分からず新しいCSSを試したい人は、基本的に１つずつ両方のページで反映するかチェックした方が良いです。適当に見つけたCSSデザインが通常ページとAMPページでどう見えるのかチェックしないとAMPページでは反映されていないことも珍しくありません。記述方法が違うかったりするみたいなんで。

AMPページでもGoogle Mapを無料で使いたい

Google Mapの埋め込みは有料になったそうですが、マイマップを作成することで今のところ無料で利用できるみたいです。

詳しくは下記のサイトを参考にしました。

Googleマイマップの公開方法。共有、埋め込み、プレビュー、デフォルトビュー【基本編③】 | 百科堂

前回の記事「Googleマイマップの使い方。レイヤ―追加、スタイル変更の方法を解説【基本編②】」では、レイヤーを追加してスタイルを一括変換する方法をご説明しました。 基本編③では、作成した地図を共有したり、自分のサイトに埋め込む方法を確認していきましょう。 今回の流れは以下の通りです。 プレビューで作成した地図を見てみ...

100kado.net

注意点としては、投稿記事の上部（600pxぐらいまでだったかな？）には、表示されない仕様みたいなことが書いてあった気がしますので、もし表示されない場合は記事下で一度試してみてください。

未解決：AMPページのギャラリーがなぜか右寄り

これ解決したいんですよね・・・なんかAMPページのギャラリー表示が気持ち右寄りな気が・・・。でも未解決のままです。

とりあえず今のところこれぐらいです。これからまた困ったことや解決したことがあった時に追記していきたいと思います。