ブログでAAを貼る時の注意点

『ブログでAAを貼る時の注意点』をはてなブックマーク この記事をクリップ! この記事をTwitterでつぶやく

やる夫ブログなどでAA(アスキー・アート)を貼る時には、ちょっとした注意点が必要です。

それは、フォント指定しないとAAがズレてしまう点。

大概のAAは『MS Pゴシック』で作られている為、その他のフォントをブログに設定しているとAAがズレて表示されてしまい、何が何だか分からないAAになってしまいます。
以下は実際にズレたAA画像やその対処法など。


私はブラウザは『メイリオ』で設定しており、ブログのbodyには『Lucida Grande, Verdana, Arial, Sans-Serif』をCSSで指定しています。
そのまま表示すると以下のようになります。
AA - 神龍

これをAAに対してだけフォント指定すると、以下のようになります。
AA - 神龍
表示の指定する方法は、CSSで設定しています。
フォントの大きさによって『line-height』(行間隔)も指定しておくと、キレイに表示されます。
style.css

.aa {
  font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  line-height: 14px;
}

HTML
<span class="aa">=─‐\\‐  /─'''''ニ二\''' |レレゝゝ、\
 ̄く<<く >, ゙、/<三三二\ ̄\ゝゝゝゝゝゞ''ヽ、
<<<<〈__入 ゙、く彡三三三二ヽくゝ\メメメゝ、_ゝ、\
くく<<<<<< ゙、 ゙、ミ三三二ニ─ゝゝゝゝゝ,,,,,,,、 '( ゙''ヽ、ヽ、
くくくくくく彡‐ヽ ゙、ミ三三二ニ'''くくゝゝ_ゝゝ、\\_,>」ノ,
く く く く く 彡゙、゙、三三二ニ‐くゝ、/ ,,,,,,,,メメゝヽ''''"ゝゞ丶、
二─二二彡彡、゙、三三二==くメゝ/   ゙'ヽ、メゝゝゝゝゝゝゞ''ヽ-、,,,,,,_
‐'''" ̄ \彡彡ミ、゙、三二=''"く<メ/::      \''-、メメゝゝゝ_ゝ 、 ,,、ヽヽ
、  ,,,,- ゙彡//ヾ、三二= くゝ/:::....      \>∠レ-,-‐ニ二メヽ''ヽ ノ
 ゙ヽ、,,,-‐//_///,,、゙、三二=  ゙、 ""'''      ヽ>//レレヽ,,___  /
-,,,,,,-‐'''"""/////,,ヽ ゙、三二─ ゙ヽ.         //-ヘヘ,、 レレレレノ  さあ願いを言え
'"      ,l|"////ノ,、\彡'''''‐-ニ,、 ::::::::::,,,,,,,,//    ゙ヽフ/|/| レ'  どんな願いも聞き流してやろう。</span>

実際の表示。
=─‐\\‐  /─””’ニ二\”’ |レレゝゝ、\
 ̄く<<く >, ゙、/<三三二\ ̄\ゝゝゝゝゝゞ”ヽ、
<<<<〈__入 ゙、く彡三三三二ヽくゝ\メメメゝ、_ゝ、\
くく<<<<<< ゙、 ゙、ミ三三二ニ─ゝゝゝゝゝ,,,,,,,、 ‘( ゙”ヽ、ヽ、
くくくくくく彡‐ヽ ゙、ミ三三二ニ”’くくゝゝ_ゝゝ、\\_,>」ノ,
く く く く く 彡゙、゙、三三二ニ‐くゝ、/ ,,,,,,,,メメゝヽ”””ゝゞ丶、
二─二二彡彡、゙、三三二==くメゝ/   ゙’ヽ、メゝゝゝゝゝゝゞ”ヽ-、,,,,,,_
‐”’” ̄ \彡彡ミ、゙、三二=””く<メ/::      \”-、メメゝゝゝ_ゝ 、 ,,、ヽヽ
、  ,,,,- ゙彡//ヾ、三二= くゝ/:::….      \>∠レ-,-‐ニ二メヽ”ヽ ノ
 ゙ヽ、,,,-‐//_///,,、゙、三二=  ゙、 ”"”’      ヽ>//レレヽ,,___  /
-,,,,,,-‐”’”"”/////,,ヽ ゙、三二─ ゙ヽ.         //-ヘヘ,、 レレレレノ  さあ願いを言え
‘”      ,l|”////ノ,、\彡””’‐-ニ,、 ::::::::::,,,,,,,,//    ゙ヽフ/|/| レ’  どんな願いも聞き流してやろう。


カナ速
カ ワ イ イ A A 張 っ て

コメントを書く

Name

E-Mail

Website address