弊ブログのテーマをSTINGER PLUSからSimplicityへ変更しました。
双方とも素晴らしいテーマなんですが、STINGER PLUSが有料になってしまったのです・・・
多くの方にご好評いただき、そして今も「STINGER Plus(プラス)のダウンロードどこ?」という声を多く頂いております。
申し訳ありません。STINGER Plus(プラス)はさらに進化して「AFFINGER4」になり有料化(6,500円)となりました。
301 Moved Permanently
もちろんAFFINGER4もその価値に見合うものだと思いますが、これも良い機会だと思い、気になっていたSimplicityへ移行してみました。
お世話になりました、STINGER。そして、いつかまた出戻りするかもしれません・・・。
「Speech bubble」プラグインのAMP対応
SimplicityはAMPにもテーマで対応しているのも魅力的でした。

さっそく、AMPを有効にしましたが、CSSスタイルが外れてしまうものがありました。
それが吹き出しプラグイン「Speech bubble」です。
残念ながら「Speech Bubble」はまだAMP対応していないようなので、現状そのままでは表示が崩れてしまいます。
Simplicityには、style.cssと同じ階層にAMP用CSSであるamp.cssがあります。
私の場合は子テーマに設定しました。
こちらのamp.cssに記述すればAMPページに反映されますので、「Speech bubble」プラグインディレクトリにあるCSSをそのまま持ってきました。
/plugins/speech-bubble/css/sb-type-std.css
私は「std:スタンダード」を使用しているので、以下は「std:スタンダード」用のCSSです。
「Speech Bubble」のSimplicityのamp.css用CSS
下記をamp.cssに記載します。
@media screen などのレスポンシブ対応部分のコードがエラーを出しているようでしたので、
@media screen and (max-width:720px)の内容のみに削ってあります。
あと、アイコンエリアの高さを少し増やしました。このあたりはお好みで。
/** * .sb-type-TYPE, .sb-type-TYPE> .sb-subtype-X:after * * コマ(アイコンと吹き出しをまとめたもの)部分 * frame(speaker icon and name, serief) part */ .sb-type-std { overflow: hidden; padding: 10px 20px; margin: 0; line-height: 1.5; color: #333333; } .sb-type-std>.sb-subtype-a:after, .sb-type-std>.sb-subtype-b:after, .sb-type-std>.sb-subtype-c:after, .sb-type-std>.sb-subtype-d:after { display: block; clear: both; content: ""; } /** * .sb-type-TYPE > .sb-subtype-X > .sb-speaker * * 話者領域 * Speaker Field */ .sb-type-std>.sb-subtype-a>.sb-speaker, .sb-type-std>.sb-subtype-c>.sb-speaker { float: left; margin-right: -70px; width: 70px; } .sb-type-std>.sb-subtype-b>.sb-speaker, .sb-type-std>.sb-subtype-d>.sb-speaker { float: right; margin-left: -70px; width: 70px; } /** * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon * * 話者のアイコン部分 * Speaker Icon part */ .sb-type-std>.sb-subtype-a>.sb-speaker>.sb-icon, .sb-type-std>.sb-subtype-b>.sb-speaker>.sb-icon, .sb-type-std>.sb-subtype-c>.sb-speaker>.sb-icon, .sb-type-std>.sb-subtype-d>.sb-speaker>.sb-icon { text-align: center; height: 80px; } .sb-type-std>.sb-subtype-a>.sb-speaker>.sb-icon>img.sb-icon, .sb-type-std>.sb-subtype-b>.sb-speaker>.sb-icon>img.sb-icon, .sb-type-std>.sb-subtype-c>.sb-speaker>.sb-icon>img.sb-icon, .sb-type-std>.sb-subtype-d>.sb-speaker>.sb-icon>img.sb-icon { height: 60px; width: 60px; border-radius: 5px; } /** * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name * * 話者の名称部分 * Speaker name part */ .sb-type-std>.sb-subtype-a>.sb-speaker>.sb-name, .sb-type-std>.sb-subtype-b>.sb-speaker>.sb-name, .sb-type-std>.sb-subtype-c>.sb-speaker>.sb-name, .sb-type-std>.sb-subtype-d>.sb-speaker>.sb-name { overflow: hidden; text-align: center; font-size: 12px; } /*----------------------------------------------------------------------------------*/ /* stdタイプの吹き出し */ /* std Type (For a,b) */ /*----------------------------------------------------------------------------------*/ /** * .sb-type-TYPE > .sb-subtype-X > .sb-content * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after * * セリフ&引き出し 部分 * Serief& Tail part */ .sb-type-std>.sb-subtype-a>.sb-content { float: left; position: relative; margin-left: 80px; } .sb-type-std>.sb-subtype-a>.sb-content:before { position: absolute; top: 9px; left: -6px; z-index: 1; height: 0; width: 0; border-style: solid solid solid none; border-width: 6px; border-color: transparent #CCCCCC; content: ""; } .sb-type-std>.sb-subtype-a>.sb-content:after { position: absolute; top: 9px; left: -5px; z-index: 3; height: 0; width: 0; border-style: solid solid solid none; border-width: 6px; border-color: transparent #FFFFFF; content: ""; } .sb-type-std>.sb-subtype-b>.sb-content { float: right; position: relative; margin-right: 80px; } .sb-type-std>.sb-subtype-b>.sb-content:before { position: absolute; top: 9px; right: -6px; z-index: 1; height: 0; width: 0; border-style: solid none solid solid; border-width: 6px; border-color: transparent #CCCCCC; content: ""; } .sb-type-std>.sb-subtype-b>.sb-content:after { position: absolute; top: 9px; right: -5px; z-index: 3; width: 0; height: 0; border-style: solid none solid solid; border-width: 6px; border-color: transparent #FFFFFF; content: ""; } /** * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble * * 吹き出しの本体部分 * Speach bubble' body part */ .sb-type-std>.sb-subtype-a>.sb-content>.sb-speech-bubble, .sb-type-std>.sb-subtype-b>.sb-content>.sb-speech-bubble { position: relative; padding: 5px 10px; z-index: 2; background-color: #FFFFFF; border-style: solid; border-width: 1px; border-color: #CCCCCC; border-radius: 5px; color: #333333; } /*----------------------------------------------------------------------------------*/ /* std用に調整した考えてるタイプの吹き出し */ /* std-Think Type (For c,d) */ /*----------------------------------------------------------------------------------*/ /** * .sb-type-TYPE > .sb-subtype-X > .sb-content * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after * * セリフ&引き出し 部分 * Serief& Tail part */ .sb-type-std>.sb-subtype-c>.sb-content { float: left; position: relative; margin-left: 100px; } .sb-type-std>.sb-subtype-c>.sb-content:before { position: absolute; top: 10px; left: -17px; height: 12px; width: 12px; border: dashed 1px #909090; border-radius: 10px; content: ""; } .sb-type-std>.sb-subtype-c>.sb-content:after { content: ""; position: absolute; top: 20px; left: -28px; height: 8px; width: 8px; border: dashed 1px #909090; border-radius: 5px; } .sb-type-std>.sb-subtype-d>.sb-content { float: right; position: relative; margin-right: 100px; } .sb-type-std>.sb-subtype-d>.sb-content:before { position: absolute; top: 10px; right: -17px; height: 12px; width: 12px; border: dashed 1px #909090; border-radius: 10px; content: ""; } .sb-type-std>.sb-subtype-d>.sb-content:after { position: absolute; top: 20px; right: -28px; height: 8px; width: 8px; border: dashed 1px #909090; border-radius: 5px; content: ""; } /** * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble * * 吹き出しの本体部分 * Speach bubble' body part */ .sb-type-std>.sb-subtype-c>.sb-content>.sb-speech-bubble, .sb-type-std>.sb-subtype-d>.sb-content>.sb-speech-bubble { position: relative; padding: 5px 10px; margin-bottom: 20px; border: dashed 1px #909090; border-radius: 5px; }
AMP確認にはChrome拡張機能「AMP Validator」が便利
自分はChrome拡張機能「AMP Validator」を使っています。
また、Simplicityには、自前でAMP確認リンクを作る機能もあるのでこちらもおすすめです。

下記URLでも確認できますね。

最後まで読んでいただきありがとうございました!
こんな感じであまり気張らず、ダラダラと、楽しんでやっています。
どうぞよろしくお願いいたします。
もしちょっとでも!ほんのちょっとでも興味を持っていただけたなら!
下のボタンよりフォローお願い致します。
小躍りしながら喜びます!