【WP-Speech-Balloon 2.3】リリース!AMP エラー対策!CSS を自動出し分け☆

【WP-Speech-Balloon 2.3】リリース!AMP エラー対策!CSS を自動出し分け☆

WordPress で簡単に吹き出し会話が出来るプラグイン、「WP-Speech-Balloon」バージョン2.3をリリース致しました。

今回はかなり厳しいと言われている「AMP ルール」の中でも、CSS を使う方にとっては特に厳しい「CSS の容量制限オーバー」で発生する「AMP エラー対策」となります。


「WP-Speech-Balloon」関連の記事は以下をご覧ください。

WP-Speech-Balloon | Tips 4 Life|毎日が便利で快適なiPhone&PC生活
「WP-Speech-Balloon」の記事一覧です。

AMP の CSS 容量制限が厳しい!

AMP 対応させている方で CSS をよく使われている方は、以下のエラーを目にされた方も多いかと思います。

CSS 容量制限オーバー時の AMP エラー

「style amp-custom」で指定された作成者のスタイルシートが長すぎます。上限は 50000 バイトです。

この AMP エラーを見ると、毎回「これ以上シェイプアップ出来ないよ・・・」なんて思いながら AMP用 の CSS をシェイプアップしてきました。

高機能な AMP 対応 WordPress テーマになると、その分 AMP ページで必要になる CSS も増えたりするので、デフォルトでも結構な CSS の容量になりがちです。

これに自分で書いた AMP 用の CSS が追加されると、予想を遥かに上回るほどあっさりと容量オーバーになってしまいます。

アップデート内容

AMP ページでも使えるプラグインという事は、当然「AMP ページでの CSS も必要」となってきます。

私の知る限り AMP ページでも使えるプラグインというのは現状ほぼないのですが、このようなプラグインが増えれば増えるほど AMP CSS の容量は圧迫されます。

当プラグイン「WP-Speech-Balloon」は、一応ですが AMP に対応させているプラグインなので、AMP ページでも通常ページと同じように使えるようになっています。

そして 2.2 までの WP-Speech-Balloon は「すべてのページで有効」となっていたのですが、前述した理由からこれを「WP-Speech-Balloon を記事内で使用しているページだけ有効」という仕様に変更致しました。

ちょっと上記だと説明が曖昧なのでもう少し詳しく説明すると、「AMP ページの記事内で WP-Speech-Balloon を使用している場合だけ WP-Speech-Balloon の CSS を出力」という仕様に変更し、不要なページでの CSS 容量を大幅に減らしました。

こういう方には特におすすめ!

基本的に AMP ページで CSS を使用するプラグインなどを入れている方には今回のアップデートはおすすめです。

執筆現在、公開している自作プラグインは、当プラグイン「WP-Speech-Balloon」の他に「WP-Thumbnail-and-Text」「Simple-FB-Likebox」があります。

上記はすべて AMP 対応させているので、このような AMP 対応プラグインを複数使っている場合、基本的にプラグイン用 CSS はすべて出力されるのですが、記事内で使用していないプラグインの CSS は出力されても意味はなく、AMP ページだと 単純に容量を圧迫するだけとなります。

今後「WP-Thumbnail-and-Text」も同じように出力を調整しようと思っているので、WP-Speech-Balloon と WP-Thumbnail-and-Text を両方使っている方には特におすすめです☆

プラグインのアップデート方法

WP-Speech-Balloon_2.3 へのアップデート方法に付きましては以下をご覧下さい。

「WP-Speech-Balloon」のアップデート方法
本ページはWordpressのプラグイン「WP-Speech-Balloon」のアップデート方法の説明ページです。 Wordpressの管理画面からプラグインをアップデートする方法と、FTPソフト(Filezillaなど)を...

WP-Speech-Balloon の最新版ファイルは以下からダウンロード出来ます。

※初めてお使いになる方も以下をご覧ください。

※「WP-Speech-Balloon1.x」からお使いの方は「WP-Speech-Balloon2.3_bundle」をお使い下さい。

「WP-Speech-Balloon」のインストール方法
本ページはWordpressのプラグイン「WP-Speech-Balloon」のインストール方法の説明ページです。 本ページに書いてある通りに進めるだけで簡単にインストール出来ると思います。 ※「WP-Speech-Ba...

まとめ

以前から AMP の容量制限には頭を悩ませていたのですが、なかなか腰が重くてリリースに時間が掛かってしまいました。

今の所通常ページでは CSS の出し分けは行ってませんが、今後もし必要だと感じたらそちらも仕様変更しようかと思います。

今回のアップデートで当プラグインを使用していないページの CSS 容量は大幅(当プラグインの CSS 丸ごと)に削減出来たので、今後は頭を悩ませる事が減りそうです。

バグのご報告やご要望、ご質問などありましたら「お問合わせ」もしくは「Twitter」までご連絡をお願い致します。

シェアして頂けると喜びます☆

この記事が気に入ったら
いいね ! しよう

ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆

Top