吹き出しで会話するやつ、僕もやってみたい
もうタイトルのまんまである。
偶にブログとか見てるとさ、アイコンの横に発言が出ている感じのやつあるじゃん。オモコロの記事とかが典型的なやつ。あれやってみたい。
こういうの。これはオモコロ記事からのスクショだけど。結構いろんなブロガーの人がやっていて、典型的な表現の1つになっていると思う。
これ、原理はCSSで編集しているだけということは、フロントエンジニアの経験から理解している。多分そこまで難しくない。はてなブログにもHTML編集モードがあるので、そちらでCSS追加してしまえば実装自体はすぐにできるだろう。
しかしね、それを普段からするとなるとめんどくささが勝つのです。普段ブログ書くときわざわざHTML編集しないからね。せっかく優秀なCMSであるはてなブログ上で編集できるのだから、わざわざHTML編集なんてしたくもない。それにそれやっちゃううとスマホで記事作成するのが難しいんだよね。
――そんな理由でこれまでめんどくささが勝ってしまい、やってこなかった吹き出し会話。しかし、他人のブログを見ていて思う。結構やってる人多いんだよなぁ。
変哲のない主婦のブログとか学生のブログでもやってる。もちろん彼らがHTMLを勉強した可能性はあるだろうけれど、全員がそうだとは少し考えにくい。こういう時はたいてい、実は簡単にできる機能があるか、簡単にできる方法をネットの誰かが紹介しているかの2択だ。
HTMLを毎回いじらずに編集できるならありだな、ということで調べてみた。「はてなブログ 吹き出し」で検索、と。
最初に出てきたのはこれ
nagarami-kurokiri.hatenablog.com
ブログの内容に従いながら進める。なるほど、Head要素は毎回固定できるんだなぁ。
なんて思いながら進めてたけど、結局HTMLで編集してるし、なんか上手くできなかったし……あかんやん。欲しい情報と違うわ、となったので他を調べてみる。
次にみつけたのはこれ。定型文として仕込むことで毎回HTML編集する必要を省いている。なるほど、欲しかったやつだ。ちなみにコピペ用CSSは先ほどのブログと同様だった。これが出回ってるんやろね。
テキスト
――できたよ。ワンボタンで吹き出しつけられるならコピペでいいからCSSの知識もいらないしね。これで、世のブロガーが吹き出しを実装していたのか、なるほど。ここまで簡略化されているなら、ブログを書ける程度にパソコンを使えれば誰でも実装できるというわけだ。
もしこれ見てやってみたいと思った人は紹介したブログの情報で十分に実装できると思うので試してみてほしい。
ちなみに、スマホで編集するときは定型文という機能はないので、HTML編集をする必要がある。まぁ定型文を事前にコピーしておけばできないことはないが……このあたりのUIアプデしたりしないですか？はてなブログさん？
