この記事の特徴
| 重要度 | |
| 難易度 | |
| 備考 | アイコンつきの吹き出しを使うと、記事の途中に会話を挟む雰囲気となります。アイコンでブログ運営者を覚えてもらうことも可能です。 |
アメブロでも以下のような「会話形式の吹き出し」を使えたらいいと思いませんか？
くますけ
このようなアイコン画像つきの吹き出しのことだよ。会話調で読みやすく、印象にも残りやすいね。
アメブロで吹き出しを使うメリット
- 記事が読みやすくなる（離脱防止）
- 目立つので、読者の印象に残りやすい（収益UP）
- アイコンつきだから読者に覚えられる（信頼感UP）
文字だらけの記事は読者に途中離脱されるので、吹き出しなどで「読ませる工夫」「印象に残す工夫」が大事ですよね。
使い方はHTMLやCSSを知らなくてもOK・コピペして貼り付けるだけ。
しかもスマホやアプリで記事を見る読者にも対応。
デザインと色を選ぶとコードが自動で表示されます。コピーしてアメブロ記事内のHTML表示に貼りつけて下さい。
ブログの雰囲気に合わせて、各デザイン7色（青・水色・緑・赤・ピンク・オレンジ・茶）から選べます。
記事後半では「吹き出しの活用法」や「設置の手順」も解説しているので、必要に応じて確認して下さい。
あめっくま
「うまくいかない」など困った方は、遠慮なく記事下コメント欄から質問して下さいね。
この記事を書いた人
＼ アメブロたった20記事で5万PVの手法 ／
①シンプルな枠線の吹き出し
枠線だけで作ったシンプルな会話調吹き出しです。
吹き出しの中身は透明ではなく白なので、背景色がある場合に白くなる点に注意して下さい。
枠線の吹き出し【左から】（①－A）
ここに名前
実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。
<div class="topic" style="display: flex;"><!-- この行から枠線の吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #91a8ee; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: 4px; width: 0; height: 0; border-style: solid; border-width: 19px 19px 19px 0; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #91a8ee; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（左から） --> <p> </p>
ここに名前
実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。
<div class="topic" style="display: flex;"><!-- この行から枠線の吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #98d5fb; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: 4px; width: 0; height: 0; border-style: solid; border-width: 19px 19px 19px 0; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #98d5fb; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（左から） --> <p> </p>
ここに名前
実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。
<div class="topic" style="display: flex;"><!-- この行から枠線の吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #88cc66; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: 4px; width: 0; height: 0; border-style: solid; border-width: 19px 19px 19px 0; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #88cc66; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（左から） --> <p> </p>
ここに名前
実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。
<div class="topic" style="display: flex;"><!-- この行から枠線の吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #e67981; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: 4px; width: 0; height: 0; border-style: solid; border-width: 19px 19px 19px 0; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #e67981; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（左から） --> <p> </p>
ここに名前
実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。
<div class="topic" style="display: flex;"><!-- この行から枠線の吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #f093bc; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: 4px; width: 0; height: 0; border-style: solid; border-width: 19px 19px 19px 0; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #f093bc; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（左から） --> <p> </p>
ここに名前
実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。
<div class="topic" style="display: flex;"><!-- この行から枠線の吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #fdc668; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: 4px; width: 0; height: 0; border-style: solid; border-width: 19px 19px 19px 0; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #fdc668; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（左から） --> <p> </p>
ここに名前
実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。
<div class="topic" style="display: flex;"><!-- この行から枠線の吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #e78f50; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: 4px; width: 0; height: 0; border-style: solid; border-width: 19px 19px 19px 0; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #e78f50; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（左から） --> <p> </p>
枠線の吹き出し【右から】（①－B）
ここに名前
右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から枠線の吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #91a8ee; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: -23px; width: 0; height: 0; border-style: solid; border-width: 19px 0 19px 19px; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #91a8ee; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（右から） --> <p> </p>
ここに名前
右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から枠線の吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #98d5fb; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: -23px; width: 0; height: 0; border-style: solid; border-width: 19px 0 19px 19px; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #98d5fb; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（右から） --> <p> </p>
ここに名前
右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から枠線の吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #88cc66; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: -23px; width: 0; height: 0; border-style: solid; border-width: 19px 0 19px 19px; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #88cc66; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（右から） --> <p> </p>
ここに名前
右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から枠線の吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #e67981; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: -23px; width: 0; height: 0; border-style: solid; border-width: 19px 0 19px 19px; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #e67981; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（右から） --> <p> </p>
ここに名前
右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から枠線の吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #f093bc; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: -23px; width: 0; height: 0; border-style: solid; border-width: 19px 0 19px 19px; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #f093bc; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（右から） --> <p> </p>
ここに名前
右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から枠線の吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #fdc668; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: -23px; width: 0; height: 0; border-style: solid; border-width: 19px 0 19px 19px; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #fdc668; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（右から） --> <p> </p>
ここに名前
右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から枠線の吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="position: relative; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #e78f50; transparent transparent; margin-top: 20px;"><div style="position: absolute; top: -19px; left: -23px; width: 0; height: 0; border-style: solid; border-width: 19px 0 19px 19px; border-color: transparent #ffffff; transparent transparent;"></div></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; border: 3px solid #e78f50; background: #ffffff; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで枠線の吹き出し（右から） --> <p> </p>
②おしゃれなLINE風吹き出し
吹き出し部分を塗りつぶしました。LINE風吹き出しとも呼ばれます。
LINE風の吹き出し【左から】（②－A）
ここに名前
LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。
<div class="topic" style="display: flex;"><!-- この行からLINE風吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #e0e7fa; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #e0e7fa; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（左から） --> <p> </p>
ここに名前
LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。
<div class="topic" style="display: flex;"><!-- この行からLINE風吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #e7f5fe; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #e7f5fe; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（左から） --> <p> </p>
ここに名前
LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。
<div class="topic" style="display: flex;"><!-- この行からLINE風吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #d6efbe; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #d6efbe; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（左から） --> <p> </p>
ここに名前
LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。
<div class="topic" style="display: flex;"><!-- この行からLINE風吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #f5c7ca; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #f5c7ca; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（左から） --> <p> </p>
ここに名前
LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。
<div class="topic" style="display: flex;"><!-- この行からLINE風吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #fbe4ee; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #fbe4ee; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（左から） --> <p> </p>
ここに名前
LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。
<div class="topic" style="display: flex;"><!-- この行からLINE風吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #fee8c2; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #fee8c2; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（左から） --> <p> </p>
ここに名前
LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。
<div class="topic" style="display: flex;"><!-- この行からLINE風吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #f6d4bc; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #f6d4bc; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（左から） --> <p> </p>
LINE風の吹き出し【右から】（②－B）
ここに名前
右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行からLINE風吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #e0e7fa; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #e0e7fa; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（右から） --> <p> </p>
ここに名前
右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行からLINE風吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #e7f5fe; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #e7f5fe; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（右から） --> <p> </p>
ここに名前
右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行からLINE風吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #d6efbe; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #d6efbe; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（右から） --> <p> </p>
ここに名前
右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行からLINE風吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #f5c7ca; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #f5c7ca; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（右から） --> <p> </p>
ここに名前
右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行からLINE風吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #fbe4ee; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #fbe4ee; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（右から） --> <p> </p>
ここに名前
右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行からLINE風吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #fee8c2; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #fee8c2; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（右から） --> <p> </p>
ここに名前
右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行からLINE風吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #f6d4bc; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #f6d4bc; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（右から） --> <p> </p>
③考え事風のかわいい吹き出し
心の中の声を表現した吹き出しです。
考え事風の吹き出し【左から】（③－A）
ここに名前
考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。
<div class="topic" style="display: flex;"><!-- この行から考え事吹き出し（左から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #e0e7fa; border-radius: 50%; width: 9px; height: 9px; margin: 35px 1px 0 2px;"></div> <div style="background: #e0e7fa; border-radius: 50%; width: 15px; height: 15px; margin: 25px 2px 0 1px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #e0e7fa; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（左から） --> <p> </p>
ここに名前
考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。
<div class="topic" style="display: flex;"><!-- この行から考え事吹き出し（左から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #e7f5fe; border-radius: 50%; width: 9px; height: 9px; margin: 35px 1px 0 2px;"></div> <div style="background: #e7f5fe; border-radius: 50%; width: 15px; height: 15px; margin: 25px 2px 0 1px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #e7f5fe; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（左から） --> <p> </p>
ここに名前
考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。
<div class="topic" style="display: flex;"><!-- この行から考え事吹き出し（左から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #d6efbe; border-radius: 50%; width: 9px; height: 9px; margin: 35px 1px 0 2px;"></div> <div style="background: #d6efbe; border-radius: 50%; width: 15px; height: 15px; margin: 25px 2px 0 1px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #d6efbe; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（左から） --> <p> </p>
ここに名前
考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。
<div class="topic" style="display: flex;"><!-- この行から考え事吹き出し（左から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #f5c7ca; border-radius: 50%; width: 9px; height: 9px; margin: 35px 1px 0 2px;"></div> <div style="background: #f5c7ca; border-radius: 50%; width: 15px; height: 15px; margin: 25px 2px 0 1px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #f5c7ca; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（左から） --> <p> </p>
ここに名前
考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。
<div class="topic" style="display: flex;"><!-- この行から考え事吹き出し（左から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #fbe4ee; border-radius: 50%; width: 9px; height: 9px; margin: 35px 1px 0 2px;"></div> <div style="background: #fbe4ee; border-radius: 50%; width: 15px; height: 15px; margin: 25px 2px 0 1px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #fbe4ee; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（左から） --> <p> </p>
ここに名前
考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。
<div class="topic" style="display: flex;"><!-- この行から考え事吹き出し（左から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #fee8c2; border-radius: 50%; width: 9px; height: 9px; margin: 35px 1px 0 2px;"></div> <div style="background: #fee8c2; border-radius: 50%; width: 15px; height: 15px; margin: 25px 2px 0 1px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #fee8c2; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（左から） --> <p> </p>
ここに名前
考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。
<div class="topic" style="display: flex;"><!-- この行から考え事吹き出し（左から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #f6d4bc; border-radius: 50%; width: 9px; height: 9px; margin: 35px 1px 0 2px;"></div> <div style="background: #f6d4bc; border-radius: 50%; width: 15px; height: 15px; margin: 25px 2px 0 1px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #f6d4bc; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（左から） --> <p> </p>
考え事風の吹き出し【右から】（③－B）
ここに名前
右からの考え事風の吹き出しです。お好みで使って下さいね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から考え事吹き出し（右から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #e0e7fa; border-radius: 50%; width: 9px; height: 9px; margin: 35px 2px 0 1px;"></div> <div style="background: #e0e7fa; border-radius: 50%; width: 15px; height: 15px; margin: 25px 1px 0 2px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #e0e7fa; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（右から） --> <p> </p>
ここに名前
右からの考え事風の吹き出しです。お好みで使って下さいね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から考え事吹き出し（右から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #e7f5fe; border-radius: 50%; width: 9px; height: 9px; margin: 35px 2px 0 1px;"></div> <div style="background: #e7f5fe; border-radius: 50%; width: 15px; height: 15px; margin: 25px 1px 0 2px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #e7f5fe; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（右から） --> <p> </p>
ここに名前
右からの考え事風の吹き出しです。お好みで使って下さいね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から考え事吹き出し（右から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #d6efbe; border-radius: 50%; width: 9px; height: 9px; margin: 35px 2px 0 1px;"></div> <div style="background: #d6efbe; border-radius: 50%; width: 15px; height: 15px; margin: 25px 1px 0 2px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #d6efbe; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（右から） --> <p> </p>
ここに名前
右からの考え事風の吹き出しです。お好みで使って下さいね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から考え事吹き出し（右から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #f5c7ca; border-radius: 50%; width: 9px; height: 9px; margin: 35px 2px 0 1px;"></div> <div style="background: #f5c7ca; border-radius: 50%; width: 15px; height: 15px; margin: 25px 1px 0 2px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #f5c7ca; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（右から） --> <p> </p>
ここに名前
右からの考え事風の吹き出しです。お好みで使って下さいね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から考え事吹き出し（右から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #fbe4ee; border-radius: 50%; width: 9px; height: 9px; margin: 35px 2px 0 1px;"></div> <div style="background: #fbe4ee; border-radius: 50%; width: 15px; height: 15px; margin: 25px 1px 0 2px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #fbe4ee; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（右から） --> <p> </p>
ここに名前
右からの考え事風の吹き出しです。お好みで使って下さいね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から考え事吹き出し（右から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #fee8c2; border-radius: 50%; width: 9px; height: 9px; margin: 35px 2px 0 1px;"></div> <div style="background: #fee8c2; border-radius: 50%; width: 15px; height: 15px; margin: 25px 1px 0 2px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #fee8c2; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（右から） --> <p> </p>
ここに名前
右からの考え事風の吹き出しです。お好みで使って下さいね。
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行から考え事吹き出し（右から） --> <div style="width: 20%;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="background: #f6d4bc; border-radius: 50%; width: 9px; height: 9px; margin: 35px 2px 0 1px;"></div> <div style="background: #f6d4bc; border-radius: 50%; width: 15px; height: 15px; margin: 25px 1px 0 2px;"></div> <div style="width: 65%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #f6d4bc; border-radius: 25px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行まで考え事吹き出し（右から） --> <p> </p>
効果的な活用方法
アイコン画像つきの吹き出しを上手に使うと、読者数UP・収益UPにもつながります。
読者に大事な内容を伝える
吹き出しの中に、読者に伝えたい内容を書いて印象に残すことができます。
「吹き出し」と「普通の文章」を比べてみましょう。
吹き出しに入れた方が、大事な内容が伝わりやすいですよね。
しかもあなたが話しかけているように見えるので、読者の共感も得やすいです。
くますけ
吹き出しの内容は印象に残るんだよねえ。
記事を読みやすくする
内容が良くても文字だらけの記事は読みづらく、読者に途中で離脱されます。
忙しい読者には流し読みされ、肝心の内容が伝わらないことも・・・
よくあるアメブロでの書き方を、吹き出しで修正してみます。（記事の途中の箇条書きをイメージ）
Beforeはアメブロでよく見る絵文字を用いた箇条書きで、あまり良い書き方ではありません。
Afterはボックス枠に箇条書きを入れ、さらに吹き出しで小まとめにしました。
同じ内容でも吹き出しなどを使うだけで、読みやすく・納得する読者も増えます。
あめっくま
質の高い記事を書き・カスタマイズで読者の印象に残すことが大事ですね。
【素材数No.1】アメブロ用の囲み枠・ボックス厳選300種
この記事ではアメブロ用の囲み枠・ボックス・フレーム枠のデザインを提供しています。素材は約300種類（色も選べる）・コピーして貼り付けるだけ（HTML・CSSの知識不要）シンプル・かわいい・かっこいいな囲み枠を用意しています。囲み枠を使っておしゃれなブログにしましょう。
nk-media.org
申し込みフォームの前に置く
吹き出しを申込フォームの前に置くと、安心感を与え・申込者数を伸ばすことも可能です。
アメブロにありがちなデザインと比べてみましょう。（記事の最後にセミナー（商品）紹介をしているイメージです。）
Beforeはアメブロでよく見るデザインで、残念ながら申込者数のUPはあまり期待できません。
そこで以下のように修正して見ます。
Afterは事前に吹き出しを使い、読者に安心感を与えます。ボックス枠も他の人とは違うデザインを使いました。
リンクも押しやすいものに変更しています。
あめっくま
当サイトで用意している吹き出しなどのカスタマイズを使うと、申込者数UPも狙えます。
素材数No1！アメブロ用の申し込みボタンをコピペで簡単作成
この記事ではアメブロで使えるボタンリンクの素材を紹介します。コピペで簡単に設置できます。HTML・CSSなどのカスタマイズ知識は不要！かわいいボタン・おしゃれなボタン・電話ボタン・お問い合わせボタンなど、あなたのアメブロ記事でもすぐ作成できますよ。
nk-media.org
吹き出しの設置手順
吹き出しには画像が入るので、設置が少しだけややこしくなります。
具体的な流れを分かりやすく紹介しますね。
【事前準備】アイコン画像の準備（最初の1回だけ）
初めて吹き出しを使う人は、専用のアイコンを準備しましょう。（2回目以降は不要な作業です）
アイコン画像は横100px・縦100pxの円形に切り取った画像を使って下さい。
補足
この記事の吹き出しは横100px・縦100pxの円形画像で、PC・スマホ表示どちらも対応する調整をしています。サイズが異なると表示が崩れる可能性があります。
例として「Photo Scape」（無料で簡単に使える画像編集ソフト）を使ってアイコン画像を作成してみます。（アイコンに使う画像はご自身で用意して下さいね）
まずはアイコンに使う画像を「Photo Scape」上で表示します。
以下のように「円形にトリミング」機能を使い、円を作り・サイズ縦横100PXに調整します。
「トリミング」をクリックすると、次のように切り取られます。
画像とサイズを確認して保存して下さい。
作成した画像を記事に載せる前に、圧縮して軽量化するのを忘れないで下さいね。
圧縮したアイコン画像は、アメブロにアップロードしておきましょう。
くますけ
画像の軽量化は、アメブロでは必須だよね。
アメブロが重いを1分で改善！最適な画像サイズや大きさと容量を軽くする方法
この記事ではアメブロ記事での画像の最適サイズや大きさ、容量を小さくする方法を解説します。画像や図解で読者に分かりやすくすることは大事ですが、アメブロはかなり重いサイトなので事前に画像を軽くしてからアップロードする必要がありますよね。具体的な方法と重い画像が与える影響も紹介します。
nk-media.org
吹き出しを選んで、HTMLコードをコピー
次に吹き出しデザイン・色を、この記事から選んで下さい。
色を選ぶと、吹き出しの下（グレーのボックス）にコードが表示されるのでコピーします。
あめっくま
HTMLコードの意味は分からなくてもOKです。
アメブロに貼り付けて中身を書く
続いてアメブロの記事作成画面を、「HTML表示」に切り替えます。
そして吹き出しを挿入したい部分に、コピーしたコードを貼り付けます。
この時に「ここに画像」の文字をマウスで選択した状態で、アイコン画像をクリックしましょう。
下記のように、アイコン画像のURLが入ります。
アメブロの場合は画像を挿入すると、クリック拡大用の「<a>」タグが入りますよね。
アイコン画像を拡大する意味はないので、「<a ～>」「</a>」の両方を消しておきましょう。（片方だけ消すのは表示崩れになるので厳禁）
画像を表す「<img ～>」タグがあればOKです。（拡大されてもいい人は消さなくてもOK）
最後に「通常表示」に戻して、吹き出しに名前と中身を書きましょう。
吹き出しの中身や名前は、「ENTER」または「SHIFT＋ENTER」のどちらでも改行可能です。
名前は5文字までならスマホでも1行表示されます。長い場合は改行して下さいね。
あめっくま
コピーしたら貼り付けて、吹き出しの中身を書くだけですね。
吹き出しを簡単に使う方法
「AmeCare（アメケア）」という「Google Chrome」のプラグインを使うと、コードが複雑な吹き出しでも記事にすぐ貼り付けできます。（無料版で十分です）
以下のように吹き出しのコードに画像URLと名前を入れた状態を事前に作りましょう。
これをアメケアの定型タグに登録して下さい。
記事を書く時にアメケアに登録したコードを選びます。
すると、下記のようにサクッと吹き出しが入ります。（HTML表示に貼り付けも不要）
アイコンと名前が入った状態ですぐに挿入され、中身を書くだけなので簡単ですね。
毎回の記事作成で、カスタマイズが簡単にできるので便利です。
くますけ
2回目以降は簡単に使えるんだね。
よくある質問・注意点
吹き出し作成でよくある質問・注意点を紹介します。
カバー画像（アイキャッチ画像）を設定すること
アメブロ記事でカバー画像を設定することで、記事一覧などでサムネイル画像として表示される機能がありますよね。
カバー画像を設定しない場合は、記事の一番上に置いた画像がサムネイル表示されます。
つまりカバー画像を設定せず・吹き出しの上に何も画像がないと、サムネイルにアイコン画像が出てしまいます。
アイコン画像ではなく、記事内容に合ったサムネイル画像があるとアクセス数が伸びやすいです。
カバー画像の設定をするか、吹き出しより上にサムネイル用の画像を置きましょう。
あめっくま
吹き出しのアイコン画像がサムネイルにならないよう、注意して下さいね。
【効果絶大】アメブロ記事にアイキャッチ・カバー画像を入れよう！設定方法も解説
この記事ではアメブロにアイキャッチ画像・カバー画像を設定する方法と効果を解説します。カバー画像を設定すれば様々な場所で表示されるので、読者のクリック率が上がります。ブログ集客のポイントになるので、記事に入れておきましょう。
nk-media.org
画像に代替に代替テキストは入れるべき？
通常の画像には代替テキストを入れた方がアクセス数で有利です。
多くの人がアクセス数UPのために、画像に代替テキストを入れていますよね。
ただし今回のアイコン画像は記事内容に直接関係ないので、代替テキストは空白でOKです。
【10秒で改善】アメブロの画像には代替テキスト（alt属性）を入力しておこう
アメブロ記事に載せる画像に代替テキスト（alt属性）を載せる方法を解説します。画像で分かりやすくするのは大事ですが、代替テキストを入れていないと、画像が見れない時に内容が伝わりません。仕組みや効果的な活用法を解説します。
nk-media.org
アイコン画像は自分以外の写真でもいいの？
この記事では吹き出しをイメージしやすくする目的で、無料で使える写真提供サイトから使いました。
ただしフリーで使える写真でも、他人の写真を自分のアイコンとして使うのは規約違反。
ご自身で撮影した写真を利用して下さいね。（イラストの場合はフリー素材でもOK）
あめっくま
著作権を守らずアメブロのアカウントを突然削除されても、文句を言えませんよね。
コメント