チャット形式の吹き出しデザインをCSSのみで導入してみました!

Tweet about this on TwitterShare on Facebook1Share on Google+0Pin on Pinterest0Share on Tumblr0

Yuji Kudo

「チャットフィクション(Chat Fiction)」と呼ばれるアプリが海外で流行っているそうで、日本にも少しずつ上陸し始めているようですが、ある種、古くて新しい「表現方法」及び「思考方法」として、個人的にはとても注目しています。

その影響で、当サイト内にも、チャット形式の吹き出しデザインを導入してみました。

プラグインを使っているの?

Yuji Kudo

はじめはプラグインで実装しようと思い、ピッタリのWordPressプラグイン「Speech Bubble」を見つけたのですが、調べたところ、開発を止めてしまったのか、ここ最近は更新されていないようなので見送りました。

これ以外には目的に適ったプラグインがなく、何となく「吹き出し チャット CSS レスポンシブ」などのキーワードで検索してみると、いろいろな事例やサンプルコードが出てきたため、それらを参考に「CSSのみ」で実装することにしました。

導入は簡単なの?

Yuji Kudo

コピペでの参照・活用をよしとしているブログなどから、CSSのサンプルコードをコピペすれば、そのままの再現は簡単ですが、もう少しこんな感じ、という理想の形がある場合、こまごまとカスタマイズしていかないと思い通りにはなりませんでした。

いくつかのサンプルコードを当てはめてみましたが、それぞれ癖があり、最終的にはいろいろと修正を加えてこの形に落ち着きました。

ひとりで会話(チャット)している感じは恥ずかしくないの?

Yuji Kudo

ちょっとは思いましたが、「ひとり会議(チャット形式でアイデア整理やシナリオ書きに)」というアプリなどもあるように、思考方法としても面白く、表現手法としてもいろいろ可能性を感じるため、気恥ずかしさを乗り越えて、上手く活用していきたいと考えております!