なんか適当なプラグインはないかと探してみたけれど、やっぱりそんなものはないようなので、きれいに表示するためのCSS設定を探してみた。
[を] chalow でアスキーアートを表示するためのプラグイン を見ると、AAとして表示したい部分を
<div style='font-size:12pt;line-height:18px;font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","ＭＳ Ｐゴシック","MS Pｺﾞｼｯｸ","MS Pゴシック",sans-serif;'> </div>
でくくってやるときれいに出るみたいなので、そいつをAdd Quicktagsに追加してやりました。
テスト:クマー
∩＿＿＿∩
| ノ ヽ
/ ● ● | クマ──！！
| ( _●_) ミ
彡､ |∪| ､｀＼
/ ＿＿ ヽノ /´> )
(＿＿＿） / (_／
| /
| ／＼ ＼
| / ) )
∪ （ ＼
＼＿)
| ノ ヽ
/ ● ● | クマ──！！
| ( _●_) ミ
彡､ |∪| ､｀＼
/ ＿＿ ヽノ /´> )
(＿＿＿） / (_／
| /
| ／＼ ＼
| / ) )
∪ （ ＼
＼＿)
テスト:ポルナレフ
,. -‐””'””¨¨¨ヽ
(.＿＿_,,,… -ｧァﾌ|
|i i| }! }} /／|
|l､{ j} /,,ｨ//｜
i|:!ヾ､_ﾉ／ u {:}//ﾍ
|ﾘ u’ } ,ﾉ _,!V,ﾊ |
／´fト､_{ﾙ{,ィ’ｅﾗ , ﾀ人
/’ ヾ|宀| {´,)⌒`/ |< ヽﾄiゝ ,ﾞ ／ )ヽ iLﾚ u' | | ヾｌﾄﾊ〉 |／_／ ﾊ !ニ⊇ '／:} V:::::ヽ /／ 二二二7'T'' ／u' __ /:::::::/｀ヽ /'´r -―一ｧ‐ﾞＴ´ '"´ ／::::／-‐ ＼ / // 广¨´ /' ／:::::／´￣｀ヽ ⌒ヽ ﾉ ' / ノ:::::`ー-､___／:::::／/ ヽ } _／｀丶 /::::::::::::::::::::::::::￣`ー-{:::...
(.＿＿_,,,… -ｧァﾌ|
|i i| }! }} /／|
|l､{ j} /,,ｨ//｜
i|:!ヾ､_ﾉ／ u {:}//ﾍ
|ﾘ u’ } ,ﾉ _,!V,ﾊ |
／´fト､_{ﾙ{,ィ’ｅﾗ , ﾀ人
/’ ヾ|宀| {´,)⌒`/ |< ヽﾄiゝ ,ﾞ ／ )ヽ iLﾚ u' | | ヾｌﾄﾊ〉 |／_／ ﾊ !ニ⊇ '／:} V:::::ヽ /／ 二二二7'T'' ／u' __ /:::::::/｀ヽ /'´r -―一ｧ‐ﾞＴ´ '"´ ／::::／-‐ ＼ / // 广¨´ /' ／:::::／´￣｀ヽ ⌒ヽ ﾉ ' / ノ:::::`ー-､___／:::::／/ ヽ } _／｀丶 /::::::::::::::::::::::::::￣`ー-{:::...
テスト:ちゅるやさん
-‐ ‘´￣￣｀ヽ､
／ ／” ｀ヽ ヽ ＼
//, ‘/ ヽﾊ ､ ヽ
〃 {_{ノ ｀ヽﾘ| ｌ │ i|
ﾚ!小ｌ● ● 从 |、i|
ヽ|l⊃ ､_,､_, ⊂⊃ |ﾉ│ にょろーん
/⌒ヽ__|ﾍ ゝ._） j /⌒i !
＼ /:::::| l＞,､ __, イァ/ /│
. /:::::/| | ヾ:::|三/::{ﾍ､__∧ |
｀ヽ< | | ヾ∨:::/ヾ:::彡' |
／ ／” ｀ヽ ヽ ＼
//, ‘/ ヽﾊ ､ ヽ
〃 {_{ノ ｀ヽﾘ| ｌ │ i|
ﾚ!小ｌ● ● 从 |、i|
ヽ|l⊃ ､_,､_, ⊂⊃ |ﾉ│ にょろーん
/⌒ヽ__|ﾍ ゝ._） j /⌒i !
＼ /:::::| l＞,､ __, イァ/ /│
. /:::::/| | ヾ:::|三/::{ﾍ､__∧ |
｀ヽ< | | ヾ∨:::/ヾ:::彡' |
使用したアスキーアートは
AsciiArtHeadline あのAAきぼんぬＤＢ で探させていただきました。
気づいたこと
WordPressのオプション→投稿設定内の「不正な XHTML 構文を自動的に修正する」がチェックされていると、AAによっては余計なタグが追加されることがあるので、オフにしておかないとレイアウトが崩れるみたいですね。XHTML的に正しくなくなるのは気持ち悪いかな……。
MovableTypeでは上手くいかない?
ああメモ帖 φ（．．）: AAをきれいに表示してみるテストからTrackBackをいただいたのですが、ちゅるやさんのAAが崩れてしまっているようです。
ソースを見ると崩れている方のAAでは行末に改行タグ<br />が入ってないので、それが理由なのは分かりましたが、原因がわかりません(^^;
WordPressだとテストのように上手く表示されるので、ちょっとした設定だとは思うのですけれど……。
と、コメントしようと思ったらエラーが出て届いたかどうか分からないので、こちらからもTrackBackしておきます。
コメント
コメント一覧 （2件）
AAをきれいに表示してみるテスト…
引用してるAAが盛大に崩れていたので、「WordPressでAAをきれいに表示し… (more…)
[…] WordPressでAAをきれいに表示してみたい | MOMENTS https://www.u-1.net/2006/10/28/389/ AAを見るための環境設定-しっぽのとこ- http://tail.s170.xrea.com/html/text/aa_promo/aa_setting/#style […]