スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



[ --/--/-- --:-- ] スポンサー広告 | トラックバック(-) | コメント(-)

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

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

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

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

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


             , :' r―
            /   }  \             \
           /    ,_l   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   . :l   ヽ
.      f l // l l l lr=‐-、 l ハ   T'‐トt_ ヽ .l   . : l \  `ー―ァ
      ∨イ  l :l|l ! f:し:i l l l  ム==、トヽV  . : :/: \\-‐ '
      l ハ . | ll   ヒツ   l l ./f:しヘヽ y   . :/\: : . \ \
      V l : :l |     ,   レ ヒ;::::ノ '//  . :/l : : }: : :   i  }
        |.「.vヘ!           ` .//  . :/ ノ:/r‐ :  j /
        l.l  l {.\   'ー-       /イ . :∠/' : : {  __//
         |  | ),イ\      // /: : : : : : : ト、 ( ̄
       /l  lr‐.,==‐:>.- ‐ .<´/,ィ__: : lィ: ∠__ノ_ノノ
    _, / / ノ  l>/ / .:.:ノ   r―く,ム> l__ゝヽゝ
  f7         V .f-‐'   /_ハ: : : : : :.:.:{
  < l       |  j  __r ': : :.:.:.l: : : .:./ヽ
 /くl           /   l イ ̄´└‐ へ; : : ヽ _
./ <:l           /   l: :l :/: : : : : : : :> 、: : >、
  く:l         ∧ //: /: : : : : : : : :/:/ ̄    ヽ



参考にしたサイト

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

教えて!goo ブログでAA(アスキーアート)をきれいに表示したい

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

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


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

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



◆そのままコピペして貼った場合◆
            _
        ノ |_   ll__l---||_    Nice boat.
      rj「l__`ー'  ヽlーj  L---┐
      |―┴┴―`ーrュ-‐< ̄.ィj .__jl
      |[][][][][][] i """ _..,,rr=''´ l
      l ̄ ̄ ̄ ̄/7-‐'´     /
   f  jL-、 _-‐'      -‐´~~
   ヽ |  ̄  _j_ -‐'~´~~
     `ー~´~~~~

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


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


            _
        ノ |_   ll__l---||_    Nice boat.
      rj「l__`ー'  ヽlーj  L---┐
      |―┴┴―`ーrュ-‐< ̄.ィj .__jl
      |[][][][][][] i """ _..,,rr=''´ l
      l ̄ ̄ ̄ ̄/7-‐'´     /
   f  jL-、 _-‐'      -‐´~~
   ヽ |  ̄  _j_ -‐'~´~~
     `ー~´~~~~



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


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

            _
        ノ |_   ll__l---||_    Nice boat.
      rj「l__`ー'  ヽlーj  L---┐
      |―┴┴―`ーrュ-‐< ̄.ィj .__jl
      |[][][][][][] i """ _..,,rr=''´ l
      l ̄ ̄ ̄ ̄/7-‐'´     /
   f  jL-、 _-‐'      -‐´~~
   ヽ |  ̄  _j_ -‐'~´~~
     `ー~´~~~~


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


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

            _
        ノ |_   ll__l---||_    Nice boat.
      rj「l__`ー'  ヽlーj  L---┐
      |―┴┴―`ーrュ-‐< ̄.ィj .__jl
      |[][][][][][] i """ _..,,rr=''´ l
      l ̄ ̄ ̄ ̄/7-‐'´     /
   f  jL-、 _-‐'      -‐´~~
   ヽ |  ̄  _j_ -‐'~´~~
     `ー~´~~~~


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

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


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

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


以上。



             /\__    _. ィ
         _. - .:.{  ヽ.:.:.:.:.:.>' ´ /
       /.:.:.:.:.:.:.:.:l   '. :.:./   , '`丶、
      /.:.:.:.:.:.:.:.:.:.:.:.ヽ、  Y⌒) _.ノ_:.:.:.:.:.:.:.\
       /.:.:.:.:.:.:.:.:j.:> ´ .`--…-- ` く :.:.:.:.:.:ヽ
.     / :.:.:.:.:.:.:.:.:|, ィ ´.:.:.:.:.:.:/ト、:.:.:.:.:.:.:.``.:.:.:.:.:.∧
     ′ :|:.:.:.:.:.:.:|:.:/.:.:.:.:.:.|:.:./ | '.:.:.:.|:.:.:.:.:.:.:.:.:.:.:.:∧
      |:.:.:.:|:.:.:.:.:.:.:|/.:.:.:.:.:.:/.:/ ,!  '.:.:.|、:.:.|.:.:.:.|:.:.:.:.:∧
      |:.:.:.:|:. ∧:.:.|:.:.:.:./'.:/, /   '.:.| '. :|.:.:.:.|:.:|:.:.:.:∧
      |:.:.:.:|:.:l. l:.:|:.≠-ァZ'´   `ニマニ「:ハ:.:.|:.:| :.:.|:.:.'.
      |:.:.:.:|:.: ー':.:.|',ィ'´/'_      」ノ`lメ. }:.:|:.:| :.:.|:.:.:|
      |:.:| :.'. :.:.:.:.: l{ ト'ハ       ト'ハ' リ /|∧.| :.:.l\|
     ヽ||:.:.'.:.:.:.:.:.! 弋_り     弋_り  ムィ.:.:.ハ:.:|
       |:.:. '.:.|.:.:.|ヽ.     r─-‐、   ノ、|:.:/ |:/
       ∨:|ハ|ヘ.:|  > ._|  ___  |‐ ´   ヽ/  l.′ 携帯メールで好きなAAを使いたいけど、
       ヽハ.  ヽ    ', |  冂| |    , ヘ      パソコン用の大きいAAしかなくて使えないよー。
        | \      | 〒' |、  /  |        どうしたらいいのかなー。
        |   \  ,. '´| f,ユ...」 ヽ'   |







コメントの投稿














管理者にだけ表示を許可する
プロフィール

あとねっくす

Author:あとねっくす
[メールアドレス]
atnexblogあっとまーくgmail.com



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。