この記事で解決できる悩み
こんな悩みを解決する記事を用意しました!
ボクの初めてのブログも「30万PV」を超えるメディアに成長しました!
本記事の信頼性
ブログに吹き出しが使いたいですか?
ボクは元Webデザイナーで、企業・個人問わずいくつものWordPressサイトを制作してきました。
そこで、記事の前半で「ブログで吹き出しを使うメリットと注意点」を。
後半では「吹き出しの作り方3選と、コピペで自作する方法」について解説します。
本記事を最後まで読むことで、あなたのブログに合った「吹き出し」を使うことができますよ!
関連記事【実例あり】ブログのプロフィール画像・アイコンの作り方9選
ブログで吹き出しを使う4つのメリット
ブログで吹き出しを使う「メリット」は、次のとおり。
この章のもくじ
順番に見ていきましょう!
メリット①読者の離脱を避ける
ブログにとって「装飾」は超重要です!
だって、読者はブログを読んでくれないから😭
読者は装飾部分しか読まない
- ①:見出し
- ②:箇条書き
- ③:テーブル表
- ④:ボックス
- ⑤:吹き出し
- ⑥:マーカー・太字・赤文字
- ⑦:画像
テキストだけが永遠と続く『Yahoo!ニュース』みたいなブログは、まず読まれません。
だから、「読者は〝画像と装飾〟部分しか読んでない」前提でデザインするべきなんです。
「吹き出し」があれば、装飾のバリエーションを増やますよ!
メリット②装飾のバリエーションが増える
- A:ボックス
- B:吹き出し
吹き出しの代わりになる装飾って「ボックス」くらいなんですよね。
ボクはシンプルなボックスを1つだけ用意しているので、それ以外で「吹き出し」を使うようにしています。
もちろん使い方は「筆者や読者の声」を代弁するとき!
メリット③会話風を演出できる
- 筆者の声を届ける
- 読者の声を代弁できる
- 2人の会話を演出できる
ブログの冒頭ってこんな感じで始まりますよね👇
ブログは読者の悩みを解決するためのもの。
冒頭で読者の悩みを明確化するのに「吹き出し」が一役買ってるわけですね。
また、吹き出しを「左右」に2つ用意することで、「会話・インタビュー」を演出できます。
でも、ワンピース(の正体)は自分の心の成長でしたみたいな事じゃないよね?
あはは、そんなオズの魔法使いみたいな事だけはしません。
あれだけ頑張って冒険したんだから、キチンとご褒美はあげないと。
すみません。突然、ワンピースの正体に迫ってしまいました。
ボクはこのように「つぎの見出しの前」で使うことが多いです。
メリット④見出しの間をシームレスにできる
とくに章が変わる「H2見出しの前」は読者が離脱しがちです。
本記事のつぎの見出しは「吹き出しを使うときの注意点」ですが、読者によってはメリットだけ読んで閉じてしまうかも。
そこで、見出しの直前に「吹き出し」を用意するのです👇
とはいえ、間違った使い方をすると、逆に読者が離脱してしまうんです。
ブログで吹き出し・アイコンを使う6つの注意点
ブログで吹き出し・アイコンを使うときの「注意点」は次のとおり。
この章のもくじ
この章のもくじ「アイコン編」
こちらも順番に見ていきましょう!
関連記事【実例あり】ブログのプロフィール画像・アイコンの作り方9選
注意点①吹き出しを多用しない
吹き出しをふくむ「装飾」は、本当に目立たせたいところにだけ使ってください。
大事なところに蛍光ペンを引いてたら、教科書が蛍光イエローだらけになっちゃった!
みたいなことです。
また、「会話形式」以外では、吹き出しが続かないようにしましょう。うざいですよね。
1つの見出しで、吹き出しは1つまで。
これは「吹き出し」に関する記事なので、いつもより多めに使用しております🙇♂️
注意点②吹き出し内の一文を長くしない
吹き出しはテキストが『Yahoo!ニュース』のように続かないために挿入するもの。それなのに、吹き出し内の一文が長かったら本末転倒ですよね。まぁ、そもそもブログの文章って「60文字」くらいで改行した方がいいんですけどね。ちなみに、これで123文字。
読みにくいですよね。。。
吹き出し内のテキストは
- なるべく短く、簡潔に
- 2行ほどに収める
これが「鉄則」です。
注意点③吹き出しはシンプルにする
吹き出しといえば、『LINE』ですよね。
ボクもブログ開設当初は「あのグリーンの吹き出し」を再現して使っていたのですが・・・
ダサいのでやめました。
シンプル・イズ・ベスト
- アイコン画像は「100pxほど」にする
- 吹き出しの背景色は「白」
- 吹き出しの縁取りは「薄いグレー」
画像や装飾は、使えば使うほどサイトを重くします。
画像は小さく、吹き出しはシンプルにしましょう!
吹き出しなんて、これから全記事で使いますからね。
関連記事【Webデザイナーが解説】見やすいブログのデザイン・書き方14選
注意点①アイコンは複数用意する
- あなたのアイコン
- 読者のアイコン(あなたとの対比)
- 同じアイコンの左右反転
- 同じアイコンの喜怒哀楽
吹き出しのアイコンは「あなた」以外にも何数か用意しましょう。
よくあるのがこんなケース👇
そもそもBlogってどういう意味ですか?
Weblog(ウェブ上の記録)の略だよ。
先輩が初心者に教えるテイで進んでいくアレですね。
最低でも、「読者とあなた」の2枚あるといいでしょう。
注意点②アイコンの世界観を統一する
アイコンを複数用意するときは、その世界観を統一しましょう。
同じサイトからダウンロード・同じアーティストに依頼すれば間違いないですね。
ボクは、いずれAIアートで統一するつもりです!
あ、こんな感じで吹き出しを「補足的」に使うのもいいですね。
注意点③アイコンは著作権フリー画像を使う
そもそもアイコンは「著作権フリー画像」を使ってください。
ダメ、ゼッタイ
- 好きなアイドル
- 好きなアニメのキャラクター
- 画像検索で可愛かったネコ
おすすめの「著作権フリー画像サイト」が、次のとおり。
フリー画像サイト3選
とはいえ、フリー画像はほかのブログと被るんですよね。。。
アイコンは「オリジナル画像」がおすすめです!
補足オリジナルアイコンが最強!
- メリット①:誰とも被らない
- メリット②:SNSアイコンにも使い回せる
- メリット③:Googleはオリジナル画像を評価する
ブログの吹き出し以外にも、ありとあらゆるアイコンに使い回せるので、思いきって発注しちゃいましょう!
『ココナラ』に依頼するのが、一般的です。
あなたのオリジナルアイコンで、「喜怒哀楽の4枚」描いてもらえるのは嬉しいですよね!
\ 300円割引クーポンがもらえる /
無料で会員登録
ブログの吹き出しの作り方3選【ワードプレス編】
ブログの「吹き出しの作り方3選」は、次のとおり。
この章のもくじ
おすすめは、プラグインにもテーマにも依存しない「自作する方法」です。
作り方①WordPressのプラグインを使う
表は横にスクロールできます
プラグイン | ブロックエディタ | クラシックエディタ |
Word Balloon | ◯ | ◯ |
LIQUID SPEECH BALLOON | ◯ | ✕ |
吹き出しのプラグインは色々ありますが、この2つは次の条件を満たしているので、おすすめです。
プラグインの条件
- 有効インストール数が多い
- 評価が高い
- 更新されている
とはいえ、個人的には『Word Balloon』一択ですね。
吹き出しの種類も豊富で、アニメーションにも対応しています。『デモサイト』もあるので、どうぞ。
とはいえ、「吹き出し」だけのためにプラグインを入れるのは、おすすめできません。
プラグインを入れるデメリット
- サイトが重くなる
- アップデートのときに不具合が起こるかも
- ウイルス感染のリスクも
プラグインはなるべく減らすべき。
そもそも、あなたが使っているWordPressテーマに標準装備されてるかも!
関連記事【2024】WordPressのおすすめプラグイン3選+7
作り方②WordPressのテーマを使う
表は横にスクロールできます
吹き出しのあるWordPressテーマ | 料金 |
Cocoon(コクーン) | 無料 |
AFFINGER(アフィンガー) | 14,800円(当ブログと同じ) |
賢威(けんい) | 27,280円 |
WordPressテーマなら、「専用のショートコード」で吹き出しが実装できます。
ボクが使っている『AFFINGER』にも標準装備されています。
とはいえ、ショートコードはテーマを変更したくなったときに困るんですよね。
なので、ボクは自作した「吹き出し」を使っています!
しかも、吹き出し以外の「装飾もぜんぶ」です。
そして、そのすべてを記事にしています👇
HTML/CSS自作シリーズ
さらに、これら全てをコピペで実装できる『AFFINGERカスタマイズの教科書』を、購入特典の一つに用意しました。
テーマ選びに迷ってる方はぜひ👇
関連記事【14大特典】AFFINGER6本音レビュー!3年使ったメリット
【14大特典】AFFINGER6本音レビュー!3年使ったメリット
「ほかのテーマと比較したい方」は、以下も合わせてどうぞ👇
関連記事ブログにおすすめのWordPressテーマ5選【無料・有料】
ブログにおすすめのWordPressテーマ5選【無料・有料】
作り方③HTML/CSSをコピペして自作する
- ①:追加CSSにCSSをコピペする(一回きり)
- ②:エディタにHTMLをコピペして使う(毎回)
自作といっても、これだけです。
とはいえ、ボクとまったく同じ「吹き出し」ではなく、カスタマイズしたい方もいるはず。
ちょっと長くなるので、次章へ続きます👇
【コピペOK】ブログの吹き出しを自作する方法【HTML/CSS】
ブログの吹き出しを「自作する方法」は、次のとおり。
この章のもくじ
はじめに、吹き出しの「ポイント」を👇
吹き出しのポイント
- レスポンシブ(スマホ)対応済み
- チャット風に「左右」の用意がある
- アイコン画像は「四角」にもできる
- アイコンネームは「削除」できる
- テキストは複数行・改行OK
基本的に、カスタマイズすれば「カラー・サイズ」も自由に変えられますよ。
STEP1追加CSSにCSSをコピペする(一回きり)
CSS
/* 全体 */
.sb-box {
position: relative;
overflow: hidden;
}
/* アイコン画像 */
.icon-img {
position: absolute;
overflow: hidden;
top: 0; /* 画像の位置を上から0に */
width: 80px; /* 画像の幅 */
height: 80px; /* 画像の高さ */
}
/* アイコン画像(左) */
.icon-img-left {
left: 0; /* 画像の位置を左から0に */
}
/* アイコン画像(右) */
.icon-img-right {
right: 0; /* 画像の位置を右から0に */
}
/* アイコン画像 */
.icon-img img {
border-radius: 50%; /* 画像を丸く表示する */
border: 2px solid #eee; /* 画像の縁取りの太さとカラー */
}
/* アイコンネーム */
.icon-name {
position: absolute;
width: 80px; /* ネームの最大幅を画像と同じに */
text-align: center; /* ネームの位置をセンターに */
top: 83px; /* ネームの位置を上から83に */
color: #777; /* ネームのカラー */
font-size: 10px; /* ネームのフォントサイズ */
}
/* アイコンネーム(左) */
.icon-name-left {
left: 0; /* ネームの位置を左から0に */
}
/* アイコンネーム(右) */
.icon-name-right {
right: 0; /* ネームの位置を右から0に */
}
/* 吹き出し */
.sb-side {
position: relative;
float: left;
margin: 0 105px 40px 105px; /* 吹き出しの上下左右の余白 */
}
.sb-side-right {
float: right;
}
/* 吹き出し内のテキスト */
.sb-txt {
position: relative;
border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */
border-radius: 6px; /* 吹き出しを角丸に */
background: #fff; /* 吹き出しの背景色 */
color: #333; /* 吹き出し内のテキストのカラー */
font-size: 15px; /* 吹き出し内のフォントサイズ */
line-height: 1.7; /* 吹き出し内のテキストが2行以上になった時の行間 */
padding: 18px; /* 吹き出し内の上下左右の余白 */
}
.sb-txt > p:last-of-type {
padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}
/* 吹き出しの三角 */
.sb-txt:before {
content: "";
position: absolute;
border-style: solid;
top: 16px; /* 吹き出し内の三角の位置 */
z-index: 3;
}
.sb-txt:after {
content: "";
position: absolute;
border-style: solid;
top: 15px; /* beforeより-1px */
z-index: 2; /* beforeより-1 */
}
/* 吹き出しの三角(左) */
.sb-txt-left:before {
left: -7px;
border-width: 7px 10px 7px 0;
border-color: transparent #fff transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left:after {
left: -10px; /* beforeより-3px */
border-width: 8px 10px 8px 0; /* beforeより上下+1px */
border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角(右) */
.sb-txt-right:before {
right: -7px;
border-width: 7px 0 7px 10px;
border-color: transparent transparent transparent #fff; /* 背景色と同じカラーに */
}
.sb-txt-right:after {
right: -10px; /* beforeより-3px */
border-width: 8px 0 8px 10px; /* beforeより上下+1px */
border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */
}
/* 767px(iPad)以下 */
@media (max-width: 767px) {
/* アイコン画像 */
.icon-img {
width: 60px; /* 画像の幅を-20px */
height: 60px; /* 画像の高さを-20px */
}
/* アイコンネーム */
.icon-name {
width: 60px; /* 画像の幅に合わせて-20px */
top: 62px; /* ネームの位置を上から62に */
font-size: 9px; /* ネームのフォントサイズを-1px */
}
/* 吹き出し(左) */
.sb-side-left {
margin: 0 0 30px 78px; /* 吹き出し(左)の上下左右の余白を狭く */
}
/* 吹き出し(右) */
.sb-side-right {
margin: 0 78px 30px 0; /* 吹き出し(右)の上下左右の余白を狭く */
}
/* 吹き出し内のテキスト */
.sb-txt {
padding: 12px; /* 吹き出し内の上下左右の余白を-6px */
}
}
まずは、このCSSを「追加CSS」にコピペしてください(右上の「Copy」をクリック)。
念のため、バックアップを取ってからにしましょう。
STEP2-AクラシックエディタにHTMLをコピペして使う(毎回)
HTML
<!-- 吹き出し(左)の始まり -->
<div class="sb-box">
<div class="icon-img icon-img-left">
ここに「メディア(画像)を追加」する
</div><!-- /.icon-img icon-img-left -->
<div class="icon-name icon-name-left">トト</div>
<div class="sb-side sb-side-left">
<div class="sb-txt sb-txt-left">
ここに「セリフ」を書く!
</div><!-- /.sb-txt sb-txt-left -->
</div><!-- /.sb-side sb-side-left -->
</div><!-- /.sb-box -->
<!-- 吹き出し(左)の終わり -->
<!-- 吹き出し(右)の始まり -->
<div class="sb-box">
<div class="icon-img icon-img-right">
ここに「メディア(画像)を追加」する
</div><!-- /.icon-img icon-img-right -->
<div class="icon-name icon-name-right">ジリオ</div>
<div class="sb-side sb-side-right">
<div class="sb-txt sb-txt-right">
ここに「セリフ」を書く!
</div><!-- /.sb-txt sb-txt-right -->
</div><!-- /.sb-side sb-side-right -->
</div><!-- /.sb-box -->
<!-- 吹き出し(右)の終わり -->
つぎに、このHTMLを「エディタ」にコピペしてください(右上の「Copy」をクリック)。
変更してね
- アイコン画像
- アイコンネーム
- セリフ(毎回変える)
こんな感じになります👇
ここに「セリフ」を書く!
ここに「セリフ」を書く!
そのまんま使いたい方は、これでおしまいです。おつかれさまでした\(^o^)/
とはいえ、ほとんどの方は「ブロックエディタ」ですよね?
STEP2-BブロックエディタにHTMLをコピペして使う(毎回)
- ①:+ › カスタムHTMLをクリック
- ②:カスタムHTMLブロックの中にHTMLをコピペ
- ③:画像やテキストを変える
- ④:プレビューで確認する
これでブロックエディタにもHTMLをコピペできるんです。
カスタムHTMLブロックなら
- X(旧Twitter)のポスト
- YouTube動画
- Googleマップ
- アフィリエイトバナー
同じ要領でこれらも埋め込めるので、重宝しますよ。
参考記事カスタムHTMLブロック|WordPress.com
STEP3カスタマイズする
- ①:アイコン画像の大きさを変える
- ②:アイコン画像を「四角く」表示する
- ③:アイコン画像の縁取りの「太さとカラー」を変える
- ④:アイコンネームを非表示にする
- ⑤:アイコンネームの「フォントサイズとカラー」を変える
- ⑥:吹き出しの縁取りの「太さとカラーと角度」を変える
- ⑦:吹き出し内の「背景色」を変える
- ⑧:吹き出し内のテキストの「フォントサイズとカラー」を変える
アイコンを「四角」にしたり、名前を非表示にしたり、縁取り・背景・テキストの色を変えたり。
ここでは、1つだけご紹介しますね。
カスタマイズ「画像をCSSだけで反転させる」方法です。
HTML
<div class="icon-img icon-img-right"><img src="画像のURL" alt="画像の説明文" width="画像の幅" height="画像の高さ" style="transform: scale(-1, 1)" /></div>
反転した画像を用意しなくても、img(画像)タグにstyle="transform: scale(-1, 1)"を追記することで、画像が左右反転しますよ。
ここに「セリフ」を書く!
ここに「セリフ」を書く!
とはいえ、カスタマイズは長くなるので元記事をどうぞ(別サイトに飛びます)👇
関連記事【CSS】チャット風吹き出しデザイン【LINE風・会話風・おしゃれ】
【Q&A】ブログの吹き出しに関するよくある質問
ブログの吹き出しに関する「よくある質問(Q&A)」は次のとおり。
この章のもくじ
長くなってしまったので、一つだけ。
Q1:ブログの吹き出しアイコンの作り方は?【無料・有料】
A無料と有料で3つ用意しました。
ブログの吹き出しアイコンの作り方3選
もちろん、「あなたが撮影したオリジナル画像」でもOK。
フリー画像サイト3選
無料なら『Canva』で編集するのが一般的ですね。
\ 300円割引クーポンがもらえる /
無料で会員登録
とはいえ、「プロフィール画像・アイコンの作り方」は別記事で深掘りしたので、どうぞ👇
関連記事【実例あり】ブログのプロフィール画像・アイコンの作り方9選
ここまで読んでくれたあなたへ
最後に、大切なお知らせです。
【まとめ】ブログの吹き出しはコピペで実装できる
ブログの「吹き出し」について解説しました。
まとめ
- ブログに吹き出しを使うことはメリットだらけ
- とはいえ、使いすぎは禁物
- アイコンはオリジナルが最強!
- 吹き出し専用のプラグインもある
- 吹き出しが標準装備されてるWordPressテーマもある
- とはいえ、自作がおすすめ!
「プラグイン → テーマ → 自作」の順番で、おすすめです。
あなたのブログに合ったやり方で「吹き出し」を実装してくださいね。
アイコンはオリジナルが最強ですよ👇
\ 300円割引クーポンがもらえる /
無料で会員登録
ブログを始めたい方へ
当サイト経由で、国内シェアNo.1レンタルサーバー『エックスサーバー』に申し込むと、最大10,000円割引になります。
しかも、今ちょうどやっている「お得なキャンペーン」との併用もOK!
\ 初期費用無料! /
キャンペーンは予告なく変更・終了する可能性あり