【HTMLをコピペ】ブログの吹き出しの作り方３選をデザイナーが解説

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

ボクは元Webデザイナーで、企業・個人問わずいくつものWordPressサイトを制作してきました。

そこで、記事の前半で「ブログで吹き出しを使うメリットと注意点」を。

後半では「吹き出しの作り方３選と、コピペで自作する方法」について解説します。

本記事を最後まで読むことで、あなたのブログに合った「吹き出し」を使うことができますよ！

関連記事【実例あり】ブログのプロフィール画像・アイコンの作り方９選

ブログで吹き出しを使う４つのメリット

ブログで吹き出しを使う「メリット」は、次のとおり。

この章のもくじ

順番に見ていきましょう！

メリット①読者の離脱を避ける

ブログにとって「装飾」は超重要です！

だって、読者はブログを読んでくれないから😭

読者は装飾部分しか読まない

テキストだけが永遠と続く『Yahoo!ニュース』みたいなブログは、まず読まれません。

だから、「読者は〝画像と装飾〟部分しか読んでない」前提でデザインするべきなんです。

メリット②装飾のバリエーションが増える

吹き出しの代わりになる装飾って「ボックス」くらいなんですよね。

ボクはシンプルなボックスを１つだけ用意しているので、それ以外で「吹き出し」を使うようにしています。

メリット③会話風を演出できる

ブログの冒頭ってこんな感じで始まりますよね👇

ブログは読者の悩みを解決するためのもの。

冒頭で読者の悩みを明確化するのに「吹き出し」が一役買ってるわけですね。

また、吹き出しを「左右」に２つ用意することで、「会話・インタビュー」を演出できます。

すみません。突然、ワンピースの正体に迫ってしまいました。

メリット④見出しの間をシームレスにできる

とくに章が変わる「H2見出しの前」は読者が離脱しがちです。

本記事のつぎの見出しは「吹き出しを使うときの注意点」ですが、読者によってはメリットだけ読んで閉じてしまうかも。

そこで、見出しの直前に「吹き出し」を用意するのです👇

ブログで吹き出し・アイコンを使う６つの注意点

ブログで吹き出し・アイコンを使うときの「注意点」は次のとおり。

この章のもくじ

この章のもくじ「アイコン編」

こちらも順番に見ていきましょう！

関連記事【実例あり】ブログのプロフィール画像・アイコンの作り方９選

注意点①吹き出しを多用しない

吹き出しをふくむ「装飾」は、本当に目立たせたいところにだけ使ってください。

大事なところに蛍光ペンを引いてたら、教科書が蛍光イエローだらけになっちゃった！

みたいなことです。

また、「会話形式」以外では、吹き出しが続かないようにしましょう。うざいですよね。

注意点②吹き出し内の一文を長くしない

読みにくいですよね。。。

吹き出し内のテキストは

これが「鉄則」です。

注意点③吹き出しはシンプルにする

吹き出しといえば、『LINE』ですよね。

ボクもブログ開設当初は「あのグリーンの吹き出し」を再現して使っていたのですが・・・

ダサいのでやめました。

シンプル・イズ・ベスト

画像や装飾は、使えば使うほどサイトを重くします。

吹き出しなんて、これから全記事で使いますからね。

関連記事【Webデザイナーが解説】見やすいブログのデザイン・書き方14選

注意点①アイコンは複数用意する

吹き出しのアイコンは「あなた」以外にも何数か用意しましょう。

よくあるのがこんなケース👇

先輩が初心者に教えるテイで進んでいくアレですね。

最低でも、「読者とあなた」の２枚あるといいでしょう。

注意点②アイコンの世界観を統一する

アイコンを複数用意するときは、その世界観を統一しましょう。

同じサイトからダウンロード・同じアーティストに依頼すれば間違いないですね。

注意点③アイコンは著作権フリー画像を使う

そもそもアイコンは「著作権フリー画像」を使ってください。

ダメ、ゼッタイ

おすすめの「著作権フリー画像サイト」が、次のとおり。

フリー画像サイト３選

とはいえ、フリー画像はほかのブログと被るんですよね。。。

補足オリジナルアイコンが最強！

ブログの吹き出し以外にも、ありとあらゆるアイコンに使い回せるので、思いきって発注しちゃいましょう！

『ココナラ』に依頼するのが、一般的です。

あなたのオリジナルアイコンで、「喜怒哀楽の４枚」描いてもらえるのは嬉しいですよね！

\ 300円割引クーポンがもらえる /

無料で会員登録

ブログの吹き出しの作り方３選【ワードプレス編】

ブログの「吹き出しの作り方３選」は、次のとおり。

この章のもくじ

おすすめは、プラグインにもテーマにも依存しない「自作する方法」です。

作り方①WordPressのプラグインを使う

表は横にスクロールできます

吹き出しのプラグインは色々ありますが、この２つは次の条件を満たしているので、おすすめです。

プラグインの条件

とはいえ、個人的には『Word Balloon』一択ですね。

吹き出しの種類も豊富で、アニメーションにも対応しています。『デモサイト』もあるので、どうぞ。

とはいえ、「吹き出し」だけのためにプラグインを入れるのは、おすすめできません。

プラグインを入れるデメリット

プラグインはなるべく減らすべき。

作り方②WordPressのテーマを使う

表は横にスクロールできます

WordPressテーマなら、「専用のショートコード」で吹き出しが実装できます。

ボクが使っている『AFFINGER』にも標準装備されています。

とはいえ、ショートコードはテーマを変更したくなったときに困るんですよね。

そして、そのすべてを記事にしています👇

HTML/CSS自作シリーズ

さらに、これら全てをコピペで実装できる『AFFINGERカスタマイズの教科書』を、購入特典の一つに用意しました。

テーマ選びに迷ってる方はぜひ👇

関連記事【14大特典】AFFINGER6本音レビュー！３年使ったメリット

【14大特典】AFFINGER6本音レビュー！３年使ったメリット

作り方③HTML/CSSをコピペして自作する

自作といっても、これだけです。

とはいえ、ボクとまったく同じ「吹き出し」ではなく、カスタマイズしたい方もいるはず。

【コピペOK】ブログの吹き出しを自作する方法【HTML/CSS】

ブログの吹き出しを「自作する方法」は、次のとおり。

この章のもくじ

はじめに、吹き出しの「ポイント」を👇

吹き出しのポイント

基本的に、カスタマイズすれば「カラー・サイズ」も自由に変えられますよ。

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ブロック｜WordPress.com

STEP3カスタマイズする

アイコンを「四角」にしたり、名前を非表示にしたり、縁取り・背景・テキストの色を変えたり。

ここでは、１つだけご紹介しますね。

カスタマイズ「画像を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無料と有料で３つ用意しました。

ブログの吹き出しアイコンの作り方３選

もちろん、「あなたが撮影したオリジナル画像」でもOK。

フリー画像サイト３選

無料なら『Canva』で編集するのが一般的ですね。

\ 300円割引クーポンがもらえる /

無料で会員登録

とはいえ、「プロフィール画像・アイコンの作り方」は別記事で深掘りしたので、どうぞ👇

関連記事【実例あり】ブログのプロフィール画像・アイコンの作り方９選

【まとめ】ブログの吹き出しはコピペで実装できる

ブログの「吹き出し」について解説しました。

まとめ

「プラグイン → テーマ → 自作」の順番で、おすすめです。

あなたのブログに合ったやり方で「吹き出し」を実装してくださいね。

アイコンはオリジナルが最強ですよ👇

\ 300円割引クーポンがもらえる /

無料で会員登録

ブログを始めたい方へ

人気記事【初心者でも10分】WordPressブログの始め方を画像で解説

人気記事【14大特典】AFFINGER6本音レビュー！３年使ったメリット

人気記事【必須ツール】Rank Trackerの料金・使い方・無料版との違い

人気記事【５万稼ぐ】A8.netのセルフバックのやり方とおすすめASP・案件６選