Blog CSS Program

【コピペOK】CSSで会話形式の吹き出しを作る方法

投稿日:

CSSで吹き出しを作る

他の人のブログをいろいろ見ていると、吹き出しを使って会話形式で進めていくスタイルに出会うことがあります。

文字だけの文章に比べて、とても読みやすく、自分も使ってみたい!と思ったことはないでしょうか?

私はとても真似したくなったので、CSSで吹き出しを作ってみました。

ソースを公開しているので、ちょっと試してみたいなーと思っている方はぜひ試してみてください。

ではさっそくソースを見てみよう!
とっても簡単だから試してみてね!

こんな感じの吹き出しが作れます。

プラグインは利用しません。

CSSで吹き出しのデザインを作る

こちらのソースをコピーしてstyle.cssに貼り付けてください。

左側(balloonL)と、右側(balloonR)の2通りを用意しているのでけっこうなボリュームになりました。

flexboxを使って、アイコン画像と吹き出し部分を並べています。

左側の吹き出しを紫、右側の吹き出しを緑にしていますが、色はお好みで変更してください。

記事に吹き出しを入れる

CSSの準備ができたら、記事内に吹き出しを作っていきます。

こちらのソースが、左側の吹き出しです。

imgタグ内にはアイコン画像のURL、
divタグballoon-text-inner内に吹き出しの中に入れたいテキストを記述しよう!

balloonLの部分を、balloonRにするだけで、右側の吹き出しになります。

左右の吹き出しを、AddQuicktagで登録しておくと、1クリックで吹き出しが設置できるのでとても便利です。

AddQuicktagはよく使うタグを記録して、1クリックで呼び出しできる便利なプラグインです。
記事作成の効率が爆上がりするので導入をおすすめします!

まとめ:吹き出しで記事に彩りを!

吹き出しが入ることで、記事がぱっと明るくなります。

また、くだけた表現も入れやすくなるため、読みやすくなります。

うまく取り入れることで、記事のレベルがワンランクアップするね!

書いてる方もちょっと楽しくなるのが吹き出しの隠れたいいところだと私は思います。

皆さんもぜひ使ってみてください。

ではまた!

-Blog, CSS, Program
-, ,

執筆者:

関連記事

もしもアフィリエイトのかんたんリンクをカスタマイズ!ボタン色やテキスト変更など

もしもアフィリエイトのかんたんリンク、とても便利ですよね。 商品検索して、選んで、スクリプトを記事に貼りつけるだけで、カエレバのようなボタン付きリンクが作成できます。 ですが、ボタンが全部同じ色だった …

簡単!ブログ記事にプログラムをプラグイン無しで埋め込む方法

プログラミングの記事を書きたいな。 記事にソースコードを埋め込みたいんだけど、どうしたらいいんだろう? できればプラグイン無しでできるといいんだけど。 WordPressのプラグインという選択肢もあり …

GitHub GistでPHPがハイライトされない

Gistでプログラムの埋め込みを覚えたので、いろいろなプログラムをGistに登録しました。 その中で、phpのプログラムなのに、シンタックスハイライトされないものが発生。 真っ黒で読みづらい。 その前 …

floatが効かない…CSSではまったので対処法などまとめ

あれー、float:left;って指定しているのに全然効かないよ…?と、少しはまってしまった。いろいろ試したけどなかなか正解に辿り着けなかったので、対処を載せておきます。 floatに限らず、 CSS …

Googleアドセンス審査に4記事、初投稿から1週間で一発合格した方法

ブログ収益化の第一歩、Googleアドセンス。広告掲載できるようになるには、審査を突破する必要があり、これが厳しいと巷では言われています。 Googleアドセンスの審査に通るために、どこまで何を準備す …

プロフィール

運営者:シオリ

法学部卒→システムエンジニア(SE)としてSI企業に9年勤めてます。結婚後、共働きで仕事と家事に追われる毎日に疑問を持ち、ひとり働き方改革中。
プログラミングとイラストとおいしいご飯とゲームが好きな超インドア派です。
アイキャッチなどのイラストはスマホの無料アプリ使って自分で描いています。

当ブログは、私が勉強したことや日々の暮らしの中で考えたことなどを発信する雑記ブログです。同じ壁にぶつかっている方のお役にちょっとでも立てればうれしいです。
お仕事依頼・ご相談はお問い合わせまたはツイッターDMからどうぞ!