広告 書き方

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

2024年1月16日

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

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

この記事を書いた人

ヘボ

ヘボ

ブログの神様になる男

  • 引きこもり専業ブロガー
  • 6年目(2018年12月〜)
  • 執筆記事数500本以上(3サイト運営)
  • 最高「33万PV/月」達成
  • 元Webデザイナー

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

本記事の信頼性

2022年8月のアナリティクスデータ

ヘボ
ヘボ

ブログに吹き出しが使いたいですか?

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

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

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

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

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

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

ブログで吹き出しを使う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はオリジナル画像を評価する

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

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

    相場は「3,000〜10,000円」

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

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

    無料で会員登録

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

    ブログの吹き出しの作り方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年使ったメリット

    「ほかのテーマと比較したい方」は、以下も合わせてどうぞ👇

    関連記事ブログにおすすめのWordPressテーマ5選【無料・有料】

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

    • ①:追加CSSにCSSをコピペする(一回きり)
    • ②:エディタにHTMLをコピペして使う(毎回)

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

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

    ヘボ
    ヘボ

    ちょっと長くなるので、次章へ続きます👇

    ブログの吹き出しの作り方3選」を最初から見る!

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

    【コピペ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」をクリック)。

    外観 › カスタマイズ › 追加CSS

    念のため、バックアップを取ってからにしましょう。

    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】

    ブログの吹き出しに関する「よくある質問(Q&A)」は次のとおり。

    この章のもくじ

    長くなってしまったので、一つだけ。

    Q1:ブログの吹き出しアイコンの作り方は?【無料・有料】

    A無料と有料で3つ用意しました。

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

    • 無料 → フリー画像を『Canva』で編集
    • 有料 → フリー画像を『Photoshop』で編集
    • 有料 → 『ココナラココナラ』で発注

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

    フリー画像サイト3選

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

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

    無料で会員登録

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

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

    ヘボ
    ヘボ

    ここまで読んでくれたあなたへ

    最後に、大切なお知らせです。

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

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

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

    まとめ

    • ブログに吹き出しを使うことはメリットだらけ
    • とはいえ、使いすぎは禁物
    • アイコンはオリジナルが最強!
    • 吹き出し専用のプラグインもある
    • 吹き出しが標準装備されてるWordPressテーマもある
    • とはいえ、自作がおすすめ!

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

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

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

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

    無料で会員登録

    ブログの吹き出しの作り方」を最初から見る!

    ブログを始めたい方へ

    エックスサーバーのお友達紹介プログラム

    当サイト経由で、国内シェアNo.1レンタルサーバー『エックスサーバー』に申し込むと、最大10,000円割引になります。

    しかも、今ちょうどやっている「お得なキャンペーン」との併用もOK!

    \ 初期費用無料! /

    キャンペーンは予告なく変更・終了する可能性あり

    • この記事を書いた人
    ヘボ|ブログの神様になる男

    ヘボ

    働きたくないので毎日休まずブログを書いてます。

    ブロガー6年目|最高33万PV|3サイト運営|ブログが天職で娯楽|初心者に遠回りしないブログ術を発信!

    当ブログではアフィリエイト広告を利用しています。

    -書き方

    テキストのコピーはできません。