ものぐさブルーライト: 先人のCSSをパクってブログでLINE風会話を出せるようにした

パクりって人聞き悪いな

でもパクりなんだよなあ

こんな感じです．

話のはじまり

話のはじまりはというと，SEL35F28Z購入事件の記事を書いたとき，自分の意思決定の正当性を証明するために同じくカメラが趣味の同期とのLINEでの会話（5万は安いよな→安い）を紹介しようと思ったこと．

気がついたら「Sonnar T* FE 35mm F2.8 ZA」(SEL35F28Z)を買っていた件

んんん？？？？おかしいぞ！！？！？！？いつの間に！？！？！？というかなんで！？！？！！？ Sponsored Link これから言い訳をしよういやね，違うんですよ．ほんと．欲しいとは思ってたけど買うつもりはなかったの．ほんとだよ？...

https://blog.retore.xyz/2018/04/entry-265.html

結局は手の込んだことをするより一刻も早く購入報告をアップしたかったのでLINE風会話の表現は見送ったのだが，ふと気になって「HTMLとCSSだけでLINE風会話を実現できないか」と思ったら案の定先人が実現していた．

LINE風の吹き出し会話が簡単にできるCSSを作ってみた（はてなブログ） - 夜中に前へ

こんばんは、夜中たわしです。今回は主にはてなブロガー向けの記事です。前回の記事のためにLINE風の表現ができるCSSを作ったんですが、それのやり方が知りたいという熱い声（1件）があったので、公開することにしました。他のサービスでも使用可能ですが、はてなブログ向けの導入方法として紹介します。紹介するCSSでできることできないこと制作背景・前置き注意事項 CSSにコードを追加（その1） CSSにコードを追加（その2）会話形式CSSを導入している場合使用方法おわりに紹介するCSSでできることこれから紹介するCSSでできる表現はこんな感じですなるほどしいたけしいたけその…

http://www.tawashix.com/entry/lineKaiwa

小改造ビフォーアフター

↑に紹介した夜中たわし氏の公開したコードは主にはてなブログ向け．かつスタンプ機能やアイコンまで再現する本格派．しゅごい．

ただ私はというと，まずはてなブログじゃないし，スタンプ機能を使うつもりもなくただただ会話っぽいものを再現できれば良い．アイコンもいらない．というか画像を用意するのがめんどくさい（ものぐさ）．

というわけで，（はてなブログ向けというわけではなく）一般論的に，かつ会話部分だけをてきとーに再現するようにたわし氏のコードをパクって小改造．

それがこちら．

.line-me,
.line-opponent {
    clear:both;
    position: relative;
    display: inline-block;
    max-width: 80%;
    max-width: -webkit-calc(100% - 60px);
    max-width: calc(100% - 60px);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 5px 10px;
    border-radius: 15px;
    background-size: cover;
    z-index: 1;
}
.line-me {
    background-color: #85ff49;
    float: right;
    margin: 5px 15px 5px 60px;
}
.line-opponent {
    background-color: White;
    float: left;
    margin: 5px 5px 5px 20px;
}
.line-opponent::before {
    position: absolute;
    white-space: nowrap;
    top: -22px;
    display: block;
    color: white;
    left: 0px;
}
.line-opponent::after {
    position: absolute;
    content: "";
    width: 45px;
    height: 45px;
    top: -17px;
    border-radius: 40px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    left: -55px;
}
.me-toge::before,
.opponent-toge::before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 2px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid transparent;
}
.me-toge::before {
    border-left: 10px solid #85ff49;
    right: -14px;
}
.opponent-toge::before {
    border-right: 10px solid White;
    left: -14px;
}

これをCSSに書き込んだ上で，以下のようなHTMLを書く．

<table style="width:100%; max-width:400px; margin:0 auto;">
<tr>
<td style="background:#add8e6">
<p class="line-me me-toge">パクりって人聞き悪いな</p>
<p class="line-opponent opponent-toge">でもパクりなんだよなあ</p>
<div style="clear:both;"></div>
</td>
</tr>
</table>

という感じ．

基本的にはたわし氏のコードをパクってきた上で，スタンプやアイコンを消すためにあちこち消してみたり，少し余白をいじって配置を調整したりしただけ．アイコンとか使わないならtogeクラスは統合できそうな気がするが，とりあえずこのままで表示されるのでノータッチで．

本格的に再現したいなら本家のたわし氏のコードを使ったほうが良いと思うが，もしアイコン画像とか使わずに簡易的に再現したいならこんな感じで如何でしょうか．