はてなブログで吹き出しコメントの表現と、画像リサイズのキャッシュサービス

出囃子

ねえねえ、このコメントのように吹き出しってどうやるの?

いきなり、ずいぶんとメタ視点な質問だわね。

そうかな?でも人のブログ見て、マネしたくなっちゃったんだよぉ。

それなら、こちらの記事が参考になるんじゃないかしら。
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 | NO TITLE

なんだか難しそうだなぁー。できるかなぁー。

何言ってるの、すでに吹き出してるじゃない!

(゚∀゚)ブブブッ!

本編

ということで、こちらに詳しく書いてあるCSSの設定をお借りして吹き出しをやってみた。

www.notitle-weblog.com

上記のサイトを参考にCSSをコピペすれば誰でも簡単に利用できるが、吹き出しの画像だけは自分で用意する必要がある。丸型にクリッピングされるので、元画像を正方形の形で用意したい。

今までなら、そういった画像加工を画像編集ソフトやImageMagickで処理していた。ところがそういった道具を必要としなくても画像処理を簡単にできる、便利なサービスを見つけたので紹介したい。

images.weserv.nl

f:id:araemonz:20180819200050j:plain

こちらのサービスをご存知だろうか?

Image cache & resize service

なんでもいいので、ネット上にアップロードした画像のURLを上記サイトのパラメーターに指定してあげると、画像リサイズやエフェクト処理ができる。プロキシ経由というか、キャッシュサーバーというか、CDNというか。

とにかくわかるよね?

そのURLをブログに貼り付ければそのまま使える。(サービスが停止しない限りね)

実際にやってみよう。例えばこのえびふりゃの画像。

https://apppppp.com/1/harmonize/ebi-tere.png

背景が透過色のPNGファイルで、縦横の長さが異なる長方形の画像だ。これを例えば、背景を黒にして、正方形の枠内に収まるように表示したかったら、URLのパラメーターをイジってあげれば良いだけ。画像編集ソフトもいらない。

https://images.weserv.nl/?url=apppppp.com/1/harmonize/ebi-tere.png&w=300&h=300&t=letterbox&bg=white:image=https://images.weserv.nl/?url=apppppp.com/1/harmonize/ebi-tere.png&w=300&h=300&t=letterbox&bg=black

これをimgタグのsrcに指定するとこんな感じで出力される。

https://images.weserv.nl/?url=apppppp.com/1/harmonize/ebi-tere.png&w=300&h=300&t=letterbox&bg=white

感動した!

画像サイズなどの小さな変更点は、いちいち画像編集ソフトやImageMagickで加工するのはめんどうだった。しかしこのサービスを利用すればそのような悩みはなくなる。「痒いところに手が届く」というのは、まさにこういうことだ。

さて、今までは一人称で説明文を書くのが辛かったけれど、えびふりゃ、かきふりゃが吹き出しで会話してくれるならだいぶ楽になりそうだ。

ハモってね 音感トレーニングHarmonizeで音痴を直そう

ハモってね 音感トレーニングHarmonizeで音痴を直そう

Toshihiko Arai無料