ブログに慣れていない人でも記事の中で簡単にLINE風吹き出しを表示できるCSSを自作した。マークダウン記法なら4文字（「-」「 」「1」「.」）の組み合わせだけで、コピペ不要でLINE風吹き出しの会話形式を簡単に表現できるよ。
見本
- まずは見本を見せてよ。
- OK。
- こんな感じ。
- これが4文字の組み合わせでできるの？
- この会話例は2文字の組み合わせなんだぜ。
- 半角ハイフン（-）と半角スペース（ ）だけ。
- まぁ、ステキ💕
解説：見本の記述例を図解
上の会話例を入力するときは次のように記述した。（下の記述例はキャプチャー画像）
分かりやすいように、拡大して補足説明を入れるよ。
各行ごとの説明。
- 改行だけ
- 半角ハイフン（-）3つで改行
- 改行だけ
- 半角ハイフンの後に半角スペース（ ）で改行
- 半角スペース2つ、半角ハイフン、半角スペースの後に会話内容
- 4行目と同じ
- 5行目と同じ
- 5行目と同じ
特徴：シンプルな記述方法
記述方法を見れば分かるように、シンプルな記述でLINE風の吹き出しを表示できるようにした。
記事を作成中に、吹き出しを表示するためのHTML要素をコピペしなくてもいいのが最大の特徴だ。
HTML要素ではなく半角スペースや半角ハイフンなどを記述し、吹き出しでの会話を表現できる。会話内容を記述しているときも見た目がすっきりして分かりやすいよ。
具体的には、特定のclassを入れるためのdiv要素などを記述しなくてもいい。慣れていない人にはこのHTML要素が目障りで会話の編集どころではないと思うからね。
なお、シンプルな記述を可能にするために、機能面でも次のとおりシンプルにした。
- マークダウン記法でシンプルに記述できる。
- 二者間の会話を想定している。吹き出しが2種類だからね。
- 話者のアイコン画像の表示は想定していない。
3名以上での会話やアイコン画像を表示したい人には不向きだ。
導入：最初に1回だけコピペ
次のコードをHTMLのhead内に追加する。これさえ追加してしまえば、マークダウン記法で4文字の組み合わせだけでLINE風の吹き出しを表示できるよ。
<!--
* Markdown Fukidashi v1.0.0
* Date: 2016-09-11
* Copyright (c) 2016 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
-->
<link rel="stylesheet" href="http://hapilaki.webcrow.jp/file/16/markdown-fukidashi-min.css">
はてなブログで追加する場所は次のとおり。
headに要素を追加の下にあるテキストボックス（下図ではフレームアウト）に挿入したいコードを追加して保存する。
はてなブログ以外で導入する場合は、同じ要領でhead内に上記コードを追加し、記事が入るdiv要素などにentry-contentというclassを追加する。
コードの見本
相手と自分のどちらが先に会話を始めるかによってコードを使い分ける。
…と言っても、ほとんど同じなので心配無用だ。
相手が先
相手が先に会話を始める場合、見本と同じで2文字の組み合わせだけで記述できる。次の見本をあなたの記事内にコピペして表示されるか確認してみよう。
---
-
- まずは見本を見せてよ。
-
- OK。
- こんな感じ。
-
- これが4文字の組み合わせでできるの？
-
- この会話例は2文字の組み合わせなんだぜ。
- 半角ハイフン（-）と半角スペース（ ）だけ。
-
- まぁ、ステキ💕
自分が先
自分が先に会話を始める場合、半角ハイフン3つの2行下は「1. 」（半角数字の1、半角ドット、半角スペース）にする。違いはこれだけ。
---
1.
- 半角数字の1と半角ドットを使うのはここだけ。
-
- じゃあ、他は半角ハイフンと半角スペースだけなの？
-
- そうだよ。
-
- まぁ、カンゲキ💕
実際の表示例は次のとおり。
- 半角数字の1と半角ドットを使うのはここだけ。
- じゃあ、他は半角ハイフンと半角スペースだけなの？
- そうだよ。
- まぁ、カンゲキ💕
自分が先にふたつ以上
自分が先に会話を始める場合で、自分の吹き出しが最初にふたつ以上続くのなら半角ドットの後の半角スペースが不要だ。
本来なら半角スペースが必要なはずだが、はてなブログのバグ（？）のためか半角スペースを入れるとうまく表示されないからね。
---
1.
- 自分の吹き出しを最初にふたつ以上表示するなら…、
- 半角数字の1と半角ドットの後は半角スペースが不要。
-
- それ以外は他と同じなの？
-
- そうだよ。
-
- まぁ、バグつき💕
実際の表示例は次のとおり。
- 自分の吹き出しを最初にふたつ以上表示するなら…、
- 半角数字の1と半角ドットの後は半角スペースが不要。
- それ以外は他と同じなの？
- そうだよ。
- まぁ、バグつき💕
補足
表示されない
自分で半角ハイフンや半角スペースを記述したが、吹き出しが表示されない場合は次の点を確認する。
head部分にコードをコピペで導入する。- 会話の初めには半角ハイフン3つを必ず記述する。
- 半角ハイフン1つの後は半角スペースを必ず入れる。
水平線が消える
ほとんどのブロガーには関係のない話だ。
記事内で水平線（hrタグ）を使っている場合、この「マークダウン吹き出し」を導入すると消えてしまう。
その場合の対処方法はそのhrタグを次のようにする。
<hr style="display:block;">
もしくは、消えてほしくない水平線に任意のclassをつけて、そのclassにdisplay:block;を適用する。
HTMLに変換したい
マークダウン記法で会話を記述し、それをHTMLに変換して投稿したい場合は次のページを使えば楽にできるよ。
マークダウン記法をHTMLに変換するブラウザエディタに全選択と改行削除機能を付けた - はぴらき合理化幻想
上記ページ内のピンクのテキストエリアにマークダウン記法で記述した後に、緑のテキストエリア内をクリックするとHTMLに変換される。
HTMLに変換するときの注意点として、「自分が先にふたつ以上」の際にドットの後に半角スペースを入れる必要がある。バグ（？）がないので本来の仕様どおりにする。
まとめ
- マークダウン吹き出し、いいね。
- せやろ。
- マークダウン自体が「読みやすくて書きやすい」を主眼に開発されているからね。
- ブログ記事作成の技術革新や。
- まぁ、ゲキテキ💕