Cocoonの使い方やカスタマイズとオリジナルスキン

簡単!CocoonをAMP化する方法・ロゴやCSSのサイズとエラー時の対処

スポンサーリンク
簡単!CocoonをAMP化する方法・ロゴやCSSのサイズとエラー時の対処設定
この記事は約5分で読めます。

CocoonはAMPやPWAにも対応していて、簡単に対応できます。

PWAについては以下にまとめています。

PWAって?Cocoonで簡単にPWA対応する方法詳細と動作確認方法
CocoonはAMPやPWAにも対応していて、簡単に対応できます。 AMPについては以下にまとめています。 PWAって? PWAとはサイト内で、AppStoreなどを経由する...

 

AMPの設定方法とAMPページの確認方法、またCSS内容などによりGoogle Search Consoleなどでエラーが出る場合の対処方法についてです。

 

スポンサーリンク

AMPって?

AMP化とは、簡単に言えばモバイル(スマホやタブレット)での高速化対応です。

AMP(Accelerated Mobile Pages)。

モバイル端末でウェブページを高速表示するため、GoogleとTwitterが共同開発をしているプロジェクトで、当然ですが、Googleに推奨されているシステムです。

AMPプロジェクト

 

AMP HTMLというフレームワークはオープンソースとして公開されているので、この仕様に沿ったモバイルサイトを作るとGoogle検索結果やTwitterからリンクを開く時の表示速度がアップします。

AMPの主要素

  • HTML5(AMP HTML)
  • CSS 3(Custom Styling)
  • JavaScript (AMP JS)
  • グローバル プロキシ キャッシュ (AMP Cache)

とにかく高速化に特化している為、JavaScriptの使用に制限があったりCSSで使えないコードがあったりします。

メリット

  • モバイル端末での高速化
  • Twitterからのリンク表示高速化
  • 表示速度が上がると検索順位にも影響あり
  • とりあえずGoogle推奨なので

 

デメリット

特になし

※使用できないコードがあるので、通常のサイトとまったく同じデザインにはできない可能性はあります。

 

AMP化準備

ロゴの準備

AMP用のロゴ(600✖60px以内の画像)を準備します。

サイトロゴが上記サイズ以内であれば、そのまま利用出来ますが、上記のサイズを上回るとエラーになります。

 

AMP用CSS

Cocoonでは、スキンや子テーマのCSSをそのままAMPでも利用する事が出来、見た目もほぼ変わらないページとして表示可能ですが、CSSサイズが大きすぎる場合や、AMPで認められないコード(例:「!important」)が含まれている場合は、AMP用のCSSを個別に設定する事も出来ます。

※後述します。(CSS 「サイズオーバーの場合」の項)

 

AMP設定

Cocoon設定AMPタブ

Cocoon設定

Cocoon設定・AMP

設定項目
  • AMP有効・無効
  • AMPロゴ設定
  • 画像の拡大効果
  • インラインスタイル有効・無効
  • スキンスタイル有効・無効
  • 子テーマのスタイル有効・無効
  • AMP除外カテゴリー指定

 

AMP化

AMP有効化にチェックを入れ、AMP用ロゴをセットするだけでAMP化出来ます。

CocoonのAMP化設定

  1. AMP機能を有効化する」にチェックを入れます。
  2. ロゴ用画像(600*60以内)をセットします。
  3. まとめて保存」を押します。

 

AMP用ロゴはデフォルトで以下がセットされているので、これでいいや!って場合を除き、自サイト用のロゴに変更しましょう。

場所:/cocoon-master/images/no-amp-logo.png

サイズ:206*60

AMP用ロゴデフォルト

 

AMP用CSSサイズ

「サイズ制限対応」の欄

デフォルトで以下にチェックが入っています。

  • スキンのスタイルを有効にする
  • 子テーマのスタイルを有効にする

CocoonのAMP化設定

上記チェックで、スキンや子テーマのデザインCSSがそのままAMPでも適用され、AMPページデザインが大きく変わってしまうのを避けられます。

スキンを利用していない場合は無駄なCSSを除く為、チェックを外しましょう。

 

カテゴリー単位の除外

AMP化したくないカテゴリーがあれば、チェックを入れる事で除外出来ます。

CocoonのAMP化設定

 

投稿単位の除外

記事単位にAMP化除外する場合には、編集画面の右側にある以下にチェックを入れます。(投稿・固定ページどちらも可)

AMP投稿単位の除外

 

AMPページの確認方法

AMP対応のページを表示するには、ページURLの最後に「?amp=1」を加えてブラウザで開けば確認出来ます。

ページURL?amp=1

 

AMPページテスト

AMPが有効になり、エラーがないかどうかは以下からチェックできます。

1ページごとのチェックしか出来ませんが、すべてのページのテストを行う必要はありません。1~2ページのチェックでOK。

 

AMPテスト

上記サイトで、AMP化したページアドレスを入れて「URLをテスト」ボタンを押します。

AMPテスト
分析に数秒かかります。

AMPテスト

テストが完了し、エラーがなければ以下のように表示されます。

AMPテスト

 

 

エラー時の対応

上記のテストや、Google Search Consoleなどでエラーが出た場合、エラー内容によって対応します。

※以下はGoogle Search Consoleのエラーサンプル画像です。

サーチコンソールエラー

 

サーチコンソールエラー

サイズオーバーの場合

スキンや子テーマのCSSが膨大な場合、具体的には以前は50,000バイトでしたが、最近(2020/02?)75,000バイトまで拡大されました。

75,000バイトを超える場合は対応が必要です。

 

方法1:スキンや子テーマのスタイルシートを見直す

CSSに無駄がないか、不要なものがないかを見直して修正します。サイズが75,000バイトまでに収まればOK。

 

方法2:AMP用のCSSは別で用意する

「サイズ制限対応」の欄のチェックを外し、AMP用のCSSを別に用意する。

外観→テーマエディター

テーマエディター

 

右側にファイルが並んでいますので、「amp.css」を選択します。

AMP用CSS

ここにAMP用のCSSを記述し、「ファイルを更新」ボタンを押して保存します。

 

許可されていないコードがある場合

!important などが含まれている場合はエラーとなるので、エラー対象のコードを削除します。

削除するとデザインが崩れる場合は、AMP用のCSSで対応するか、エラーが出たページをAMP除外するかで対応可。

 

以上です。

 

コメント

タイトルとURLをコピーしました