どら猫のひとりごと

AAとはアスキーアートの略です。
アスキーアートってご存知ですか？
面倒な説明は省きますが、文字・記号によって描かれたアート（絵）のことです。
テキストアート、文字絵とも呼ばれます。

ヽ(´▽｀)ノ♪とか、(>_<)とか、_|￣|○の絵文字もAAに含まれます。
世の中にはとんでもない人がいて、何行かに渡ってAAを作ってる人がいるんですね。

でも、ブログなどに貼るときってきれいに貼れないんです。
何でかってゆーと文字幅が違ったり行間が違ったりするから。
ブログなどの文章はある程度行間が開いてた方がストレスなく文章を読めるのですが、
AAは行間が開いてると間抜けに見えちゃったりするのです。

そこで今回はブログなどにAAを貼る時に、ずれないようにするための設定のご紹介。
とゆーかAAをきれいに貼る方法が載ってるところがあったので自分の覚書用に編集して転載です。

まずスタイルシート（CSS）に以下をコピペします。


font-familyはプロポーショナルフォントの指定です。
プロポーショナルフォントは文字に合わせた字幅になるように作られたフォントです。
文字サイズの調整／行間の調整は自分のブログのフォント数に合わせてください。
本来は16px／18pxが基本らしいです。

この記述は、指示した箇所はプロポーショナルフォントで文字サイズは12px、行間は14pxで表記してね、という指示になります。

そして、記事にAAを貼るときは<span class="aa">と</span>でAAを囲ってください。

<span class="aa">　　　　　 /"＼　　　　　　　　　　　　　/ :;　ヽ
　　　　　 |　　::ヽ　　　　　　　　　　　 /　;　　|
　　　　　 .i　　　::ヽ　　　　　　　　　 / 彡　　 |
　　　　　　|　ﾐ　　::ヽ　,,,,,,,....＿,,,..-‐" /,,　 　 |
　　　　　　|　ﾐ　　　ﾞ: : : : : : : i　: : : : ::　" 　　 i
　　　　　　(　: : : : : : : :　　　lﾄ　l　,!　　　: : : : : ヽ
　　　　　　/: : : : : l　i　l| 　　i　 '　 　 　' __ , : : : :ヽ
　　　　 　 /: : :　 ,..-ー--､　 　　 　'"￣　 `　　 ヾ i
　　　　　 ,i:　/ ` ､,, 　;:.　　　　　　　`　　-''"_,,,.. : : :|
　　　　/,|　 　　,,　　｀　 　　 ､_　 _,　　 　'＿　 . : : :|
　　　/: :.|　　"" ＿,,, ..　　　　 　!　　　　 ;　 ` ニーi､‐-、
　　 ,i　 　,!-―''" ＿ﾆ',　 ､__,,-'＾ ｰ､,,..-'' ヾ ヽ`ｰ､/::.|
　　|: :　' 　 ､　-''　_／/　　　　　　　　　　` 　 ,／ヽ: : |
　 ,|:　 　/　/ ` -/､＿　　　＿,,,,,...　　 　, ,　 '　　　ヾ: :|
　 i: : :　 !　　　 　ヾ`ー､-､_,,,-､,,,_,,....　　　　　　　　　　i
　 i: :　　|　　　　　　 　 `ー|lヾ|　 「|,,-‐"　　　　　ヾ　　 |
　　|: : 　i 　　　　　 　　　　`ｰ'~（(　)）　　　　　　　､　;:　ヽ
　　,!: : : ;:　　　　　　　 　　　　　 ,∩､　　　　　ヾ　　　,:　:: i
　/:: : :.　;;　　　　　　　 　　　　　,! 　 !　　　　　　　　.,,　: : :.i､
　i: : : :ﾞ 　､　　　　　　　 　　　　　￣　　　　　　　､ ノ　: : : ::.|
　i: : : : :... 　 ､　　 　　　　　　　　　　　　　　　　､　 .＿,,..: : :.i
　 ＼: : : : ...　: :ﾞ　 -　 ､､　　　　　　　　　　　_,,,-ｰ":: : ::::_,ノ
　　　 `ー---､､＿＿＿,,- `ー----―､''_'"":::　::＿,,, -'"</span>

こんな風に記述します。すると


　　　　　 /"＼　　　　　　　　　　　　　/ :;　ヽ
　　　　　 |　　::ヽ　　　　　　　　　　　 /　;　　|
　　　　　 .i　　　::ヽ　　　　　　　　　 / 彡　　 |
　　　　　　|　ﾐ　　::ヽ　,,,,,,,....＿,,,..-‐" /,,　 　 |
　　　　　　|　ﾐ　　　ﾞ: : : : : : : i　: : : : ::　" 　　 i
　　　　　　(　: : : : : : : :　　　lﾄ　l　,!　　　: : : : : ヽ
　　　　　　/: : : : : l　i　l| 　　i　 '　 　 　' __ , : : : :ヽ
　　　　 　 /: : :　 ,..-ー--､　 　　 　'"￣　 `　　 ヾ i
　　　　　 ,i:　/ ` ､,, 　;:.　　　　　　　`　　-''"_,,,.. : : :|
　　　　/,|　 　　,,　　｀　 　　 ､_　 _,　　 　'＿　 . : : :|
　　　/: :.|　　"" ＿,,, ..　　　　 　!　　　　 ;　 ` ニーi､‐-、
　　 ,i　 　,!-―''" ＿ﾆ',　 ､__,,-'＾ ｰ､,,..-'' ヾ ヽ`ｰ､/::.|
　　|: :　' 　 ､　-''　_／/　　　　　　　　　　` 　 ,／ヽ: : |
　 ,|:　 　/　/ ` -/､＿　　　＿,,,,,...　　 　, ,　 '　　　ヾ: :|
　 i: : :　 !　　　 　ヾ`ー､-､_,,,-､,,,_,,....　　　　　　　　　　i
　 i: :　　|　　　　　　 　 `ー|lヾ|　 「|,,-‐"　　　　　ヾ　　 |
　　|: : 　i 　　　　　 　　　　`ｰ'~（(　)）　　　　　　　､　;:　ヽ
　　,!: : : ;:　　　　　　　 　　　　　 ,∩､　　　　　ヾ　　　,:　:: i
　/:: : :.　;;　　　　　　　 　　　　　,! 　 !　　　　　　　　.,,　: : :.i､
　i: : : :ﾞ 　､　　　　　　　 　　　　　￣　　　　　　　､ ノ　: : : ::.|
　i: : : : :... 　 ､　　 　　　　　　　　　　　　　　　　､　 .＿,,..: : :.i
　 ＼: : : : ...　: :ﾞ　 -　 ､､　　　　　　　　　　　_,,,-ｰ":: : ::::_,ノ
　　　 `ー---､､＿＿＿,,- `ー----―､''_'"":::　::＿,,, -'"



こんな感じになります。


CSSは間違えるととんでもないことになるので、必ず控えを取ってから、自己責任でやるようにしてくださいね。
最悪レイアウトが崩れたときは、他のテンプレ等に変えると元に戻る場合がほとんどですが、すべてのブログサービスがそのようになってるかどうかはよくわかりませんのでね。。。