2018/07/10

先人のCSSをパクってブログでLINE風会話を出せるようにした

パクりって人聞き悪いな

でもパクりなんだよなあ

こんな感じです.

Sponsored Link

話のはじまり

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

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

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

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

小改造ビフォーアフター

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

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

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

それがこちら.

.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クラスは統合できそうな気がするが,とりあえずこのままで表示されるのでノータッチで.

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

いい加減CSSはちゃんと勉強したい.

0 件のコメント:

コメントを投稿