てなわけでぐだぐだです（何
元々メインの日常ブログのTRPGカテゴリーでぶっちゃけてた話題なんだけど、その日常ブログを置いている無料鯖が来年３月に終了が決まったので、こっちに移動させました。
どっちかというと日記というより裏話的な内容なので、ブログのカテゴリーではなくリプレイとは別のコンテンツとして新たにつくりました。
リプレイの更新の合間のおつまみと読んでいただけたら幸いです。
「ぐだぐだセカイの守護者」制作秘話。
作中にやる夫スレでおなじみのアスキーアート（AA）を多く使っています。
やる夫スレといっても、今のところドクオとデフォルメミクさんしかでてこないけど（笑）
元ブログでは一応スタイルシートで整形しているのでパソコンではきれいに表示されていますが、
スマホでみたらもののみごとに崩れまくってたので、こっちに移すさいにどうしたもんだか頭抱えてました。
スタイルシートでなんとかしようにもスマホできれいに表示されない。
で、あーでもないこーでもないと悩んだ末に思いついたのが
AAを画像にして表示する
今流行りのL○NEの画面みたいな、吹き出しで会話する形式でもよさそうな気もありましたが、
一時期やる夫スレにはまってた身なので、やっぱAAで会話している形式がしっくりいくのでこうなりました。
いろいろぐぐってみたら、AAを画像化するwebツールを見つけたので、それを使っていくつかのAAを画像化。
AA（アスキーアート）の画像化Webツール！ – Webツールありがたやありがたや。
で、問題はAA画像の横にセリフを並べる作業。これが一番の難関。
スタイルシートをいじくったり、table（表）を使って横に並べようとしたけど、なんか違う。
これまたいろいろぐぐってみて、たどりついたのがここ。
htmlやCSSで画像の横に文字を並べる方法６種【複数行OK】
その中のvertical-align: middleを使う方法が、まさにやりたいことで目からウロコがおちた。
ありがたやありがたや。
１行だけの短いセリフならなんとかなりました。（複数行のセリフの場合はまたなんか考えておく）
ちなみに、下のほうの小さいミクさんの画像ではなぜかセリフを横に並べられなかったので、
ミクさんの頭上に吹き出しをいれることで解決しました。
追記（２４年５月）
ブログのテンプレートを変えたので、頭上の吹き出しはCocoonマイクロコピーブロックのマイクロバブルを使っています。
またAA画像の横にセリフを並べる表現はデザインブロック→横並びブロックを使っています。
送信中です
