アスキーアート(AA)を綺麗にブログに貼る方法

今回は、アスキーアート(AA)を綺麗にブログに貼る方法を
自分のためにメモしておきたいと思います。

というか、↓のエルカザドのアスキーアートをブログに
貼りたかっただけなんですけどね。

　●マンガ総合AA保管庫 - エル・カザド

　●マンガ総合AA保管庫 - エル・カザド (その２)

　　　　　　　　　　　　 ,　:' r―
　　　　　　　　 　　 ／　　 }　 ＼　　　　　　 　 　 　 ＼
　　　　　　　 　 　/　　　 ,_l　　　l　　　　　　　　　　　　ヽ
.　　　　 　 　 　 /　　 / /. l　　　l 　 l　　　　　　　　　　　',
　 　 　 　 　ト-/　　 / /　 l　　　　　l l　　　　l l　 　 　 　 l
　　　 　 　 ／/　/ ./ /　　.l　ｌ　　　 li l　　 　 l:l 　　. :l:　　l
　 　 　 　 / :/　.ｌ　l斗 ' ￣ l :l 　 ､　lヽl　ヽ　 l　　　. :l　　 ヽ
.　　　 　 f l //　l l l lr=‐-､ l ﾊ　　 T'‐ﾄt_ ヽ .l　　 . : l　＼　 `ー―ｧ
　　　　　 ∨ｲ　 l :ｌ|l ! f:し:i　l　l l　 ﾑ==､ﾄヽV　　. : :/:　＼＼-‐ '
　　　　　　l ﾊ　. | ｌl 　 ヒﾂ　　 l l ./f:しﾍヽ y　　 . :/＼: : . ＼ ＼
　　　　　　V l　: :ｌ |　　　 　,　　 ﾚ　ﾋ;::::ﾉ '//　 . :/l : : }: : : 　 i 　}
　　　　　　　 |.「.vﾍ!　 　 　　　　　　　｀ .//　 . :/ ﾉ:／r‐　:　 j　/
　　　　　　　 l.l　 l {.＼　　 'ｰ- 　 　 　 /ｲ . :∠／' : : {　 __／／
　　　　　　 　 |　 |　),ｲ＼　　　　　　／/　／: : : : : : : ﾄ､ (￣
　　　　　　 ／l　 lr‐.,==‐:＞.- ‐ .＜´/,ィ__: : lィ: ∠__ノ_ﾉノ
　　　 _, / /　ﾉ　 l>/　/ .:.:ﾉ　　 r―く,ム> l__ゝヽゝ
　　f７ 　 　 　 　 V　.f-‐'　　 /_ﾊ: : : : : :.:.:{
　 < l　　　　　　　|　 j　 __r ': : :.:.:.l: : : .:.／ヽ
　/くl　 　 　 　 　　 /　　 ｌ イ￣´└‐ へ; : : ヽ _
./ <:l 　 　 　 　 　 /　　　l: :l :／: : : : : : : :＞ ､: : ＞､
　 く:l　　 　 　 　 ∧　／/: /: : : : : : : : :／:／￣　 　 ヽ

参考にしたサイト

ネットで調べたところ、以下の２つからだいたいの方法がわかりました。

●教えて！goo ブログでAA（アスキーアート）をきれいに表示したい

●大木社長のブログ : ExブログにAA（アスキーアート）をズレずに貼る方法が判明

私が考える結論としては、
・『line-height:100%;』がポイントとなっている。
・フォントの指定もしておくと良い。
・AAの大きさの調節には、フォントサイズの指定も有効。

以下、いくつか実験した結果。

利用しているブログやサイトでの設定やページを表示するブラウザなどによって、
アスキーアートの表示も違ってくるかもしれませんが、
以下はいくつかのパターンを試してみた結果です。

◆そのままコピペして貼った場合◆
　 　 　 　 　 　 _
　　　　　　　　ﾉ |_ 　 ll__l---||＿　　　　Nice boat.
　　　　　　rj「ｌ＿_｀ｰ'　 ヽｌーｊ　 L---┐
　　　　　 |―┴┴―｀ｰｒｭ-‐<￣.ｨｊ .__ｊｌ
　　　　　 |[][][][][][] i　""" _..,,ｒr=''´　l
　　　　　 l￣￣￣￣/7-‐'´　　　 　／
　　　f　 ｊL-､ ＿-‐'　　　　　 -‐´~~
　　　ヽ |　￣　　＿ｊ＿ -‐'~´~~
　　　　 ｀ー〜´~~~~

↑アスキーアートによってはひどく崩れます。

◆<p style="line-height:100%;">アスキーアート</p> とした場合。◆

　 　 　 　 　 　 _
　　　　　　　　ﾉ |_ 　 ll__l---||＿　　　　Nice boat.
　　　　　　rj「ｌ＿_｀ｰ'　 ヽｌーｊ　 L---┐
　　　　　 |―┴┴―｀ｰｒｭ-‐<￣.ｨｊ .__ｊｌ
　　　　　 |[][][][][][] i　""" _..,,ｒr=''´　l
　　　　　 l￣￣￣￣/7-‐'´　　　 　／
　　　f　 ｊL-､ ＿-‐'　　　　　 -‐´~~
　　　ヽ |　￣　　＿ｊ＿ -‐'~´~~
　　　　 ｀ー〜´~~~~

↑ boatの一番右側の線が揃っていません。

◆<div style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;line-height:100%;">
　アスキーアート
　</div> とした場合。◆

　 　 　 　 　 　 _
　　　　　　　　ﾉ |_ 　 ll__l---||＿　　　　Nice boat.
　　　　　　rj「ｌ＿_｀ｰ'　 ヽｌーｊ　 L---┐
　　　　　 |―┴┴―｀ｰｒｭ-‐<￣.ｨｊ .__ｊｌ
　　　　　 |[][][][][][] i　""" _..,,ｒr=''´　l
　　　　　 l￣￣￣￣/7-‐'´　　　 　／
　　　f　 ｊL-､ ＿-‐'　　　　　 -‐´~~
　　　ヽ |　￣　　＿ｊ＿ -‐'~´~~
　　　　 ｀ー〜´~~~~

↑これなら、きれいに線が揃っているかな。

◆<div style="font-family:'ＭＳ Ｐゴシック';font-size:8pt;line-height:100%;">
　アスキーアート
　</div> とした場合。◆

　 　 　 　 　 　 _
　　　　　　　　ﾉ |_ 　 ll__l---||＿　　　　Nice boat.
　　　　　　rj「ｌ＿_｀ｰ'　 ヽｌーｊ　 L---┐
　　　　　 |―┴┴―｀ｰｒｭ-‐<￣.ｨｊ .__ｊｌ
　　　　　 |[][][][][][] i　""" _..,,ｒr=''´　l
　　　　　 l￣￣￣￣/7-‐'´　　　 　／
　　　f　 ｊL-､ ＿-‐'　　　　　 -‐´~~
　　　ヽ |　￣　　＿ｊ＿ -‐'~´~~
　　　　 ｀ー〜´~~~~

↑フォントサイズを小さくしてみただけ。

追記 (2008年3月21日更新)

●ブログにAAをずれないように貼る方法

font-sizeよりもline-heightを少し大きめにしておき、かつ、font-familyもいくつか指定しておく方法もあるようです。

以上。

　　　　　　　　　　　　　/＼＿＿　　　　_. ィ
　　　　　　　　 _.　-　.:.{　　ヽ.:.:.:.:.:.＞' ´　/
　　　　　　　／.:.:.:.:.:.:.:.:ｌ　　　'. :.:./　　　, '｀丶、
　　　　　　/.:.:.:.:.:.:.:.:.:.:.:.ヽ、　 Y⌒) _.ノ_:.:.:.:.:.:.:.＼
　　 　 　 /.:.:.:.:.:.:.:.:j.:＞ ´ .｀-−…−- ｀ く :.:.:.:.:.:ヽ
.　　　　 / :.:.:.:.:.:.:.:.:|,　ィ ´.:.:.:.:.:.:/ﾄ､:.:.:.:.:.:.:.｀`.:.:.:.:.:.∧
　　　　 ′ :|:.:.:.:.:.:.:|:.:/.:.:.:.:.:.|:.:./ |　'.:.:.:.|:.:.:.:.:.:.:.:.:.:.:.:∧
　 　 　 |:.:.:.:|:.:.:.:.:.:.:|/.:.:.:.:.:.:/.:/　,!　 '.:.:.|､:.:.|.:.:.:.|:.:.:.:.:∧
　 　 　 |:.:.:.:|:. ∧:.:.|:.:.:.:.／'.:/,　/　　 '.:.| '. :|.:.:.:.|:.:|:.:.:.:∧
　 　 　 |:.:.:.:|:.:l.　ｌ:.:|:.≠-ｧＺ'´　　　`ﾆﾏﾆ｢:ハ:.:.|:.:| :.:.|:.:.'.
　 　 　 |:.:.:.:|:.: ｰ':.:.|',ｨ'´/'_　　　　　　｣ﾉ｀lﾒ.　}:.:|:.:| :.:.|:.:.:|
　 　 　 |:.:| :.'. :.:.:.:.: l{　ト'ハ 　 　 　 ト'ハ' ﾘ /|∧.| :.:.l＼|
　　　　 ヽ||:.:.'.:.:.:.:.:.!　弋_り　　　　 弋_り　 ﾑｨ.:.:.ハ:.:|
　　　　 　 |:.:. '.:.|.:.:.|ヽ. 　 　 r─−‐､　　 ノ、|:.:/　|:/
　　　　 　 ∨:|ﾊ|ﾍ.:|　 ＞　._|　 ___　 |‐ ´ 　 ヽ/　 l.′　携帯メールで好きなAAを使いたいけど、
　　　　　　 ヽﾊ.　 ヽ　　　 ', |　 冂|　|　　　　, ﾍ　　　　　　パソコン用の大きいAAしかなくて使えないよー。
　　　　　　　 |　＼　　　 　 ｜　〒'　|、　 ／　 |　　　　　　　　どうしたらいいのかなー。
　　　　　　　 |　　 ＼　　,. '´|　ｆ,ユ...」 ヽ'　　　｜

---

School Days 第2巻(初回限定版)

posted with amazlet on 07.10.18

AVEX GROUP HOLDINGS.(ADI)(D) (2007/10/31)
売り上げランキング: 278

おすすめ度の平均:

プレイボーイの男が視るべき作品
「なぁ世界・・・言葉の相手するのって（ry」
いびつな三角形。〜タイトルが泣いている〜

Amazon.co.jp で詳細を見る

らき☆すた ５ 限定版

posted with amazlet on 07.10.18

角川エンタテインメント (2007/10/26)
売り上げランキング: 19

おすすめ度の平均:

ドモン・カッ・・・アニメ店長襲来
ジャケットがwwwwwww
息抜きになります。

Amazon.co.jp で詳細を見る