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

【Manablog Copy】吹き出しをカスタマイズ!
『文字背景色と枠』追加します!
『文字背景色と枠』追加します!
これを目標にします^ ^
①. Manablog Copyデフォルトの吹き出し:

怠け者ブロガー「検索で上位表示されないなぁ。なんでだろうなぁ。」
↓
② 【Manablog Copy】カスタマイズ「吹き出し」の編集方法を解説!
で解説している吹き出し:

「検索で上位表示されないなぁ。なんでだろうなぁ。」
↓
③この記事の目標!

「検索で上位表示されないなぁ。なんでだろうなぁ。」
スポンサードサーチ
事前の準備

それでは順番に一緒にやってみましょう!
テーマエディター「style.CSS」の編集
①外観→
②テーマエディター→
③style.css
④style.cssに「下記のコード」を、一番下に「コピー&ペースト」
②テーマエディター→
③style.css
④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】ということでお伝えしてきましたが、わかっていただけましたでしょうか?
これを読んで少しでも理解できたなら、あとは実践あるのみです。サイト設計は80点が取れれば十分です。内容が一番重要!
やりながら、自分のやり方を作っていけば大丈夫です。少しずつで良いですので、一歩ずつ前進していきましょう!
それでは、次の記事でお待ちしています^ ^
参考記事:
【Manablog Copy】マナブログコピーで会話風の吹き出しを作る方法
人気記事【資産運用】インデックス投資家が老後も失敗しない5つの理由を解説!
人気記事【結論】小金持ちになる方法は「毎月10万円を、年利5%で23年間運用」すること!