大幅なサイトメンテナンスを行った為、一部「画像が表示されない」などの可能性があります。
画像が表示されない場合は F5 などでページを更新してみて、それでも表示されない場合はご一報お願い致します。

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

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

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

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


Tipsアイコン[ 追記 ]

WP-Speech-Balloon 2.4 をリリース致しました。

以下の記事から詳細をご確認頂けます。

【WP-Speech-Balloon_2.4】リリース!グレーモード追加☆
Wordpress で簡単に吹き出し会話が出来るプラグイン、「WP-Speech-Balloon」のバージョン2.4をリリース致しました。 今回はパターン1、パターン2、パターン3の吹き出しを左右それぞれ「グレー」で表示出来...

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

WP-Speech-Balloon
「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 のアップデート方法に付きましては以下をご覧下さい。

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

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

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

※「WP-Speech-Balloon1.x」からお使いの方は、最新版の「WP-Speech-Balloon_bundle」をお使い下さい。

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

まとめ

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

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

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

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

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

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

WordPressでPCやスマホ(iPhone)などのTips(便利情報)、その他日常生活で便利だと感じた事やモノを書いているIT関係のナンデモ屋さんです。
シンプルなプラグインなどもたまに作っていますのでご自由にお使い下さい☆

RA's(らす)@Tips4Lifeをフォローする
WP-Plugin(自作)
記事が良かったらこちらから教えてあげてください☆
Tips 4 Life|毎日が便利で快適なiPhone&PC生活

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

Top