はてなブログで吹き出しを出す方法（CSS埋込）

　お気持ち表明するとき、吹き出しにしてみる。

例

こんな感じに吹き出しが欲しい

実装方法

　はてなブログの記事本文に次のコードを書く。

<span></span><style>
.balloon-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 0.75em 0.75em;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
  border-radius: 15px;
}
.balloon-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1em;
  margin-top: -0.5em;
  border: 0.5em solid transparent;
  border-right: 0.5em solid #FFF;
  z-index: 2;
}
.balloon-left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -19px;
  margin-top: -0.5em;
  border: 0.5em solid transparent;
  border-right: 0.5em solid #555;
  z-index: 1;
}
.balloon-left p {
  margin: 0;
  padding: 0;
}
</style>

<p class="balloon-left">こんな感じに吹き出しが欲しい</p>

やったね！

でもコード長くね？

書くの面倒だよ……

なんか横につながっちゃうし

願望

　私としてはマークダウンで以下のように書きたかった。

＜これで吹き出しになってほしい
｛これでもいいかな

右向きの吹き出しはこう書く＞
これでもいいかな｝

＜向きに関わらず
＞一文字目に不等号を書いたほうがマシンリーダブルかも？
＜でも右向きのは人間にとって読みづらいか？

💬吹き出しの絵文字を使ってみてもいいかも？
🗩左向きの吹き出し
🗨右向きの吹き出し

　なのに実際は以下のように書かねばならない。

<p class="balloon-left">ここに吹き出しの内容を書く</p>

クラス属性値、覚えられないよ……
HTMLタグ書きたくないよ……

　ついでに考え中の吹き出しも以下のようにマークダウンで書けたらいいのになぁ。

oOこれで考え中の吹き出しになってほしい
右向きの考え中の吹き出しはこれOo
💭絵文字を使ってみてもいいか？　でも左右の向きを示す絵文字がない

　だれかこういう軽量マークアップ言語の仕様をちゃんと考えて整理して作ってくれないかなぁ。Pure JSでもいいし、marked.jsの拡張機能とかで作ってくれたら嬉しいなぁ。

　できれば簡単に書けるまま、人名やアイコンまで追加で表示できたら嬉しい。

情報源

• CSSで作る！吹き出しデザインのサンプル19選
• 【HTML】STYLEタグを記事内で利用する

あれこれ

　上記の結論に至るまでにあった色々なことを書くよ。

なぜ吹き出しを描く？

　次のように表現することで読みやすくなると思った。

形式	内容
地の文	客観的な事実
吹き出し	主観的な感想

　本当は事実だけをわかりやすく短く書こうと思っていた。

　でも、どうしてもお気持ちを表明したくなってしまう。すると事実と感想がごちゃまぜになって読みづらくなる。

　事実だけを端的に示してわかりやすくしたまま、言いたいことを言うにはどうしたらいいか。考えた末、感想を述べるときは吹き出しを使ってみようと思いついた。

　実際には綺麗に使い分けることができない。地の文でお気持ちを述べているところもある。それらは長いため、吹き出しにするとウザくなってしまう。元々の本文からしてウザいのでどうにもならないが、それは言いっこなしで。

　……やってみたかったんだよ。いいじゃん別に。許してちょんまげ。

吹き出しCSS

レスポンシブ

• CSSで作る！吹き出しデザインのサンプル19選

　上記を参考にした。他のサイトではレスポンシブでなかったり、大きくレイアウトが崩れたりして使えなかった。

コードを読むのが大変なデモサイト

• https://nicolasgallagher.com/pure-css-speech-bubbles/demo/

　色々な吹き出しのパターンがある。良さげだけど、どの見た目がどのコードなのか、探し当てるのが大変。

　緑枠で内側が白のやつを使ってみたかったけど、微妙に三角形のところに緑の線が入っちゃってて切れ目が見えちゃってる。なんか色々と残念。使うのやめた。

残念ジェネレータ

　たとえば以下の吹き出しジェネレータは有名だが、このサイトにコピペしたらめちゃくちゃになって吹き出しの形を保てていなかった。ぶっちゃけチンチンの形になっちゃって卑猥だった。どうしてこうなったorz

• cssarrowplease.com

こいつをどう思う？

アウトです

プレビューで表示されたのと全然ちがうんですけど……

なんでこれが先っちょだけ黒いチンチンになっちゃったの？

違うんです　これは吹き出しです　吹き出しなんです（泣）

いや違うよね？　どうみてもチンチンだよ　百歩譲っても矢印だよ

丸パクリできず

• CSSで作る！吹き出しデザインのサンプル19選

　上記のCSSを丸パクリしたが失敗した。なぜか私のサイトでは微妙におかしかった。三角形のところが大きすぎた。そこで手探りで適当にサイズをいじって調整した。なぜこのサイトにコピペしたらURL元と違う表示になってしまうのか原因不明。おそらく他のCSSと干渉したのだろう。

なんか三角形のところが大きすぎて吹き出しっぽくない……

それを微調整して、こんな感じにしてやった

でも本当は、三角形のところをもっと細長くしたい

なぜ三角形になるの？

　パクリ元のコードがよくわからない。特に三角形のところ。疑似セレクタ:before,:afterで実装しているのはわかった。でも、なぜそのコードで三角形が描画できるのかわからない。今回は件のCSSコードにあるmargin, borderを変更してサイズ調整したのだが、ちょっと変えただけで消えたりして謎。そもそもborderは四角形であって三角形ではないはず。

　ググると以下サイトを見つけた。

• CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター

　よくわからない。算数できない。面倒くさい。こんなコード書けない。書きたくない。そこまでして頑張りたくない。正方形でなく細長い三角形は書けないの？　など色々と思う所がある。

なぜ埋込CSSにするのか

　はてなブログにはデザインCSSがある。すべての記事に対して適用するCSSを定義できる。

1. はてなブログ・ダッシュボード
2. デザイン
3. 🔧（レンチ アイコン）
4. 高度な設定 - {} デザインCSS

　今回のCSSもデザインCSSに登録すればいいのでは？　と思ったけど次の理由で見送った。

• 使用頻度が少なそう
• 吹き出しCSSが長い
• 使わないのに吹き出しCSS読込したら遅くなる

　本当は吹き出しの三角形が上下左右の４方向分欲しかった。でもそうするとCSSがもっと長くなる。なので横書きの書字方向である左のみ使うことにした。

　次のトレードオフである。しかしどのみち、吹き出しの向きも変えられないなど不完全さが目立つ。なので結局は「適当でいいや」となってしまう。

• 実行速度
• 記事を書くときの手間

はてなブログにCSSを埋込む方法

• 【HTML】STYLEタグを記事内で利用する

　上記を参考にした。次のような制約があるようだ。

• <style>内で空行を作らない
• <style>タグに隣接する別のタグを配置する

　実装方法で示したように、はてなブログでCSSを埋め込むときは<style>タグの直前に<span></span>がある。じつはこれが必要。ミスではない。

<span></span><style>
書きたいCSS
</style>

　なぜかは知らないが、はてなブログの記事でCSSを埋め込むときは、こうした謎の仕様がある。

たかが吹き出しごときでこんな面倒なのかよ……

結論

　とにかく実装方法にあるコードをコピペすればいいや（脳死）。