微ニ入ルソウル～微ニ入ル・テク

ホーム＞美しき日々(I)＞

微ニ入ル・テク

技術に興味がない人は次の項目にジャンプ。

　今日はみなさんに珍しいものをお見せしましょう。
　『微ニ入ルソウル』サイト開設時（1999.02.03）の表紙です。
　ここをクリック。（中身へのリンクは切ってあります。中身はさすがに恥かしくて見せられない。）

　私も久しぶりに見たのですが、、、どうでしょうか、おおもとのところは変わっていないと言えそうです。
　今の表紙との共通点‥‥全体的に殺風景。俳句を大きく掲げている。その俳句の書体が同じである。二者択一で選んでもらうようになっている。あと何でしょう。「灰色のブロックを使っている」　私ってブロックフェチなのかな、もしかして。

【追記】上記「今の表紙」の代わりに、
アーカイブに保存されている物を利用して下さい。[2003-01]

　当時のコンセプトとしては、表紙がブロック塀になっていて、中がオンドル部屋をイメージした背景画像で、オンドル夜話みたいのが繰り広げられる、というものでした。（こんなサイトですけど、一応コンセプトは立てたわけです。）
　でも、いま改めて見てみると、画面一杯のブロック塀って冷たい感じがしますね。お金持ちの家の高い高い塀のよう。あるいは、刑務所の塀。
　そして、このサイトを見た人に「どんなサイトなのか分かりにくい」と指摘され、画面上の方に簡単な内容説明をつけることになったのでした。

　しかし何よりも、ＨＴＭＬソースを見てみると、技術的にずいぶんめちゃくちゃなことをしていたことが分かります。ホームページ作成ソフトを２種類も使っていたとは。（ソースを見るには、ブラウザの上の方の表示→ソースを選択すればＯＫです。）

　現在の表紙のソースを見てみましょう。ホームページを作り始めた人は色々参考にして下さい。ホームページ作成に興味がない人も適当に読んでいくと、「んまあ、杉山さんって、なんて細やかな神経を持った人なの！」ということがわかる具合になっています。技術に詳しい人は、チンチロリンでもしながら読んで下さい。

<TITLE>微ニ入ルソウル (-_-v</TITLE>

<META name="description" content="ソウル在住…（略）…">
<META name="keywords" content="韓国…（略）…">

タイトルは画面の最上部に表記される重要なもの。英文でつけるより日本語でつけた方が総合的には良いと思います。韓国語Ｗｉｎｄｏｗｓを使っている人にも日本語のタイトルは有効です。
２行目は、このページ作者への連絡先を書いたもの。（私自身、他の人のページをｃ：ドライブに保存したあと、そのサイトのＵＲＬがわからなくなってしまい不便なことが時々あるので。）　その後の部分は、検索ロボット用へサイト内容説明。

文字コード宣言文。日本語、韓国語の切り替えをしなくても見られるようにとの配慮。つけるつけないで一長一短はあるようですが、私の場合はつけた方がいいと思います。あ、x-sjisじゃなくて、Shift_JISって書いた方がいいのか…。

JavaScriptを多用しています。

ＹＥＳ、ＮＯの意味がわからない（英語がわからない）人のために、ブロックの色を変化させて○×を表示するシステム。ｔ秒遅れで変化させるのは、他の人に作ってもらいました。
ノンフレームを希望する人はノンフレーム用のページに飛ぶようにする。
クイズ正解者に「正解」と表示。
正解を出した瞬間に次のページに飛んでしまっては喜びに浸れないので、１秒ぐらい経ってから次のページに飛ぶように設定。
不正解者には、落胆しないように「がんばれ」のメッセージを出す。

以上をJavaScriptで実行しています。

スタイルシートで、リンクにアンダーラインをつけないようにしています。以前、アンダーラインのないリンクが混在していて、その名残です。

<BODY BGCOLOR="#ffffcc" TEXT="#003300" onload="if(top.frames.length>0){top.location.href=location.href}">
<BASEFONT SIZE=3 FACE="ＭＳＰ明朝,平成明朝">

背景色とテキスト色を指定しています。背景画像は色々な理由から貼っていません。背景画像をつけて、嫌がられることはあっても感謝されることはない。
onload以下は、フレーム内からこのページにリンクが張られた時、強制的にフレームを解除するものです。
BASEFONTの平成明朝はＭＡＣに対する配慮です。
自分で明朝を指定していて変なんですが、サイト上で明朝体を使う人って、活字メディアの呪縛から解き放たれていない人なのかもしれませんね。コンピュータでは明朝体は読みにくい、という人が結構いるんじゃなかったでしたっけ？

韓国発<B>「微ニ入ルソウル」</B>は韓国のアレコレを語るページです。 written in Japanese<br>
さらっと読んでおけば、いつか何かの役に立つことでしょう。＜↓今週の俳句＞<img src="../image/ani-tensi.gif" alt="" ALIGN=BOTTOM width=1 height=1><br>

written in Japanese は文字化けしている人への配慮です。このページではハングルが書いてある画像を使用しているので、誤解されないよう一応書いてあります。

<table BORDER=0 CELLSPACING=0 CELLPADDING=0 width=100% height=100>
<TR>
<TD><div ALIGN=CENTER style="width:100%; filter: Shadow(color=silver)"><NObr><FONT SIZE=7 FACE="HG正楷書体-PRO">都人<wbr>太鼓腹なり<wbr>影うらら</FONT></NObr></div></TD>
</TR>
</table>

俳句が美しく見えるようにいろいろ小細工しています。<NObr><wbr>で画面を小さくしても句が変なところで改行されないようにしています。（大文字小文字が入り乱れてますね。）

喜びを大きく感じてもらうため、画面に出る「正解」の文字を大きく（５０ピクセル）指定しています。

<TD><div ALIGN=CENTER><table BORDER=0 CELLSPACING=0 CELLPADDING=0 width=380 height=100 BACKGROUND="../image/plate-wood-l.gif">
<TR>
<TD VALIGN=MIDDLE onMouseOver="this.style.backgroundColor='#ffffcc'" onMouseOut="this.style.backgroundColor='#ffffcc'">
<div ALIGN=CENTER><B>問題：この句はソウルで作られた。<br>　</B></div>

…（略）…
show('id1');timerjump(); return false"><U>ＹＥＳ</U></A>　　　<A HREF="body.
…（略）…
img(54, 0)" onClick="newwindow();goURL(); return false"><U>ＮＯ</U></A></div></TD>
</TR>
</table></div></TD>

マウスが近づくと背景画像の木片が消えるように設定しています。クイズの問題に集中して取り組めるように、との配慮からです。

<TD ALIGN=RIGHT VALIGN=BOTTOM width=110>
<FORM NAME="nonfcheck"><INPUT NAME=testbox TYPE=checkbox><FONT SIZE=2>ノンフレーム<br>で微ニ入ル</FONT>
</FORM></TD>
</TR>

モニター画面が小さいから、などの理由でフレームを嫌う人がいます。ノンフレーム選択用チェックボックスを設置しています。

ブロックにマウスを乗せると、このサイトのキーワードが出るようにしています。ALTを使うと画像非表示の時にうるさいので、NAME プラス TITLEで処理しています。

　ざっと、こんな感じでしょうか。「配慮」「配慮」と書いていますが、面倒くさいところは手を抜いてやっています。ネットスケープでは反映されないものも幾つか使っています。

[2000-03]

→next(N)