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

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

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

多くの方にご好評いただき、そして今も「STINGER Plus(プラス)のダウンロードどこ?」という声を多く頂いております。
申し訳ありません。

STINGER Plus(プラス)はさらに進化して「AFFINGER4」になり有料化(6,500円)となりました。

STINGER Plus（プラス）のダウンロードについて

多くの方にご好評いただき、そして今も「STINGER Plus（プラス）のダウンロードどこ？」という声を多く頂いておりま ...

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;
}

AMP確認にはChrome拡張機能「AMP Validator」が便利

自分はChrome拡張機能「AMP Validator」を使っています。

https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=ja

chrome.google.com

また、Simplicityには、自前でAMP確認リンクを作る機能もあるのでこちらもおすすめです。

https://wp-simplicity.com/simplicity-amp/

wp-simplicity.com

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

https://search.google.com/search-console/amp

search.google.com

caay

最後まで読んでいただきありがとうございました！
こんな感じであまり気張らず、ダラダラと、楽しんでやっています。
どうぞよろしくお願いいたします。

もしちょっとでも！ほんのちょっとでも興味を持っていただけたなら！
下のボタンよりフォローお願い致します。
小躍りしながら喜びます！