【ブログ】吹き出しで会話形式にするかつ、名前を付ける方法
どもども、まっちゃです🍵
この記事の冒頭500文字ぐらいを読めば、こんな吹き出しを扱えるようになります。
やっほー！みんな元気～？
そんじゃ早速いきます。
僕は以下のSHIROMAさんの記事を参考に、吹き出しを導入して使っていました。
導入自体は非常に簡単な2ステップ。
さながらお年寄りに優しい超低床バス。
- 吹き出しに使う画像を用意する。
- CSSをコピペして貼り付ける。
こんぐらいのもんです。
僕はルンルンで使ってました。
...しかし、ここで1つ問題が。
登場人物に名前が付けれんねえ(´_ゝ｀)
まあ、付けられなくてもそんな大きな問題じゃなかったんだけど...
こうゆう細かいところも気になってしまうのがブロガーの性。
そしてその細かい修正に何時間もかかるのがブロガーの宿命（半ギレ）
てなわけで、登場人物に名前付ける奮闘記を語りたいんですが、まあまずは結論からですよね。
それが僕のスタイル。
ブログで吹き出しが使えるようになる3つのステップ【cssを無料公開】
かつひろさんという方が書いたブログのCSSコピペで1発解決しました。
ああかつひろ神。
あ、1つ注意なのが、下の画像みたいに、「a」の数が6個になってないとデザインが崩れちゃうってとこです。
吹き出しの登場キャラを増やしたい時は基本的に、「.XXX::after」ってなってるやつをコピペして使うんですけど、ここだと「a」の数が4個になっています。
これでデザインが崩れて、これまた原因究明に30分ぐらいかかりました(;_;
みなさんも注意してください。
というわけで、本編はここで終了です。
ここから本編の2倍量ぐらいの、僕の奮闘記を書きます。（本編とは）
そこそこ面白く書いた(つもり)なので、暇な方は読んでいってください。
そもそも何で名前を付けようと思ったのか？
名前を付けるに至った経緯として、ちゃんと2つの理由があるんですよ。
突然神からの啓示があったわけではありません。
僕はどっかのムハンマドおじさんでは無いので。
登場キャラに愛着がわいた
そう、愛着がわいて登場キャラがかわいくなって来てしまった。
私、かわいい？
うん、かわいい（即答）
こころかわいいよおおおおおぉぉぉぉぉこころこころこころおおおぉぉｵｵｵｵ
てな感じで、愛着が抑えられなくなってしまった。
ちなみにわん子もいます。
そんな訳で、名前を付けてあげたくなってしまった。
独身OLが自宅の観葉植物や家具に名前を付けてしまうのと同じ感覚だ。多分。
名前が付いていないと、読者がコイツ誰？状態に
そう、自分からしたら見慣れている登場キャラも、読者にとったら誰か分からない。
特にわん子は、獣の皮をかぶった半獣人だ。野蛮だ。人によっては恐怖すら感じるかもしれない。
いずれにせよ、名前を付ける必要があるなと思ったので、ここから名前を付ける旅に出た。
まっちゃの吹き出し名前奮闘記
まず、名前が付けられる吹き出しCSSは、わりとすぐに見つかった。
・【はてなブログ】WordPressみたいな会話形式の吹き出しを使おう💓（コピペOK / 初心者向け） - 【ちゃんこめBlog】インド在住者ブログ。インド旅行・観光・生活情報をお届け！
・【CSS】会話してるっぽい吹き出しを自分好みにアレンジしてみた - テケログ
しかし、またもや問題が。
吹き出しのデザインがもともと使ってたSHIROMAさんのと違う。
別に吹き出しのデザインぐらい多少変えれば良いものの、ここで僕は、
やだやだやだ！僕SHIROMAさんの吹き出しがいーいー！！！(ノД`)・゜・。
と、小学生もびっくりの泣き喚きっぷりを披露。
お母さんがいたら速攻でビンタくらうレベルの喚きっぷり。
そっからいろいろ探してみたんだけど......
マジで見つからない。
これは明らかに小学生の宝探しのレベルを超えている。
インディージョーンズもびっくり。
アマゾンの最奥にでも隠されているんだろうかと思うぐらいに見つからなかった。
（※これはただ、吹き出しに名前を付ける方法を探しているだけの話です。そして、筆者は大学生です。）
もう探すのに飽き飽きしたので、自分でCSSをいじる事にした。
コピペしかした事ないブロガーが自分でCSSいじると、100％バグるよね
うん、タイトルの通りバグった。クソが。
CSSをパクるのが得意なら、CSSをバグらせるのも得意なのが駆け出しブロガー。
まあ幸い、バックアップは取ってあったので、事なきを得た。
1回バックアップ取ってなくて、あっぷあっぷしたからね。
これぐらいの学習能力はある。
でもまあ、自分でCSSいじるのは絶対無理だと分かった。
やっぱ探すしかない。
ついに発見...!ああかつひろ神よ...!!!
ついに見つけた。
SHIROMAさんと同じ吹き出しデザインかつ、名前を付けれるCSSを...!!!
と思ったのもつかの間。
冒頭の注意点で示した「a」の数の罠にハマり30分格闘。
ついに完成したのがこちらの吹き出し。
やったねまっちゃ君！
あﾞりﾞがﾞとﾞうﾞうﾞぅﾞぅﾞぅﾞぅﾞｩｩｩｩｩｩ
てなわけで、2時間半にわたる吹き出し名前奮闘記は幕を閉じたのでありました。
場面によって表情も変えてしまうという芸達者ぶり。
苦労して良かった...
おわりに
どうしようこうゆう備忘録的なの書いたこと無いから締め方がﾜｶﾝﾈ(＾ω＾)
まあ、ここは無難に、僕の奮闘記が皆さんのお役に立てば幸いです。
とか言っとく。
ここまで読んでくれてありがとうございました！
それでは今日はこの辺で失礼します。
ﾝまたな('ω')ノ
