今日もブログで前からやってみたかったことを、やってみることにします。
ブログに吹き出し形式のCSSを設置するまで
ブログで複数の人物が登場する記事を書くときに、吹き出し形式で会話を表示している方、結構いらっしゃいますよね。あれ、分かりやすくていいですよね〜。このブログでも子どもがよく記事に登場するので、子との会話を吹き出し形式にしてみたら、楽しそうです。
では、さっそくやってみることにします。
まずは、吹き出しに表示する画像を用意します。みなさん吹き出しの画像は、自分で描いたり、WEBで画像制作などのお仕事を依頼できる「ココナラ」で作ってもらったりと、凝ってますよね。
だけど、絵心がなくてせっかちな私は、写真をマンガ画調にするアプリで作った画像と、前に子の母親に描いてもらった似顔絵で、とりあえずやってみることにします。（そんなんでいいのか）
ご存じの方も多いかと思いますが、漫画カメラのアプリはこちらです。
次に、会話を吹き出し形式で表示するためのCSSを準備します。こちらもいろいろなものが公開されていますが、私は「NO TITLE」さまの記事のものを使用させていただきました。ありがとうございます！
この記事に書かれているCSSを、「デザイン設定」の「デザインCSS」に貼り付け。あとは記事を書くときに、HTML編集画面から、吹き出しで表示するためのCSSのクラス名を手動で追記して...と。
Hello World.
おっと。つい、いつものクセが。（プログラマーは、新しいプログラミング言語や技術を試すとき、最初の第一歩として「こんにちは世界」と画面に出力する、という慣習があるのです。）
そして、子どもの吹き出しのほうは、こちら。
あるきスマホは、ダメやで！
息子くんは、スマホのマナーには結構厳しい。
うん、なんとかいけたみたいですね！即席の画像でやってみたわりには、意外といい感じに表示されたので、このままこれを使っていくことにします。
せっかくここまで出来て、会話がこれだけではちょっと味気ないので、試しにここで、ある日の私と子どもとの会話を再現してみたいと思います！
或る日の夜のおしゃべり
なあなあ、今日のほいくえんのおやつ。なんだったか、教えたろっか？
うん、なになに〜。教えて。
「やぎぐみさんがんばってサンド」やで！
？？？
それでな、あしたのおやつは「きりんぐみさんがんばってケーキ」。
（なんでおやつの名前にクラス名と「がんばって」が入るんだろう...）
その次は「らいおんぐみさんがんばってシチュー」やねん！
これは先週開かれた、子どもの生活発表会の2,3日前の会話。次の日、おやつの名前の意味を保育園の先生に聞いてみたら、生活発表会本番前の数日間は、「発表会がんばって！」の願いを込めて、おやつが特別メニューになっていた、ということみたいです。
こんな感じで、息子くんとのおしゃべりでは、「おや？」とか「え？その言葉どこから出てきたん？」という内容のものが、突然飛び出してくることがあるので、何か面白い会話が生まれたら、これからは吹き出し調の表示で会話を残していってみたいと思います〜。