2021/10/18 (更新日: 2021/10/20)

【映える】吹き出しに「文字背景色と枠」を追加しよう！【Manablog Copy】

ブログ運用

これを目標にします^ ^

①. Manablog Copyデフォルトの吹き出し：

② 【Manablog Copy】カスタマイズ「吹き出し」の編集方法を解説！
で解説している吹き出し:

③この記事の目標！

 

事前の準備

それでは順番に一緒にやってみましょう！

テーマエディター「style.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;
}

記事への挿入方法

「左に画像＋右に吹き出し」のパターン

<div class="talk">
<div class="talk-img">
<img src="画像のURL" />
</div>
<div class="talk-balloonR">
<div class="talk-text">
<span class="bold">ここに書いた内容が吹き出しに表示されます。</span></span>
</div>
</div>
</div>

「右に画像＋左に吹き出し」のパターン

<div class="talk">
<div class="talk-balloonL">
<div class="talk-text">
<span class="bold">ここに書いた内容が吹き出しに表示されます。</span></span>
</div>
</div>
<div class="talk-img">
<img src="https://www.kakibiz.com/wp-content/uploads/2021/10/9515cef6ea5e5687df00ce0702f6d889.png" />
</div>
</div>

まずはやってみましょう！

【映える】吹き出しに「文字背景色と枠」を追加しよう！【Manablog Copy】ということでお伝えしてきましたが、わかっていただけましたでしょうか？

これを読んで少しでも理解できたなら、あとは実践あるのみです。サイト設計は８０点が取れれば十分です。内容が一番重要！
やりながら、自分のやり方を作っていけば大丈夫です。少しずつで良いですので、一歩ずつ前進していきましょう！

それでは、次の記事でお待ちしています^ ^

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

人気記事【資産運用】インデックス投資家が老後も失敗しない５つの理由を解説！

人気記事【結論】小金持ちになる方法は「毎月１０万円を、年利５％で２３年間運用」すること！

ブログ運営

• facebook
• Tweet
• hatebu
• LINE
• Read Later