【WordPress】SWELLでCSSだけで吹き出しを使う方法

ども、FOZXです。今回はWordPressで記事を作成する時に欠かせない吹き出し機能をテーマに依存しないやり方をご紹介します。

ブログとかによくある漫画みたいにキャラが喋ってるみたいな機能で初心者さんにとっても楽しい機能ですよね

すべてのテーマで吹き出し機能はそのテーマに依存しててテーマを変えたくなった時に様々な箇所にテーマ依存吹き出しを使っているとリライト作業がかなり膨大になって大変になります

この吹き出しはCSSで作ったものです

こんな具合で誰でもテーマに依存しない、テーマ変更時にリライトしないでいい吹き出しが作れます

ワードプレスでCSSで吹き出しを作る理由

多くの人がテーマ依存にある吹き出しを使ってるかもしれませんが将来的に記事数100や200作っていくならCSSでやることがおすすめです

こちらはWordPressでのブログになります、吹き出し機能を使ったブログを作りたい方はぜひ作りましょう！10分足らずで吹き出し満載のブログが作れます！

あわせて読みたい

WordPressブログを10分で始める方法【2026年版】 YouTubeやTikTokにnoteで思うように稼げませんでした..ほかにネットで稼げるおすすめなモノってないの？ 実はYouTubeやTikTokよりもブログのほうが稼ぎやすいって知って…

メリット

CSSで吹き出しを作ることで得られる最大のメリットが将来別のテーマに移行した時もリライトする必要がありません

CSSって聞くと難しく感じるかもしれませんがコピーした文字をペーストして入力するだけなので初心者でも実行可能です

テーマ依存吹き出しなら用意されたテンプレみたいなのを使うだけで出来ますがCSSも似たような感じで瞬時に呼び出して使えます

デメリット

CSSで吹き出しを使う場合は手間がかかることが最大のデメリットです、テーマ依存の吹き出しを使えばCSSの知識がなくても簡単にできますよね

しかしそうやってテーマ依存したブロックを使うとテーマを気軽に変更できないようになるというリスクマネジメントが発生します

向いてない人

テーマ依存でも構わないし、テーマの変更もする予定がない場合はCSSでに吹き出しは不要になります

俺はそのテーマを一生使って行くんだって人ならCSSではないテーマ依存吹き出しでも問題ありません

CSSのみで吹き出しを作る方法

カスタマイズ→追加CSSで貼る

/* 吹き出し全体 */
.my-balloon {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 25px 0;
}

/* プロフィール画像 */
.my-balloon img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 吹き出し */
.my-balloon-text {
  position: relative;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 15px 18px;
}

/* 吹き出しの三角（外枠） */
.my-balloon-text::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 22px;
  border-width: 8px 10px 8px 0;
  border-style: solid;
  border-color: transparent #ccc transparent transparent;
}

/* 吹き出しの三角（内側） */
.my-balloon-text::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 23px;
  border-width: 7px 9px 7px 0;
  border-style: solid;
  border-color: transparent #f5f5f5 transparent transparent;
}

こちらのコードをカスタマイズ→追加CSSにコピー＋ペーストして貼り付けてください

記事→カスタムHTMLを入力

次に吹き出しを表示したい場所に「カスタムHTML」ブロックを追加し以下のHTMLコードを貼り付けます。

<div class="my-balloon">
  <img src="画像URL" alt="プロフィール画像">
  <div class="my-balloon-text">
    ここに吹き出しの文章
  </div>
</div>

画像URL を使用したい画像のURLに変更し、「ここに吹き出しの文章」を表示したい文章に書き換えてください。

パターンにCSS吹き出しを登録する

パターンに追加

作成した吹き出しはWordPressの「パターン」に登録しておくと毎回HTMLコードを入力する必要がなくなります。

パターンは記事内から簡単に呼び出せるため､吹き出しを何度も使用する場合に便利です。

同期なしでパターンを登録しておきましょう。

パターンで設定する

パターンでカスタムHTMLブロックを出してください

①の部分の文字を消して画像URLを貼り付けます、この画像URLの内容が吹き出しのプロフ画像になります

メディアからアップロードをするか、アップロード済みの画像を選択すると画像のURLはコピーできます

ここに吹き出しの文章

②の部分が吹き出しキャラクターに喋らせたい内容です。ここに吹き出しの文章という文言は消しても構いませんがどこに入力すればいいのかわからなくなるのでそのままにしておくのが無難です

テーマ依存の吹き出しと同等の使いやすさ

こちらがSWELLテーマ依存の吹き出しですが、ふきだしから新規吹き出しを登録することで手軽に吹き出しを仕えますが

パターンで一度登録しておけばこのテーマ依存の吹き出しと同じようにCSS吹き出しブロックを出すことが出来るので便利になります

CSS吹き出しなら自分で設定した名前をブロック検索画面で入力することで同等の手間で出現させられます、私の場合は【ｈ】と設定してるのでｈと打つだけでこの吹き出しを出すことができます

まとめ

吹き出しは初心者さんが好む機能の一つだと思うで使用頻度は高いでしょう。しかしテーマ依存吹き出しを使えば使うほどテーマ移行時に必要なリライトが膨大となっていきます。

なのでCSSは一件手間に感じるかもしれませんが逆に利便性が高まります、コードをメモなどに張っておけばコピペするだけですよね。

一度パターンでCSS吹き出しを作っておけばほぼテーマ依存しないCSS吹き出しが気軽に使えますのでマジでおすすめです！