本ページはプロモーションが含まれています

【CSS】コピペで簡単！ブログの「吹き出し」を擬似要素で作る方法

公開日

こんにちは。岐阜の拠点から、今日もWeb制作とブログ運営のリアルな情報をお届けする当ブログです。

前回の「テキストボックス」の作り方に続き、今回はブログ記事の表現力を高める「吹き出し」の実装方法を解説します。

キャラクター同士の会話形式で解説を進めたり、筆者の心の声を表現したりする際に便利な吹き出しデザイン。最近のテーマには標準搭載されていることも多いですが、オリジナルの色や形にカスタマイズしたい場合は、CSSの「擬似要素」という技術を使います。

今回は、少し難しく感じる擬似要素の仕組みをシンプルに噛み砕き、コピペですぐに使えるコードを紹介します。

この記事でわかること

  • 吹き出しを作るためのHTML構造（アイコンとテキスト）
  • CSSの擬似要素（::before）を使った「しっぽ（三角形）」の作り方
  • コピペで使えるシンプルな吹き出しCSSコード

吹き出しの基本構造とHTML

吹き出しは大きく分けて「アイコン（画像）部分」と「テキスト（ふきだし）部分」の2つで構成されます。これらを横並びにするために、全体を囲む箱（Flexbox）を用意します。

1. 記事作成画面（カスタムHTML）に入力するコード

<div class="balloon_wrap">
    <div class="balloon_icon">
        <img src="アイコン画像のURLを入力" alt="キャラクター名">
    </div>
    <div class="balloon_text">
        <p>ここに吹き出しのテキストを入力します。CSSだけでこんな表現も可能です。</p>
    </div>
</div>

【コピペでOK】擬似要素を使った吹き出しのCSS

吹き出しの最大の特徴である「しっぽ（三角形の部分）」は、CSSの ::before という擬似要素を使い、枠線の重なりを利用して作ります。以下のコードを追加CSSに貼り付けてください。

2. 追加CSSに貼り付けるコード

/* 吹き出し全体の枠組み（横並び） */
.balloon_wrap {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2em;
}

/* アイコン画像の設定 */
.balloon_icon {
    width: 160px;
    margin-right: 15px;
    flex-shrink: 0; /* アイコンが潰れるのを防ぐ */
}
.balloon_icon img {
    width: 100%;
    height: auto;
    border-radius: 50%; /* 画像を丸くする */
}

/* 吹き出しテキスト部分の設定 */
.balloon_text {
    position: relative;
    background-color: #f0f4f8; /* 吹き出しの背景色（薄いブルーグレー） */
    padding: 1em 1.5em;
    border-radius: 8px;
}
.balloon_text p:last-child {
    margin-bottom: 0;
}

/* 吹き出しのしっぽ（左側の三角形） */
.balloon_text::before {
    content: "";
    position: absolute;
    top: 20px; /* 上からの位置 */
    left: -10px; /* 外側に押し出す */
    border-top: 10px solid transparent;
    border-right: 15px solid #f0f4f8; /* 吹き出しの背景色と同じ色に合わせる */
    border-bottom: 10px solid transparent;
}

See the Pen Untitled by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

カスタマイズのポイント：しっぽの仕組み

コード内の .balloon_text::before が、しっぽを作っている部分です。透明な枠線（transparent）と、色付きの枠線を組み合わせることで、四角形の一部だけが見える状態になり、結果として「三角形」が生まれます。

この left や border の数値を微調整することで、しっぽの太さや向きを自由に変更できます。まずは今回のコードをそのまま使い、慣れてきたら数値をいじって変化を確認してみてください。

CSSのみで作る吹き出しは、余計な画像を使わないためページの読み込み速度（表示速度）を落とさず、SEOの観点からも非常に優秀です。モバイル回線からのアクセスでもサクサク表示される軽量なサイト作りを目指しましょう。

次回は、アフィリエイトのクリック率を左右する「ボタン」のデザインをCSSで洗練させる方法を解説します。

＼ 「テーマ依存から抜け出して自由にデザインしたい」という方はこちら ／

Web制作・ブログカスタマイズを相談する

※独自の吹き出しデザインや、複雑なCSSレイアウトの構築も承っております。

一覧へ!