ブログなどでAA(アスキー・アート)を貼る時には、ちょっとした注意点が必要です。
それは、フォント指定しないとAAがズレてしまう点。
大概のAAは『MS Pゴシック』で作られている為、その他のフォントをブログに設定しているとAAがズレて表示されてしまい、何が何だか分からないAAになってしまいます。
以下は実際にズレたAA画像やその対処法など。
私はブラウザは『メイリオ』で設定しており、ブログのbodyには『Lucida Grande, Verdana, Arial, Sans-Serif』をCSSで指定しています。
そのまま表示すると以下のようになります。
これをAAに対してだけフォント指定すると、以下のようになります。
表示の指定する方法は、CSSで設定しています。
フォントの大きさによって『line-height』(行間隔)も指定しておくと、キレイに表示されます。
style.css
.aa {
font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
line-height: 14px;
}
HTML
<span class="aa">=─‐\\‐ /─'''''ニ二\''' |レレゝゝ、\
 ̄く<<く >, ゙、/<三三二\ ̄\ゝゝゝゝゝゞ''ヽ、
<<<<〈__入 ゙、く彡三三三二ヽくゝ\メメメゝ、_ゝ、\
くく<<<<<< ゙、 ゙、ミ三三二ニ─ゝゝゝゝゝ,,,,,,,、 '( ゙''ヽ、ヽ、
くくくくくく彡‐ヽ ゙、ミ三三二ニ'''くくゝゝ_ゝゝ、\\_,>」ノ,
く く く く く 彡゙、゙、三三二ニ‐くゝ、/ ,,,,,,,,メメゝヽ''''"ゝゞ丶、
二─二二彡彡、゙、三三二==くメゝ/ ゙'ヽ、メゝゝゝゝゝゝゞ''ヽ-、,,,,,,_
‐'''" ̄ \彡彡ミ、゙、三二=''"く<メ/:: \''-、メメゝゝゝ_ゝ 、 ,,、ヽヽ
、 ,,,,- ゙彡//ヾ、三二= くゝ/:::.... \>∠レ-,-‐ニ二メヽ''ヽ ノ
゙ヽ、,,,-‐//_///,,、゙、三二= ゙、 ""''' ヽ>//レレヽ,,___ /
-,,,,,,-‐'''"""/////,,ヽ ゙、三二─ ゙ヽ. //-ヘヘ,、 レレレレノ さあ願いを言え
'" ,l|"////ノ,、\彡'''''‐-ニ,、 ::::::::::,,,,,,,,// ゙ヽフ/|/| レ' どんな願いも聞き流してやろう。</span>
実際の表示。
 ̄く<<く >, ゙、/<三三二\ ̄\ゝゝゝゝゝゞ”ヽ、
<<<<〈__入 ゙、く彡三三三二ヽくゝ\メメメゝ、_ゝ、\
くく<<<<<< ゙、 ゙、ミ三三二ニ─ゝゝゝゝゝ,,,,,,,、 ‘( ゙”ヽ、ヽ、
くくくくくく彡‐ヽ ゙、ミ三三二ニ”’くくゝゝ_ゝゝ、\\_,>」ノ,
く く く く く 彡゙、゙、三三二ニ‐くゝ、/ ,,,,,,,,メメゝヽ”””ゝゞ丶、
二─二二彡彡、゙、三三二==くメゝ/ ゙’ヽ、メゝゝゝゝゝゝゞ”ヽ-、,,,,,,_
‐”’” ̄ \彡彡ミ、゙、三二=””く<メ/:: \”-、メメゝゝゝ_ゝ 、 ,,、ヽヽ
、 ,,,,- ゙彡//ヾ、三二= くゝ/:::…. \>∠レ-,-‐ニ二メヽ”ヽ ノ
゙ヽ、,,,-‐//_///,,、゙、三二= ゙、 ”"”’ ヽ>//レレヽ,,___ /
-,,,,,,-‐”’”"”/////,,ヽ ゙、三二─ ゙ヽ. //-ヘヘ,、 レレレレノ さあ願いを言え
‘” ,l|”////ノ,、\彡””’‐-ニ,、 ::::::::::,,,,,,,,// ゙ヽフ/|/| レ’ どんな願いも聞き流してやろう。






