WordPressでLINE会話風の吹き出し AMP対応 プラグイン不使用

WordPressでLINE会話風の表現 AMP対応 プラグイン不使用 自分のブログを知らない誰かに読んでもらうのって、本当に大変な事だと思います。
記事を書く時に、内容を濃くすることはもちろん、言いまわし方やレイアウト、画像など、試行錯誤しますよね。

最近よく目にするのが、LINEやFacebookメッセンジャーみたいな、会話でやりとりする表現です。

こんな感じのね!

そうそう!コレ!

読み手の目を引くし記事にメリハリがついて、内容もよりわかりやすくなると思います。
Speech Bubbleなどのプラグインを使えば簡単に実現ができるのですが、そこには大きな問題もあったのです。

AMPに対応していない!!

先日、完全AMP対応サイトを作る決心を密かにしたのですが、早速つまづいてしまったのです。
そんなわけで、CSSの編集のみ(プラグインを使わない)で会話風の表現をし、かつAMP規格にも合格する方法を紹介いたします。

CSSの編集

俺のコード公開

/*---------------------------------
吹き出し
--------------------------------*/
.fukidashi {
	background-color: #fff; /* 会話部分の背景色 */
	padding: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: column wrap;
			flex-flow: column wrap;
	-webkit-box-pack: justify;
			-ms-flex-pack: justify;
					justify-content: space-between;
}
.fukidashi.balloon .aaa,
.fukidashi.balloon .ccc,
.fukidashi.balloon .bbb {
	border-radius: 15px;
}
.fukidashi .aaa,
.fukidashi .ccc,
.fukidashi .bbb {
	position: relative;
	padding: 10px;
}
.fukidashi .aaa,
.fukidashi .ccc {
	-ms-flex-item-align: start;
			align-self: flex-start;
	background-color: #ddd; /* 左側の人の吹き出し色 */
	margin-left: 100px;
}
.fukidashi .bbb {
	-ms-flex-item-align: end;
			align-self: flex-end;
	background-color: #85e249; /* 右側の人の吹き出し色 */
	margin-right: 100px;
}
.fukidashi .aaa::after,
.fukidashi .ccc::after,
.fukidashi .bbb::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
}
.fukidashi .aaa::after,
.fukidashi .ccc::after {
	left: -8px;
	border-width: 5px 10px 5px 0;
	border-color: transparent #ddd transparent transparent;
}
.fukidashi .bbb::after {
	right: -8px;
	border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent #85e249;
}
.fukidashi .aaa::before,
.fukidashi .ccc::before,
.fukidashi .bbb::before {
	content: "";
	position: absolute;
	top: 50%;
	width: 100px;
	height: 100px;
	border-radius: 50px;
	-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* 画像設定 */
.fukidashi .aaa::before {
	background-image: url("http://ashitaya.info/wp-content/uploads/2017/04/xxxxxxxxxxxxxxx");
	left: -100px;
}
.fukidashi .ccc::before {
	background-image: url("http://ashitaya.info/wp-content/uploads/2017/04/xxxxxxxxxxxxxxx");
	left: -100px;
}
.fukidashi .bbb::before {
	background-image: url("http://ashitaya.info/wp-content/uploads/2017/04/xxxxxxxxxxxxxxx");
	right: -100px;
}

最下部の「画像設定」の部分だけ書き換えていただければ、ひとまずは使える状態になるかと思います。

会話部分の背景色

CSSの上部の方に、会話部分の背景色を設定する箇所があります。
私は白にしていますが、ここを変更すれば、会話部分を目立たせることができるかと思います。
後述する吹き出し色と合わせて設定してください。

吹き出し部分の背景色

左側の人と右側の人と分けて設定しています。
ちなみに、今回のCSSでは
  • aaaとcccが左側
  • bbbが右側

となっております。
このあたり、クラス名を自分のわかりやすいものに変えておくのがベターです。

htmlの書き方も後述しますが、基本的に手打ち作業となりますので、fukidashiクラスも自分がわかりやすいもの且つ短いものに変えておくのがいいですね。

画像設定

画像を設定します。
私は100×100ピクセルのものを使っています。
このくらいの大きさがいいと思います。

登場させる人を増やしたい場合には、画像を新たに準備をし、dddなどとしていくらでも増やせます。
右と左どちらに配置するのかだけを明確にしすればOKですね。

htmlの記述法


<div class=”fukidashi”>
<p class=”aaa”>こんな感じのね!</p>
<p class=”bbb”>そうそう!コレ!</p>
</div>

記事冒頭で実際に記述しているhtmlです。

特に注意点もなく、簡単に使っていただけるかと思います。

AMPに対応させることって、実はかなり重要な気がしています。
WordPressには便利なプラグインが多く、簡単にオシャレな装飾ができますが、AMPに対応していないプラグインが多いです。
Speech Bubbleは拡張性も高く、本当に便利なのですがAMPに対応していなかったのが痛かったです。
AMPに対応するようになったら、絶対にもう一度使うと思います。

参考:会話形式の実装について(Simplicity公式サイトフォーラム)