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

css, WEB制作, wordpress

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

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

スポンサーリンク

サンプル

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

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

質問者の写真

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

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

<div class="question_Box">
    <div class="question_image">
        <img src="http://11neko.com/wp-content/uploads/2015/01/yukuri_01.png" alt="質問者の写真" />
    </div>
    <div class="arrow_question">
        <p>チャットのような感じで表示したら会話の流れが分かりやすくない?</p>
    </div>
</div>

<div class="question_Box">
    <div class="answer_image">
        <img src="http://11neko.com/wp-content/uploads/2015/01/yukarin_01-245x300.png" alt="解答者の写真" />
    </div>
    <div class="arrow_answer">
        <p>そうですね、誰が発言してるかわかりやすいですね。</p>
    </div>
</div>

<div class="question_Box">
    <div class="answer_image">
        <img src="http://11neko.com/wp-content/uploads/2015/01/yukarin_01-245x300.png" alt="解答者の写真" />
    </div>
    <div class="arrow_answer">
        <p>あんまり長すぎる文章を書くのには向いていません。大体ひと段落分の文章量が最適だと、私は思います。</p>
    </div>
</div>

<div class="question_Box">
    <div class="question_image">
        <img src="http://11neko.com/wp-content/uploads/2015/01/yukuri_01.png" alt="質問者の写真" />
    </div>
    <div class="arrow_question">
        <p>一応レスポンシブに対応してるんだよ!サイズを変えてみて確認してみてね。</p>
    </div>
</div>

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

.arrow_answer,
.arrow_question {
    position: relative;
    background: #fff;
    border: 3px solid rgba(240,120,255,1);
    padding: 2% 2%;
    border-radius: 10px;
    width: 70%;
}
.arrow_question {
    float: right;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100%; }
.arrow_answer:after,
.arrow_answer:before { left: 100%; }
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -15px;
}
.arrow_answer:after { border-left-color: #fff ; }
.arrow_question:after { border-right-color: #fff ; }
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 16px;
    margin-top: -16px;
}
.arrow_answer:before { border-left-color: rgba(240,120,255,1);border-left-width: 20px; }
.arrow_question:before { border-right-color: rgba(240,120,255,1); border-right-width: 20px; }
.question_image {
    float: left;
    width:20%;
}
.answer_image {
    float: right;
    width:20%;
}
.answer_image img,.question_image img {
    width: 100%;
}
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}

.question_Box p{ line-height: 1.5;}

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

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

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

function chatFunc( $atts, $content = null ) {
    extract(shortcode_atts(array(
        'type' => 'yukuri',
        'face' => '1'
    ), $atts));

    if($type == 'yukuri'){
    	switch ($face){
    		case 1:
    		$images_type = 'http://11neko.com/wp-content/uploads/2015/01/yukuri_01.png';
    		break;
    		case 2:
    		$images_type = 'http://11neko.com/wp-content/uploads/2015/01/yukuri_08.png';
    		break;
    	}
    	return '<div class="question_Box"><div class="question_image"><img src="' . $images_type . '" alt="質問者の写真" /></div><div class="arrow_question"><p>' . $content . '</p></div></div>';
    } else{
    	switch ($face){
    		case 1:
    		$images_type = 'http://11neko.com/wp-content/uploads/2015/01/yukarin_01-245x300.png';
    		break;
    		case 2:
    		$images_type = 'http://11neko.com/wp-content/uploads/2015/01/yukarin_02.png';
    		break;
    	}
    	return '<div class="question_Box"><div class="answer_image"><img src="' . $images_type . '" alt="解答者の写真" /></div><div class="arrow_answer"><p>' . $content . '</p></div></div>';
    }
}
add_shortcode('chat', 'chatFunc');


function add_my_quicktag() { ?>
<script type="text/javascript">
QTags.addButton('ed_yukuri', 'ゆっくり1', '
質問者の写真

', '

'); QTags.addButton('ed_yukuri2', 'ゆっくり2', '
質問者の写真

', '

'); QTags.addButton('ed_yukarin', 'ゆかりん1', '
解答者の写真

', '

'); QTags.addButton('ed_yukarin2', 'ゆかりん2', '
解答者の写真

', '

'); </script> <?php } add_action('admin_print_footer_scripts', 'add_my_quicktag');

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

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

複数の画像も楽に記述

複数の画像も楽に記述

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

ボタンの追加

ボタンの追加

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

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

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

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