2020/08/13 (更新日: 2020/08/14)

【Manablog Copy】マナブログコピーで会話風の吹き出しを作る方法

こんにちは！サラファイです。

この記事ではマナブログコピーで「会話風の吹き出し」を作成する方法を説明します。

動作環境 Manablog Copy Ver3.0

事前の準備 | 追加CSSへの登録

追加CSSに下記のCSS(ソースコード)を張り付けてください。
※テーマエディタでstyle.cssに追記してもらう方法でもOKです。

CSS

.talk {
	display: flex;
	justify-content: center;
	margin: 0 0 0 0;
}

.talk-img {
	width: 20%;
	height: auto;
	flex-shrink: 0;
}

.talk-balloonL, .talk-balloonR {
	margin: 0 0 0 15px;
	background: #c2eeff;
	display: flex;
	position: relative;
	border-radius: 6px;
	padding: 1em;
	text-align: left;
	word-break: break-all;
}

.talk-balloonR:before {
	content: '';
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 16px solid #c2eeff;
	top: 19px;
	left: -16px;
	position: absolute;
	font-size: 0;
}

.talk-balloonL:before {
	content: '';
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 16px solid #c2eeff;
	top: 19px;
	left: 100%;
	position: absolute;
	font-size: 0;
}

.talk-text {
	font-size: 12pt;
}

記事の書き方

記事を書くときは、下記に示すHTML(ソースコード)をカスタムHTMLブロックにコピーしてください。

左に画像があるパターン

HTML

<div class="talk">
<div class="talk-img">
<img src="https://画像のURLを指定してください/image.png" />
</div>
<div class="talk-balloonR">
<div class="talk-text">
ここに書いた内容が吹き出しに表示されます。<br>
お試しください。</span>
</div>
</div>
</div>

画面表示

ここに書いた内容が吹き出しに表示されます。
お試しください。

右に画像があるパターン

HTML

<div class="talk">
<div class="talk-balloonL">
<div class="talk-text">
ここに書いた内容が吹き出しに表示されます。<br>
お試しください。</span>
</div>
</div>
<div class="talk-img">
<img src="https://画像のURLを指定してください/image.png" />
</div>
</div>

画面表示

ここに書いた内容が吹き出しに表示されます。
お試しください。