_,.-.:.:.:^ヽ.‐-...､.._
,.-'´:.:.:.:.:.:.:.:.:.:.）'^:.ｰ､:.:.｀''ｰ､
,r'ｧ´:.;.;r'´;.-.:,､.:,´:.:.:.:.:.:.｀:.:.:.:.:-ヽ
. ,':.;ｨ'/:.:/／ヽL|:.:.l:.:.:.:.:.:.:.:.:.:.:.:.:.:.｀ヽ.
|/i':.;l.:/l〈 /:./:.:.:.:,!:.:.:.:.:.:.:.:.:.:.:.:.:.:ﾞ、
l/|ﾘ/_.| /／!:.:.:/:.:.:.:.:,!:.:.:.:.:.:.:.:.:.:.:.l.
V 似 '＜/_／!:./:.:.;/:.:.:.:.:.:.:.:.:.:.:.:.|
/ _ノ Zヽ｀7ｲ:.:,/:.:,:.:.:.:.:.:.:.:.:.:.:.:,!
| l ｀¨´ /;／:.:.;/.:.;.:.:.:.:.:.:.:.:.:/
| r､ ´ /..-Z-く:.:.:.:.:.:.:.:./
| ､ ｀ヽ ´ ノ7,. /:.:.:.:.:,:.;/
l ｀¨′ _,.二r;‐' ィ／/'′
ヽ､＿ ＿,.. ´ ｹ,!ヽ､
__.......-‐::´／::〉、 ／ ,/:::::|::::ヽ、
r::７::::::::::::::::::/:::::/ ヽ ／ /::::::::|::::::::::＼
|
ん、ああ。入部希望者かな？ 入部届け、持ってきたかい？
え？ ＳＯＳ団団長にこっちに来るように言われた？ ああ、そう……。
じゃあ、教えるよ。ウェブページやブログでアスキーアートをきれいに載せる方法を。
最近、アスキーアートを使っててもフォントが正しくなかったり、行間がありすぎて縦に伸ばしてしまっている人とかいるからね。
最初に確認しておくけれど、アスキーアートは一定の規定に沿って作られている。それを再現しない環境では、ずれてしまったり崩れたりする。環境を整えるのは簡単だ。下記のタグでアスキーアートをはさめばいい。
<div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック';">
</div>
|
これはスタイルシートと言う種類のタグで、これひとつで行間、フォントサイズ、利用するフォントを指定している。<div> から </div> の間にアスキーアートを挟めば、きれいに表示されるよ。
ウェブページ使用例
<div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック'; ">
||<br>
<br>
※<br>
<br>
||<br>
<br>
||<br>
○<br>
||<br>
ivｖvi<br>
l_, ,_j<br>
,i^l,<br>
,i! ﾞl,<br>
. ,i! .D. ﾞl,<br>
. ,i! I ﾞl,<br>
_,i! E ﾞ!,_<br>
. ﾞｌ,i!ﾞ￣￣￣ﾞｌ,i!"<br>
</div>
|
ブログ使用例
<div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック';">
||
※
||
||
○
||
ivｖvi
l_, ,_j
,i^l,
,i! ﾞl,
. ,i! .D. ﾞl,
. ,i! I ﾞl,
_,i! E ﾞ!,_
. ﾞｌ,i!ﾞ￣￣￣ﾞｌ,i!"
</div>
|
ただ、ブログのようなプログラムによってページを作成している場合、タグの改行をそのまま改行に変換してしまうから、上下の間隔は実際に試してみて確認してくれ。改行をタグに変換しないなら、まあそのまま使えるけれどね。これはたまにしかアスキーアートを使わない人向けかな。
あと、このタグでアスキーアート以外のものも一緒にはさむと、デザインとしてバランスが悪くなってしまうことがある。特にブログでは致命的になることがあるから注意が必要だ。
また、CSS をいじれるなら、そっちに下記の条件を書きこんで利用してもいい。
.AA
{
line-height: normal;
font-size: 12pt;
font-family: 'ＭＳ Ｐゴシック';
}
|
CSS の最後にでも書き込んでおくといい。書き込んだら、下記のタグでアスキーアートをはさむんだ。
これで、アスキーアートをきれいに表示することができるよ。こっちはアスキーアートを多用する人向けだね。簡単に環境を再現できる。
あともうひとつ。面倒だけれど、アスキーアートはソースからコピーしたものでなければ、そのままでは使えないことがある。< や > 、& の文字は、ウェブページを形作るルール上、そのままでは使えないんだ。だから、これらの文字はページを作る際に変換しなくてはならない。検索置換を使うといいだろう。
< は < に。
> は > に。
& は & に。
|
これを省略すると、アスキーアートの一部がページを形作るタグであると認識されて、ブラウザ上では表示されずに消えてしまうことがある。気をつけるといい。
ここからはもう少しアスキーアートをうまく使いたい人向けの説明だ。聞いて置いて損はないかもね。
アスキーアートの形を崩さず、ページの左側、または中央、または右側に表示したい場合は、テーブルタグ <table> を使う。
<table align="center">
<tr><td>
<div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック';">
</div>
</td></tr>
</table>
|
ウェブページ使用例
<table align="center">
<tr><td>
<div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック';">
＿ _,,ｨ‐z､<br>
卞''ｰ-=,,;r'''´ヽ｀ヾ､／ |<br>
l. ｀＞' ﾆ う|＜ ﾞヽ._ﾉ<br>
ヽ､/ ￣ ＼<br>
/ ｀''ｰ' ｀ｰ''´ .ヽ<br>
i.＿_ ◯ ○ =二}<br>
ト-‐‐ 'ｰﾋﾗ‐' ー-ﾉ<br>
ヽ/.）~ ,,r'<br>
ゝﾐﾆTirｰ----‐ｒ仁ヽ<br>
ｆ⊂⊃=⊂⊃(ノ<br>
. ヾﾆ丈才ﾗ<br>
｀＞ 〉 /_<br>
└ｰ'ﾞ''‐┘<br>
</div>
</td></tr>
</table>
|
ブログ使用例
<table align="center"><tr><td>
<div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック';">
＿ _,,ｨ‐z､
卞''ｰ-=,,;r'''´ヽ｀ヾ､／ |
l. ｀＞' ﾆ う|＜ ﾞヽ._ﾉ
ヽ､/ ￣ ＼
/ ｀''ｰ' ｀ｰ''´ .ヽ
i.＿_ ◯ ○ =二}
ト-‐‐ 'ｰﾋﾗ‐' ー-ﾉ
ヽ/.）~ ,,r'
ゝﾐﾆTirｰ----‐ｒ仁ヽ
ｆ⊂⊃=⊂⊃(ノ
. ヾﾆ丈才ﾗ
｀＞ 〉 /_
└ｰ'ﾞ''‐┘
</div>
</td></tr></table>
|
テーブルタグはウェブページ上でセルを形成するタグだ。これで中のアスキーアートは崩れない。あとは、属性の align="" で位置を決める。align="left" なら右側、 align="center" で中央、 align="right" で右側と指定可能。試してみるといい。ブログでやる場合は改行上の注意が必要かもしれないし、物によっては備え付けのものがあるかもしれない。いろいろと試してみてくれ。
＿＿,.k'" "''''----､
／: : : : : :-=､:::/: : : : : : : : : : : :ヽ､
. ／: : : : : : : : : : ヽ、: _: : : : : :.､ ヽ ヽ
／:: : : : : : : /: : : : ,､: :.}:> ヽ. . . :ヽ: :.､ ヽ:ヽ
/:::: : :.:/: : ::.{'' ' {' ' {:::ヽ|/:::>::}: ヽ: :ヽ:.ヽ:.ヽ:k
./ ''''' ' ''{ . ....{::: ::{::.: {-''''-""ヽ1::: 1:: l: : 1:: l ､1
{ ...l.....:::|:. : l:::1:.: :l､:::{ . 1l 、l┤|::.: :l､:l \
.{...l:::{::::::::k::.: :l::.l ､:::{ヽ:ヽ _,>|"l:/.ヾ1:: }.|.l|
{::|::::{:::::::ヽ:::::{,,h-ヽl--ヽ''" _／''""' l:/^､
{:{:::ヽ::l:::::>､::l ~,.-->-,､ ヽ.ll__,,..l.l\", } 誰か、僕のちびキャラＡＡを作ってくれ！
.\1:ヾ､l::､::ヽヾ/ lll ._| .l " .' l/./
ヽヽ>__'ﾐ,ヽ:ヽ--'''' ヽ l^ コンピ研の自作オンラインゲーム、
l: :,lヽ､: : . ' ,, /ヾ.､ 「 THE DAY OF SAGITTARIUS 」
''-,,,,^ ,､::::j . ,--'''''"" } / l ヽヽ、もよろしく頼むよ！
| l .::::::ヽ::::.. { ヾl / l }ヽ ヽ、
{ | :::::::::::::>､_::.. ヾ､__,,,-'''ノ // / }''ヽ ヽ、
ヽl ::::::::::/:::::{ヽ-,,,_"''''''"- ／ / | l ヽ、
.ヾ:::,:::::|::::::| .ヽ::::~^---" / } ＼
|
|
