この記事の特徴
重要度 | |
難易度 | |
備考 | アイコンつきの吹き出しを使うと、記事の途中に会話を挟む雰囲気となります。アイコンでブログ運営者を覚えてもらうことも可能です。 |
アメブロでも以下のような「会話形式の吹き出し」を使えたらいいと思いませんか?
このようなアイコン画像つきの吹き出しのことだよ。会話調で読みやすく、印象にも残りやすいね。
- 記事が読みやすくなる(離脱防止)
- 目立つので、読者の印象に残りやすい(収益UP)
- アイコンつきだから読者に覚えられる(信頼感UP)
文字だらけの記事は読者に途中離脱されるので、吹き出しなどで「読ませる工夫」「印象に残す工夫」が大事ですよね。
使い方はHTMLやCSSを知らなくてもOK・コピペして貼り付けるだけ。
しかもスマホやアプリで記事を見る読者にも対応。
デザインと色を選ぶとコードが自動で表示されます。コピーしてアメブロ記事内のHTML表示に貼りつけて下さい。
ブログの雰囲気に合わせて、各デザイン7色(青・水色・緑・赤・ピンク・オレンジ・茶)から選べます。
記事後半では「吹き出しの活用法」や「設置の手順」も解説しているので、必要に応じて確認して下さい。

①シンプルな枠線の吹き出し
枠線だけで作ったシンプルな会話調吹き出しです。
吹き出しの中身は透明ではなく白なので、背景色がある場合に白くなる点に注意して下さい。
枠線の吹き出し【左から】(①-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はボックス枠に箇条書きを入れ、さらに吹き出しで小まとめにしました。
同じ内容でも吹き出しなどを使うだけで、読みやすく・納得する読者も増えます。


申し込みフォームの前に置く
吹き出しを申込フォームの前に置くと、安心感を与え・申込者数を伸ばすことも可能です。
アメブロにありがちなデザインと比べてみましょう。(記事の最後にセミナー(商品)紹介をしているイメージです。)
Beforeはアメブロでよく見るデザインで、残念ながら申込者数のUPはあまり期待できません。
そこで以下のように修正して見ます。
Afterは事前に吹き出しを使い、読者に安心感を与えます。ボックス枠も他の人とは違うデザインを使いました。
リンクも押しやすいものに変更しています。


吹き出しの設置手順
吹き出しには画像が入るので、設置が少しだけややこしくなります。
具体的な流れを分かりやすく紹介しますね。
【事前準備】アイコン画像の準備(最初の1回だけ)
初めて吹き出しを使う人は、専用のアイコンを準備しましょう。(2回目以降は不要な作業です)
アイコン画像は横100px・縦100pxの円形に切り取った画像を使って下さい。
この記事の吹き出しは横100px・縦100pxの円形画像で、PC・スマホ表示どちらも対応する調整をしています。サイズが異なると表示が崩れる可能性があります。
例として「Photo Scape」(無料で簡単に使える画像編集ソフト)を使ってアイコン画像を作成してみます。(アイコンに使う画像はご自身で用意して下さいね)
まずはアイコンに使う画像を「Photo Scape」上で表示します。
以下のように「円形にトリミング」機能を使い、円を作り・サイズ縦横100PXに調整します。
「トリミング」をクリックすると、次のように切り取られます。
画像とサイズを確認して保存して下さい。
作成した画像を記事に載せる前に、圧縮して軽量化するのを忘れないで下さいね。
圧縮したアイコン画像は、アメブロにアップロードしておきましょう。


吹き出しを選んで、HTMLコードをコピー
次に吹き出しデザイン・色を、この記事から選んで下さい。
色を選ぶと、吹き出しの下(グレーのボックス)にコードが表示されるのでコピーします。

アメブロに貼り付けて中身を書く
続いてアメブロの記事作成画面を、「HTML表示」に切り替えます。
そして吹き出しを挿入したい部分に、コピーしたコードを貼り付けます。
この時に「ここに画像」の文字をマウスで選択した状態で、アイコン画像をクリックしましょう。
下記のように、アイコン画像のURLが入ります。
アメブロの場合は画像を挿入すると、クリック拡大用の「<a>」タグが入りますよね。
アイコン画像を拡大する意味はないので、「<a ~>」「</a>」の両方を消しておきましょう。(片方だけ消すのは表示崩れになるので厳禁)
画像を表す「<img ~>」タグがあればOKです。(拡大されてもいい人は消さなくてもOK)
最後に「通常表示」に戻して、吹き出しに名前と中身を書きましょう。
吹き出しの中身や名前は、「ENTER」または「SHIFT+ENTER」のどちらでも改行可能です。
名前は5文字までならスマホでも1行表示されます。長い場合は改行して下さいね。

吹き出しを簡単に使う方法
「AmeCare(アメケア)」という「Google Chrome」のプラグインを使うと、コードが複雑な吹き出しでも記事にすぐ貼り付けできます。(無料版で十分です)
以下のように吹き出しのコードに画像URLと名前を入れた状態を事前に作りましょう。
これをアメケアの定型タグに登録して下さい。
記事を書く時にアメケアに登録したコードを選びます。
すると、下記のようにサクッと吹き出しが入ります。(HTML表示に貼り付けも不要)
アイコンと名前が入った状態ですぐに挿入され、中身を書くだけなので簡単ですね。
毎回の記事作成で、カスタマイズが簡単にできるので便利です。

よくある質問・注意点
吹き出し作成でよくある質問・注意点を紹介します。
カバー画像(アイキャッチ画像)を設定すること
アメブロ記事でカバー画像を設定することで、記事一覧などでサムネイル画像として表示される機能がありますよね。
カバー画像を設定しない場合は、記事の一番上に置いた画像がサムネイル表示されます。
つまりカバー画像を設定せず・吹き出しの上に何も画像がないと、サムネイルにアイコン画像が出てしまいます。
アイコン画像ではなく、記事内容に合ったサムネイル画像があるとアクセス数が伸びやすいです。
カバー画像の設定をするか、吹き出しより上にサムネイル用の画像を置きましょう。


画像に代替に代替テキストは入れるべき?
通常の画像には代替テキストを入れた方がアクセス数で有利です。
多くの人がアクセス数UPのために、画像に代替テキストを入れていますよね。
ただし今回のアイコン画像は記事内容に直接関係ないので、代替テキストは空白でOKです。

アイコン画像は自分以外の写真でもいいの?
この記事では吹き出しをイメージしやすくする目的で、無料で使える写真提供サイトから使いました。
ただしフリーで使える写真でも、他人の写真を自分のアイコンとして使うのは規約違反。
ご自身で撮影した写真を利用して下さいね。(イラストの場合はフリー素材でもOK)

コメント