前回はセリフを１つ書いてみるところまでやったんだったな。ちゃんと理解できたか？
うーん。できたんだけど、
ちょっとわからないことがあるお・・・。
エロ本ゲットォオオオオオーーーーッ！！！
／（やる夫）このAAのセリフなんだけどもうちょっと言葉を口の位置に合わせたいんだお。＼
なるほどな。
そういうときはセリフの余白を調整すればいいだろ
<p style="margin:70px 0px 0px;width:454px;float:left;">エロ本ゲットォオオオオオーーーーッ！！！</p>
</div>
上のセリフのHTMLでセリフの余白はここ（margin）だろ。
下に下げたい場合は増やせばいいと思うぞ。
わかったお。
えーっと、70pxぐらい増やせばいいのかお？
エロ本ゲットォオオオオオーーーーッ！！！
<p style="margin:140px 0px 0px;width:454px;float:left;">エロ本ゲットォオオオオオーーーーッ！！！</p>
</div>
／（やる夫）お！できたお！！＼
ついでに教えると余白にはもう一種類paddingという
余白があるんだ。簡単に言うとmarginが外、paddingが内側の余白の事だな
まあここらへんの使い方はまたあとで説明するから
いいとして、やる夫・・・。
なんだお？
てめえ人のAAで何作ってんだゴラァ！
あうッ！
～しばらくお待ちください～
じゃあ、本題に入ろうか。
お、おう・・・。
<p style="margin:70px 0px 0px;width:460px;float:right;text-align:right;">お、おう・・・。</p></div>
これが上のピクピクしてるやる夫のHTMLだ。
前回のセリフと違う部分を赤くしてみたぞ
<img alt="" src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/shoyofilms/20210522/20210522210154.png" data-ubi="12443"></div>
<p style="margin: 70px 0px 0px; width: 480px; float: left;">やらない夫だろ。<br>
今日はブロマガでアスキーアート（AA）小説風の<br>
記事を書く方法について学ぶだろ。</p>
</div>
回り込みを指定するfloatを左から右、つまりleftからrightにして、あとセリフをデフォルトの左寄せからtext-alignを使って右寄せにしたんだな。まあ、難しいことは考えずコピペすればいいだけだろJK
これで左右のセリフが作れるようになって、
会話劇ができるようになったんだお！
そういうことだ。基本的にはこの二つで構成していけば問題はない。だが例えば上の蹴りのようにキャラクターが絡むセリフを作り逢作りたい場合、があったとする。
ほあたぁ
あべし！
![http://bmimg.nicovideo.jp/image/ch2543599/13346/f5aefb1cbb2acaf9569b9606a718f25c7314fe6d.png")](http://bmimg.nicovideo.jp/image/ch2543599/13346/f5aefb1cbb2acaf9569b9606a718f25c7314fe6d.png")){kind=link}
<p style="margin:130px 0 0 550px;">あべし！</p>
</div>
少し複雑だから順を追って解説しよう。まず、画像は今までと違って背景画像で表示しているぞ
背景画像？
ああ、今回の画像は横幅いっぱい使ってるからな。
やる夫のセリフとかぶっちまうんだよ。だから画像を背景にして上にセリフをかぶせるしかないんだ。
続いてセリフの位置を調整する。この時上で説明したmarginとpaddingを使うんだ。ちなみにmarginとかの後に４つ数字が続いているがそれぞれ上、右、下、左の余白の量を表している。margin:20px 0 0 20px;と来たら上と左に20pxの余白があるってことだ。
まず上の方にあるセリフ「ほあたぁ」は上から10px、左から200pxの位置にある。そこで全体を囲む入れ物のpadding（内余白）で上に10pxの余白を入れ、セリフの入れ物にはの左の余白分marginを指定する
なんかいきなりむずいことやってるけど・・・。
両方ともセリフのmarginじゃダメなのかお？
まあそう思うよな。実は２つ目以降のセリフ（「あべし」）
なら両方ともセリフのmarginで指定可能なんだが
１つ目でそれをやっちまうと仕様で上の10pxの余白が反映されなかったりする。
<p style="margin:130px 0 0 550px;">あべし！</p>
</div>
・・・よくわからんお
まあ10pxだからな。
でもよく見比べればセリフの位置がずれている事がわかる
だろ。こういうめんどくさい仕様がHTMLには沢山あるから、
まずは上の例をコピペしていろいろ試してみて欲しいだろ。
続いてセリフその２（「あべし！」）の位置を決める。
これはさっきも言ったとおり、セリフのmarginに縦と
横の余白の大きさを入れるだけでうまくいくんだ。
質問だお！
セリフは２つまでしか入れられないのかお？
もちろん、そんなことはないぞ。
すこし大変だが好きなだけセリフは入れることが出来るし、
文字の大きさを変えたり色を変えたりもできる。
うまくやれば「セリフ芸」なんてものもできるかもな。
うまい例を作ろうとしたが無理でしたorz
興味がある方はこちらを参考にHTMLの世界へご入門ください
とどめだ。最後のセリフの高さが足りない場合は全体を囲む
下側のpaddingで調整してくれ。例の場合は139pxだな。
これでキャラの絡みや大きなAAをつかったシーンの作成が
可能だろ。ちなみにさっきでてきた時計も同じテクニックで作っているぞ。
よし頑張ってAA小説風記事を書きまくるんだお！
おう！がんばろうな！
ざっくりした構成でしたが、これにて「やる夫がブロマガでAA小説風記事を書くようです。」は終幕とさせていただきます。最後までご視聴いただき誠にありがとうございました。
「自分のブロマガになにか内容とは違う特徴が欲しい」と思って始めたAA小説風記事のテクニック開発でしたが、想像していたよりずっと大変で楽しい時間が過ごせました。少しでもこの記事からそれを感じでいただければ幸いです。ちなみに今後はこのテクニックを使って実際にゲーム紹介や開発の進捗記事などを掲載していく予定ですのでご期待ください。
また、もし自分もやってみたいという方がいらしたら是非ご連絡ください。出来る限りの協力をさせていただきます。ではこれにて失礼させていただきます。
次回に続く・・・。