1. TOP
  2. Webデザイン
  3. CSSで簡単!ブログに会話形式の吹き出しを作る方法

CSSで簡単!ブログに会話形式の吹き出しを作る方法

CSSで簡単!ブログに会話形式の吹き出しを作る方法

ブログでよく見かける会話形式の吹き出し。
文中に会話形式の吹き出しが入っていると、とても読みやすいです。

というわけで本日はHTMLとCSSだけで作るで会話形式の吹き出しを作る方法を紹介したいと思います。

会話形式の吹き出しとは?

会話形式の吹き出しとはこんな感じです。

文字ばかりを並べるのではなく、合間に見出しや画像を入れたりするように、会話形式の吹き出しを入れることで読みやすくなります。

会話形式の吹き出しが入っていると読みやすいよね。

そうだね~。読みやすいよね。


これからこのブログでも使っていきたいと思います。

htmlとCSSで作る方法

会話形式の吹き出しをhtmlとCSSで作ってみました。

HTMLとCSSはコピペして使うことができます。

HTMLの記述

CSSの記述

WordPressのプラグインを使う方法

私はできるだけ自作できる場合はプラグインを使わない派ですが、プラグインを使って簡単に導入したい方には、ふきだしプラグインSpeech bubbleがあります。

Speech bubble (ふきだしプラグイン)