【WordPress】 Line 風のチャット表現 【忘備録】

スポンサーリンク
広告

Line 風のチャット表現をCSSで

ちょっとやって見たかっただけですが、

WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法
LINEでの会話のような吹き出し型バルーンをCSSで作成する方法です。会話文章にLINEっぽい雰囲気を出せるかと思います。

お世話になっている寝ログさんのを拝借

今、時間ある?

ちょっと手伝って欲しいんだけど、いいかな?

なに?

近くのコンビニでiTuneカードを何枚か買ってきて欲しいんだけどいいかな?

そんなことより、CSSの話をしようぜ。

こういうことができます。

で・・何故このページがあるか?というと、これで、最後に、

<br class="clear_balloon"/>

を入れるんですが、消えるんですよね。。<br>がきっと、ビジュアルエディタの方で消されるようです。だから、

<div class="clear_balloon"></div>

の方じゃないと、消えちゃいます。

これがないと、クラスのballoonの終わりがなくなっちゃうので、文字が回り込んでしまいました。

というのを忘れないようにってことで、忘備録です。

CSSファイルをイジって、こんな表現ができるんですねw

ありがとうございます。

コメントを残していただけるとありがたいです

Loading Facebook Comments ...
%d人のブロガーが「いいね」をつけました。