WordPressでAAをきれいに表示してみたい

2007年4月25日

なんか適当なプラグインはないかと探してみたけれど、やっぱりそんなものはないようなので、きれいに表示するためのCSS設定を探してみた。

[を] chalow でアスキーアートを表示するためのプラグイン を見ると、AAとして表示したい部分を

<div style='font-size:12pt;line-height:18px;font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","MS Pゴシック","MS Pゴシック","MS Pゴシック",sans-serif;'> </div>

でくくってやるときれいに出るみたいなので、そいつをAdd Quicktagsに追加してやりました。

テスト:クマー

   ∩___∩
   | ノ      ヽ
  /  ●   ● | クマ──!!
  |    ( _●_)  ミ
 彡、   |∪|  、`\
/ __  ヽノ /´>  )
(___)   / (_/
 |       /
 |  /\ \
 | /    )  )
 ∪    (  \
       \_)

テスト:ポルナレフ

         ,. -‐""'""¨¨¨ヽ
         (.___,,,… -ァァフ|
          |i i|    }! }} //|
         |l、{   j} /,,ィ//|
        i|:!ヾ、_ノ/ u {:}//ヘ
        |リ u’ }  ,ノ _,!V,ハ |
       /´fト、_{ル{,ィ’eラ , タ人
     /’   ヾ|宀| {´,)⌒`/ |< ヽトiゝ     ,゙  / )ヽ iLレ  u' | | ヾlトハ〉      |/_/  ハ !ニ⊇ '/:}  V:::::ヽ     // 二二二7'T'' /u' __ /:::::::/`ヽ    /'´r -―一ァ‐゙T´ '"´ /::::/-‐  \    / //   广¨´  /'   /:::::/´ ̄`ヽ ⌒ヽ   ノ ' /  ノ:::::`ー-、___/::::://       ヽ  } _/`丶 /:::::::::::::::::::::::::: ̄`ー-{:::...

テスト:ちゅるやさん

             -‐ '´ ̄ ̄`ヽ、
             / /" `ヽ ヽ  \
         //, '/     ヽハ  、 ヽ
         〃 {_{ノ    `ヽリ| l │ i|
         レ!小l●    ● 从 |、i|
          ヽ|l⊃ 、_,、_, ⊂⊃ |ノ│   にょろーん
        /⌒ヽ__|ヘ   ゝ._)   j /⌒i !
      \ /:::::| l>,、 __, イァ/  /│
.        /:::::/| | ヾ:::|三/::{ヘ、__∧ |
       `ヽ< | |  ヾ∨:::/ヾ:::彡' |

使用したアスキーアートは

AsciiArtHeadline あのAAきぼんぬDB で探させていただきました。

気づいたこと

WordPressのオプション→投稿設定内の「不正な XHTML 構文を自動的に修正する」がチェックされていると、AAによっては余計なタグが追加されることがあるので、オフにしておかないとレイアウトが崩れるみたいですね。XHTML的に正しくなくなるのは気持ち悪いかな……。

MovableTypeでは上手くいかない?

ああメモ帖 φ(..): AAをきれいに表示してみるテストからTrackBackをいただいたのですが、ちゅるやさんのAAが崩れてしまっているようです。
ソースを見ると崩れている方のAAでは行末に改行タグ<br />が入ってないので、それが理由なのは分かりましたが、原因がわかりません(^^;
WordPressだとテストのように上手く表示されるので、ちょっとした設定だとは思うのですけれど……。

と、コメントしようと思ったらエラーが出て届いたかどうか分からないので、こちらからもTrackBackしておきます。