【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>
画面表示
ここに書いた内容が吹き出しに表示されます。
お試しください。
お試しください。
