Bloggerでアスキーアート(AA)を無理くり使う

たとえば、次のようなAAがあったとします。


(※これは画像ファイルです)

これをBloggerに載せたいと思ったとします。

いつも記事を書く要領で投稿画面にペーストすると次のようになります。


イ　　　　　　　　/　　ヽヽ　　　(;´Д`)y─┛~~
─┼─　　./　　ノ─┬　─┐¨┌┐　/┐¨
.丿　ヨ　/＿＼　　ノ　　　ノ　 └┘　 ./


ずれたり線の太さがまちまちになったりしてます。
これは、

1. 設定でフォントをＭＳ Ｐゴシック以外に指定していたり文字サイズを変えていたり
2. 設定で記事の行間を広めにとっていたり
3. 貼ろうとするAAの行頭にスペースがあったり

するとたいがいこうなります。

じゃあ貼れないんじゃん、というと、そうでもなくて、どうにかなったりします。



まず、1. と2. を部分的に解決させます。
いつも便利なWYSIWYG型の「作成」タブではなく、「HTMLの編集」タブに切り替えてから、任意の場所に、

<div style="font-family: 'ＭＳ Ｐゴシック','ＭＳＰゴシック','MSPゴシック','MS Pゴシック'; font-size: 16px; line-height: 18px;">
ここにAA
</div>

と書く。

あとは「ここにAA」のところにAAを貼り付ければオーケー！



・・・と言いたいところですが、実際にやってみると次のようになります。

イ　　　　　　　　/　　ヽヽ　　　(;´Д`)y─┛~~
─┼─　　./　　ノ─┬　─┐¨┌┐　/┐¨
.丿　ヨ　/＿＼　　ノ　　　ノ　 └┘　 ./

ずれとります。


他のブログサービスだと大丈夫みたいですが、1.と2. を解決してフォントや行間がイケても、Bloggerですと、3. の「行頭スペース」がネックになったりします。省略されるようです。

じゃあ貼れないんじゃん、というと、そうでもなくて、どうにかなったりします。



行頭にスペースがあると省略されてしまうのならば、さらにその前に文字入れちゃえばいいんじゃん？
ということでですね、付け加えてもあまり見た目に影響のないような文字を行頭に追加してやるわけです。

そうすると次のようになります。（行末は特に必要ありませんが、気分的に付けてみました。）

┌　　　　　　　　　　　　　　　　　　　　　　　　　　　 ┐
│　 イ　　　　　　　　/　　ヽヽ　　　(;´Д`)y─┛~~│
│─┼─　　./　　ノ─┬　─┐¨┌┐　/┐¨　　 .│
│　.丿　ヨ　/＿＼　　ノ　　　ノ　 └┘　 ./　　 　 .│
└　　　　　　　　　　　　　　　　　　　　　　　　　　　 ┘

こんな感じ。できあがりです。（ちゃんと表示されてますでしょうか？）



・・・とは言っても、毎度まいど行頭に何かしら付け加えるのもめんどいなー。。

・・・とは言っても、アスキーアート貼ることもそんなにねぇよなー。今までどおり、画像にして貼るほうがラクで良いかな。。。（笑）