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

こんばんは、夜中たわしです。

今回は主にはてなブロガー向けの記事です。

前回の記事のためにLINE風の表現ができるCSSを作ったんですが、それのやり方が知りたいという熱い声（1件）があったので、公開することにしました。

他のサービスでも使用可能ですが、はてなブログ向けの導入方法として紹介します。

紹介するCSSでできること

これから紹介するCSSでできる表現はこんな感じです なるほど しいたけ　しいたけ そのしいたけの人は一体？ わかりません なんか料理が出てきた

このようにLINEのグループ会話、に近い表現ができます。
補足：このしいたけは私が撮影したものです

一応、画像じゃないですよ。テキスト部分など選択可能なのがわかると思います。

誰かと本当にLINEでやり取りしているみたいで、面白い使い方ができそうですよね。

できないこと

なおできないこともあります。

• 左側アイコンの非表示（左寄せ）
• 右側アイコンの表示
• 右側名前の表示

なぜできないか。

それは多機能にするとコードが増えて保守が大変だ……ということと、私のCSS歴が5日だからです。

でもそこまでの機能はいらないのではないでしょうか！？

制作背景・前置き

LINE風の表現をするCSSはネットでいくつか見つかるんですが、

• アイコンを左側にのみ表示させたい
• 複数アイコンを混在させたい
• 楽に記述したい

という私のニーズに答えてくれるものに出会えなかったので、自作しました。

自分が必要とする機能だけ。

主に参考にしたのは下記です。

特にベースにしたのは、シロマティ(id:shiromatakumi)さんの会話形式CSSです。

こういうやつです。はてなブログでよく見かけますよね。

これのいいところは、非常に記述が楽だということです。

なので極力似た感じで使えるようにしたのと、アイコン画像が使いまわせるようにしました。この両立がめちゃめちゃ大変でした。自分、ほぼ素人だし。

まあそういうことでシロマティさんの会話形式CSSを導入していても共存が可能ですし、もちろん本記事のCSSだけでも動作可能です。

※ベースがシロマティさんのものなので、説明内容に流用っぽい表現が多発しますがご勘弁ください。

注意事項

• 導入後は必ずPCとスマホで表示されるか確認してください。紹介するCSSはレスポンシブに対応していますが、PCとスマホで表示形式を分けている場合、両方のCSSの更新が必要です。
• カスタマイズは自己責任で行ってください。トラブルの責任は負いかねます。
• 作業前のCSSを必ずバックアップしておいてください。

CSSにコードを追加（その1）

まずは下記のコードをデザイン→カスタマイズ→デザインCSSにコピペしてください。

/* LINE風のCSS　*/
.entry-content .my-line,
.entry-content .other-line {
    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;
}
.entry-content .my-line {
    background-color: #85ff49;
    float: right;
    margin: 5px 5px 5px 60px;
}
.entry-content .other-line {
    background-color: White;
    float: left;
    margin: 25px 15px 5px 50px;
}
.entry-content .my-line.stamp {
    background-color: transparent;
}
.entry-content .other-line.stamp {
    background-color: transparent;
}
.entry-content .my-line.stamp img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.entry-content .other-line.stamp img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.entry-content .other-line::before {
    position: absolute;
    white-space: nowrap;
    top: -22px;
    display: block;
    color: white;
    left: 0px;
}
.entry-content .other-line::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;
}
.my-toge::before,
.other-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;
}
.my-toge::before {
    border-left: 10px solid #85ff49;
    right: -14px;
}
.other-toge::before {
    border-right: 10px solid White;
    left: -14px;
}

CSSにコードを追加（その2）

続いてもCSSへの追加なんですが、こちらはユーザー自身で書き換える必要がある部分です。
（注：会話形式CSSを導入済みの場合、一部流用が可能です。後述）

下記のコードをカスタマイズした上で、デザイン→カスタマイズ→デザインCSSにコピペしてください。テキストエディタなどで編集後のペーストを推奨します。

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

書き換えが必要なのは「クラス名」「名前」「画像のURL」の部分です。

「クラス名」は「before」と「after」をペアにしてユニークな名前を付けてください。

使用できる文字は、半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）です。アルファベットで始めなければなりません。（数字や記号で始めてはならない）

はてなフォトライフの画像を使う場合は、使いたい画像のページ（↓↓このページ）に行って、「右クリック」→「画像アドレスをコピー」して上記コードの「画像のURL」の部分にペーストしてください。

【例】

.tawashi::before {content:"たわし";}
.tawashi::after {background-image:url(http://cdn-ak.f.st-hatena.com/images/fotolife/t/tawashix/20160910/20160910223959.png);}
.siitake::before {content:"しいたけ";}
.siitake::after {background-image:url(http://cdn-ak.f.st-hatena.com/images/fotolife/t/tawashix/20170422/20170422223241.gif);}

ほら、ここまでは簡単でしょう？ 簡単かなあ……？ また料理ã

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

このコードはクラス名が重複しなければ、いくら増やしてもOKです。

会話形式CSSを導入している場合

シロマティさんの会話形式CSSを導入している場合、既にアイコン画像表示のためにこんな感じの部分は既にあると思います。

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

このクラスはLINE風表示に流用可能です。

下記のように同一クラス名のbeforeのみを追加して、名前を入力してください。LINE風表示に利用しない画像に対しては、追加不要です。

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

なおこれで過去に吹き出し表示している記事に対して悪影響はありません。

ですが念のため確認をお願いします。違和感を感じたらCSSを速やかに元に戻してください。

使用方法

シロマティさんは見たままモードでの編集用にChrome拡張機能を用意されていますが、私はそんな高度なものは作れません。

なので申し訳ありませんが見たままモード派の方は、HTML編集に切り替えて下記手順を行ってください。

はてな記法・MarkdownモードではそのままHTMLを記載すればOKです。

まず実例を示します。

しいたけ食べたくない？ いらないです

上記の表示をするには、以降のように記述します。

<table style="width:100%; max-width:400px; margin:0 auto;"><td style="background:#88a4d4">

<p class="other-line クラス名"><span class="other-toge">テキスト<span/></p>
<p class="my-line"><span class="my-toge">テキスト<span/></p>
<p class="other-line stamp クラス名"><img src="画像のURL"></p>
<p class="my-line stamp"><img src="画像のURL"></p>

<div style="clear:both;"></div>
</td></table>

これをコピペして編集すれば、大体わかるかと。

一応1つずつ解説を。

「table」内がLINE風表示用の領域です。

<table style="width:100% ; max-width:400px; margin:0 auto;"><td style="background:#88a4d4">

…

</td></table>

左の人の場合の記述です。クラス名に紐付いた名前・画像が表示されます。

<p class="other-line クラス名"><span class="other-toge">テキスト<span/></p>

右の人の場合の記述です。クラス名は必要ありません。なぜなら画像を出す機能がないから。

<p class="my-line"><span class="my-toge">テキスト<span/></p>

続いて左にスタンプを出す場合。スタンプの画像は透過処理をするか、背景色と合わせておいた方が見栄えがいいでしょう。

<p class="other-line stamp クラス名"><img src="画像のURL"></p>

右にスタンプを出す場合。

<p class="my-line stamp"><img src="画像のURL"></p>

最後に、おまじない的な行です。これは必ず記載してください。さもないと、それ以降の文章や画像が上にめり込んできます（美しくないんですが、他のやり方を見い出せませんでした）。

<div style="clear:both;"></div>

なお1行目最後「background」のカラーコードを変更すれば、背景色も自由自在です。

しいたけの世界にようこそ お帰りください

カラーコードは下記サイトなどを参考にしてください。

おわりに

はたしてLINE風の表示にどれほどのニーズがあるのかは分かりませんが、よければ気分転換にでもご利用ください。

不明な点などあればコメントなどでご質問ください。ただCSSを勉強しはじめて5日目なので、あまり高度な内容だと「分かりません」という解答になる恐れがあります。

……この機会にほしい物リストを作って、CSS関係の本やらを入れてみました。

HTML5&CSS3標準デザイン講座

posted with ヨメレバ

草野 あけみ 翔泳社 2015-11-06

Amazon

Kindle

楽天ブックス