[Sentryアップデート]AMPページのCSSカスタマイズ機能を追加しました！

しばらく放置気味でしたが、、Sentryのバージョンアップを久々に追加しました。
（本業が忙しく放置してましたが、また少しづつ開発をはじめたいと思います。）

アップデートの概要

今回の修正は、@cinema520さんからのご依頼で、元々は特定のプラグインのデザインがAMPページに反映されないというものでした。
特定のプラグイン専用のデザインをすべて盛り込むというのは現実的ではないな〜、ということで検討し、テーマのカスタマイザから、AMPページに任意のCSSを書き出せるように機能を追加することにしました。

今回のアップデートの詳細はこちら。
[update]AMPページのCSSをカスタマイズ可能に変更

Sentryのアップデート手順は、以下のページを参考にしてみてください。

[post id=”4901″]

「AMPページのCSSカスタマイズ機能」の使い方

wordpressの管理画面から、「外観」→「カスタマイズ」を選択。
カスタマイザーが起動するので、「AMPページ設定」を選択してください。

設定画面の一番下に「AMP用のカスタムCSS」というテキストエリアが追加されるので、ここにAMPページに反映させたいCSSを書きます。

▲この例だと、pタグに対し文字色をred（赤）にするためのCSSがAPMページに書き出されます。

これでAMPページも自由にデザインをカスタマイズできます。
ただし、AMPページでは「!important」など、利用できない記述もあるので、カスタムする際はAMPの制限を確認してみてください。
・サポートされる CSS – AMP

AMPページのCSSをカスタマイズする例

@cinema520さんのサイトの例だと、吹き出し風のデザインを作れるプラグイン　「speech bubble」のデザインをAMPページにも出したいということですので、Speech Bubbleで使っているCSSを確認してみましょう。

Speech Bubbleはデザインによって利用するCSSファイルが変わりますが、例えばデフォルトのデザイン「drop」を利用する場合、参照しているCSSは「sb-type-drop.css」。
ファイルの中身はこちらです→[ sb-type-drop.css in speech-bubble/tags/1.0.2/css ]。
※実際には、インストールしているサイトのURLに/wp-content/plugins/speech-bubble/css/sb-type-drop.cssを付けるとアクセスできます。

このファイルの11行目から324行目まではまるっとコピー。（CSSに詳しい人は中身を精査して必要な部分だけをコピーするとベターです。）
コピーした内容を、AMP用カスタムCSSのテキストエリアにコピペします。