吹き出しを使って会話形式になるようにしてみた

こんにちは、えこみみです

このブログも会話形式にしてみたよ

・・・いまさら感があるね・・

・・・

というわけで、会話形式になるようにしてみました。

どうやってやるの？

ググればすぐ見つかるよ

ネットで検索すればすぐにでてきます。 私が参考にさせていただいたのは以下のサイトです。 （ありがとうございます！）

www.notitle-weblog.com

まずはじめに考えること

意外に悩むのが誰に喋らせるのかという問題。 誰でもいいんだけど、あまり癖のあるキャラとかだと扱いにくいし・・・。

悩むよね

ということで、困ったときはいらすとや。 さらに、いらすとやの中でも、あまり癖の少ないキャラを選びました。

それで僕が選ばれたんだね

うん、（適当に）選んだよ

www.irasutoya.com

どうやって設定するのか

参考サイトを見てね。以上

・・では寂しいので、簡単に説明すると、

1. コピペするCSSの一番下（下記）の「クラス名」と「画像のURL」を自分のものに書き換える。 一番下は↓こんな感じになっていると思います。

.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

クラス名ってなに？

詳しいことはあまり気にしなくていいよ

とりあえず「画像のURL」で設定した画像を識別する文字列（アルファベットとか数値）という理解でいいと思います。 私は、こんな感じにしました。

.myImg::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/e/ecommimi/20190323/20190323184920.jpg);}
.bearImg::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/e/ecommimi/20190323/20190323184714.png);}

「myImg」「bearImg」がクラス名になります。

myImgで

を出して

bearImgで

を出すように設定しています。

使い方

こんな感じで使います。

左側に表示したいとき：<p class="l-fuki クラス名">テキスト</p>
右側に表示したいとき：<p class="r-fuki クラス名">テキスト</p>

かなり説明省いたけどわかったかな？

なんとなくわかった

ということで、おしまい。