【CSS】レスポンシブ対応のチャット風吹き出しのサンプルコード

2016年4月12日css, WEB制作, wordpress

対話式の吹き出しの記事とか時々見かけるんですが、あれ面白いですよね。
Q&A式のものにも使われたりしているデザインで、こういったものは視認性がいいですね。

CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2さんが公開されているコードを参考に、ある程度レスポンシブに対応したものに変更してみました。

スポンサーリンク

サンプル

Resultタブで表示を確認してみてください。

再生ボタンを押すと、ゆっくりとゆかりんが喋ってくれるよ!

質問者の写真

スマホとかだったら音声は再生されないかもしれないです。

コードは以下の通り
HTMLタグは殆どAIUEO Lab2さんのものと変わりありません。
変更点で言えば、文章の部分をpタグで囲んだくらいです。

CSS部分は吹き出しの枠線の色を変えたり、可変に変更したりとしています。
あえてキャラクターと吹き出しの距離を空けて、ホワイトスペースを作っています。

wordpressで使うならショートコードを登録しとくと便利かも

こういった対話式のものを使って記事を書くのであれば、コードの記述をするのが面倒だと思います。
そんな時はショートコードにしてしまって、記述を楽にしてしまいましょう。

functions.phpに以下を記述します。
$images_typeの部分はご自身で使う画像URLに置き換えてください。

関数名がchatFuncの部分が、ショートコードの登録部分になっています。
複数の画像を使うことを想定しています。

また、書く際の労力をなるべく減らしたいので、ショートコードに渡す引数で条件分岐できるようにしています。
このコードの例では、引数を未指定で書くと、ゆっくりの画像1が左側に表示、吹き出しは右表示されます。
こうして複数使う予定がある人は、case文を増やすといいと思います。

複数の画像も楽に記述
複数の画像も楽に記述

次に関数add_my_quicktagの部分は、管理画面のテキストエディタのツールバーに、簡単にコードを挿入できるボタンを追加します。
こちらも画像を大量に使う場合は、追加で増やしていったらいいと思います。

ボタンの追加
ボタンの追加

今回使わせて頂いた画像は、ニコニコモンズより使用させていただきました。

ゆっくり顔芸セット_Reimu01 – ニコニ・コモンズ
結月ゆかり でふぉるめ – ニコニ・コモンズ

いずれも利用許可範囲が、インターネット全般なので、ブログや動画での利用ができます。
こちらのサイトでは、ニコニ・コモンズ対応サイトでのみ利用許可している素材が多いので、ご利用の際は必ず利用可能範囲をご覧ください。

この記事が気に入ったら
『いいね』しよう!


PAGE TOP