Wordpressの吹き出しプラグイン「Speech bubble」をSimplicityテーマでAMP対応した話

弊ブログのテーマをSTINGER PLUSからSimplicityへ変更しました。

双方とも素晴らしいテーマなんですが、STINGER PLUSが有料になってしまったのです・・・

多くの方にご好評いただき、そして今も「STINGER Plus(プラス)のダウンロードどこ?」という声を多く頂いております。
申し訳ありません。
STINGER Plus(プラス)はさらに進化して「AFFINGER4」になり有料化(6,500円)となりました。
STINGER Plus（プラス）のダウンロードについて
多くの方にご好評いただき、そして今も「STINGER Plus（プラス）のダウンロードどこ？」という声を多く頂いております。申し訳ありません。STINGER Plus（プラス）はさらに進化して「AFF
wp-fun.com

もちろんAFFINGER4もその価値に見合うものだと思いますが、これも良い機会だと思い、気になっていたSimplicityへ移行してみました。

お世話になりました、STINGER。そして、いつかまた出戻りするかもしれません・・・。

「Speech bubble」プラグインのAMP対応

SimplicityはAMPにもテーマで対応しているのも魅力的でした。

https://wp-simplicity.com/

wp-simplicity.com

さっそく、AMPを有効にしましたが、CSSスタイルが外れてしまうものがありました。
それが吹き出しプラグイン「Speech bubble」です。

https://ja.wordpress.org/plugins/speech-bubble/

ja.wordpress.org

残念ながら「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;
}