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