ブログでチャット風の会話を表示するCSS

先日の記事「電話番号間違ってますよ」がどうしても信じてもらえない! 内で、チャットのやりとりを表現したかったので、フキダシ会話っぽく見える CSS を書きました。

WordPress の場合は、[外観]-[カスタマイズ]-[追加CSS]に貼りつけてください。特定のポストでだけ使いたい場合は .post-9067 とかを全部の前につけます。

アイコンの画像はこのCSSの中に URL を書き込んであります。別のアイコンにしたければそこを変えてください。

.akky_conv { padding-top: 1em; } .akky_conv li { display: flex; flex-direction: row; max-width: 95%; } .akky_conv li div { width: 32px; height: 32px; box-shadow: 2px 2px 0px #aaa; flex-shrink: 0; flex-grow: 0; z-index: 1; } .akky_conv li:not(.me) div { background:url('/akky/wp-content/uploads/2017/04/user-alt-1_0.png') center no-repeat; background-color: #fcf; } .akky_conv li.me { justify-content: flex-end; } .akky_conv li.me div { background:url('/akky/wp-content/uploads/2017/04/user-alt-2.png') center no-repeat; background-color: #cff; order: 2; position: relative; bottom: -3em; } .akky_conv li p { background-color: #ddd; margin: 1em; padding: 1em; position: relative; text-align: center; } .akky_conv li.me p{ order: 1; } /* 吹き出し */ .akky_conv li p:before { content: ""; display: block; width: 0; height: 0; position: absolute; } .akky_conv li:not(.me) p:before { border-right: 12px solid #ddd; border-bottom: 12px solid transparent; top: 0px; left: -12px; } .akky_conv li.me p:before { border-left: 12px solid #ddd; border-top: 12px solid transparent; bottom: 0px; right: -12px; }

会話の方はこんなかんじ。右の発言の人には、li 要素に me クラスをつけます。

<ul class="akky_conv"> <li> <div></div> <p>左の人の発言</p> </li> <li class="me"> <div></div> <p>右の人の発言と思いねえ</p> </li> </ul>

その結果

• 左の人の発言

• 右の人の発言と思いねえ