CSSでLineなどのチャットアプリ風の吹き出しをレスポンシブに再現(Blogger対応版)

見慣れたチャットアプリ風の吹き出しをブログなどに組み込むためのCSSとHTML(Blogger対応版)を作成しました。
そういえば、吹き出しを使った記事って、Yahoo!ジオシティーズによくありましたよね。

ちなみに、Yahoo!ジオシティーズは2019年3月末にサービスが終了するので、みなさん黒歴史の保護を忘れないように気をつけてください。
私が人生で初めて作ったウェブサイトも、Yahoo!ジオシティーズにあります・・・。

ちなみに、画像で表示しているのは、アイキャッチを表示させるためです。
実際のサイズがわかるように、下に置いておきます。

にすた
役にたったよって人はモナコインを投げてください!モナコインを使うと、開発者やクリエイターに直接支援ができます。モナコインは仮想通貨です。
寄付アドレス

CSS

下線部分は変更することで吹き出しの色が変更できます。
.kaiwa-img-left {width: 14%;display: inline-block;vertical-align: top;margin-bottom: 10px;box-sizing: border-box;text-align: right;padding-top: 14px;}
.kaiwa-img-left img{width: 100%;max-width: 75px!important;border-radius: 50%;}
.kaiwa-name-left{font-size: small;position: relative;width: 62%;display:inline-block;vertical-align:  top;margin-left: 4%;margin-right: 18%;margin-bottom: 10px;box-sizing: border-box;}
.kaiwa-text-left{display:inline-block; background-color: #e0edff;padding: 10px;border-radius: 10px;font-size: medium;}
.kaiwa-text-left:after {content: '';position: absolute;width: 0;height: 0;border-style: solid;border-width: 7px 15px 7px 0;border-color: transparent #e0edff transparent transparent;top:
 30px;left: -15px;}

.kaiwa-img-right {width: 14%;display: inline-block;vertical-align: top;margin-bottom: 10px;box-sizing: border-box;text-align: left;padding-top: 14px;}
.kaiwa-img-right img{width: 100%;max-width: 75px!important;border-radius: 50%;}
.kaiwa-name-right{font-size: small;position: relative;width: 62%;display: inline-block;vertical-align: top;margin-right: 4%;margin-left: 18%;margin-bottom: 10px;box-sizing: border-box;text-align: right}
.kaiwa-text-right{display: inline-block;background-color: #ffeda5;padding: 10px;border-radius: 10px;font-size: medium;}
.kaiwa-text-right:after {content: '';position: absolute;width: 0;height: 0;border-style: solid;border-width: 7px 0 7px 15px;border-color: transparent transparent transparent #ffeda5;top: 30px;right: -15px;}

HTML(左側の吹き出し)

下線部分を変更してください。
<!--左の吹き出し開始地点-->
<div class="kaiwa-img-left">
<img src="【画像URL】" />
</div><div class="kaiwa-name-left">
にすた
<br /><div class="kaiwa-text-left">
このように表示されます。
</div></div>

HTML(右側の吹き出し)

下線部分を変更してください。
<!--右の吹き出し開始地点-->
<div class="kaiwa-name-right">
えるもな
<br /><div class="kaiwa-text-right">
あの、じおしてぃーずってなんですか?
</div></div><div class="kaiwa-img-right">
<img src="【画像URL】" />
</div>
みなさんの環境でうまく動きますように。

思い出

今では、吹き出しは、ブログ投稿者として、何かコメントをするというようなレベルで使われているように思いますが、吹き出しを使っているウェブサイトは、ディベート形式の形を取っているけど、実は片方に偏っていて、情弱には扱うのが難しいインターネットの代表という感じでした。

具体的には、日本帝国軍が世界的に最弱レベルであったことを議論した結果、証明されたことが判明!みたいネトウヨを釣るためのウェブサイトです。
当然、批判側も擁護側もの、中の人は同じ人が両方の立場で書いているので、実態は議論なんてものではなく、とにかく偏っていて日本帝国軍擁護側は、論理的なことは発言せず、意味不明なことを喚き始めて最後にはおしっこを漏らして逃げ出すみたいな内容です。
昨今はフェイクニュースが話題ですが、今も昔も、形は変われど、偏った内容の記事はあり、ネットリテラシーがないとインターネットを使うのは難しいですね。

吹き出しについて

ちなみに、
もともと、CSSをきちんと勉強したことがなかったこともありますが、上記のコードを作るのに12時間くらいかかりました。
コピペで済ませようかなと思っていたのですが、ブラウザサイズを変えるとブラウザの外に出て行ってしまったり、短い文章だと余白が画面いっぱいに出てしまったり、スマホで見ると、下のセンテンスと重なってしまったり、まさかのGoogleのブログサービスであるBloggerのエディタによって<p>や空の<span>などの一部タグが自動的に削除される仕様であったりと、なんとも使いにくかったため、自作を思い至りました。
position:absoluteを使ったり、display: inline-blockを使ったり、久しぶりにCSSに触れました。
最後は、Lmona様に泣きつき、力を借りて完成しました。


Powered by Blogger.