「HP外面リニューアル大作戦」の巻
(2004/10/12)

HPを立ち上げてから、早7年が経とうとしております(後2日で丸7年)。7年前ですわ。まだ20代でしたわ。当時の装備は「WIN95のノートPC」、ソフトは標準で付いてる「メモ帳」「ペイント」と、フリーソフトの「BMPをGIFに変換するヤツ」と「GIFを組み合わせてアニメGIFにするヤツ」だけのスタートでした。HTMLタグが訳わからず、他のHPのソースをパクって背景色とテキストだけ書き換えて作っておりました。

が、しかーし、時は流れまして(7年も)。ダイヤルアップの人も少なくなり、繋ぎっぱ環境も全国的に整いつつあり(うちの実家まで来てるから、全国に行ってるはず)、当時の課題であった「いかに軽く作るか」のラインがちょっと上がったんちゃうか?と思ったので、ちょっと重く作ってみようかと思い立ったわけであります。

加えて、ワタクシが仕事上WEB作成とかもちょろちょろ経験して「ちみっと知恵も付いた」ってのと、「仕事で作る場合、あまりに制約が多い」ちうことに対する反動もありまして、「仕事でやったらあかんやろけど、自分とこやったら好きにやってええんちゃうかなー」ってことで、このような次第になったわけであります。他のブラウザで見てたみなさんごめんなさい。TOPから入ってもらったら、逃げ道あるので許してくだされ。


さて、ご質問が多かったHPの作成方法ですが、あっさりとではありますが、説明しまする。あ、ちなみにこれは今回のんみたいに、「画像を組み合わせて作成する」ちう方法を取った場合でありますよ。(文章ページはもっとあっさり作っております)

Photoshop画面

まず、元絵を作りまする。ワタクシはフォトショップで作りましたが、何でもよいと思われます。ペイントでもありでしょう。好きに作ってしまいます。ほいで、必要な分だけBMPで書き出してしまいます。ワタクシの場合は、「メニューあり版」「メニューなし版」「ボタン押された画像」「ボタン押されてない版」等々、何種類か書き出ししました。

Fireworks画面

次に、書き出したBMPを切ってGIF画像にする(「スライスする」とも言います)ため、ファイヤーワークスを立ち上げます。ちなみにこのスライス、フォトショップでもVer.6から出来ますが、ワタクシのマシンではちょっと重たいので、別ソフトで行いました。

上で見えてる、赤い線に囲まれた緑色のとこが、スライスした画像部分でする。この部分を適当な名前を付けて書き出ししときます。後でHTMLにするときにリンクしやすいとこがよいかと思われます。

このとき、後からHTMLで組む時にうまくテーブルに入るように、計算しながら切るのがポイントです。できるだけ、上下とか右左とか、合わせるように切っとくと、テーブル(ソフトによっては「表」)の組み立てが楽でするよ。

秀丸画面

画像を書き出したら、後はテキストエディタでHTMLを組み立てていけばOKっす。ワタクシは「秀丸」(シェアウェアですが、たまに警告が出るだけでタダで全機能使えます。あまりに便利なのでお金払ってもいいかな、と思ってるくらいであります)使ってますが、標準で付いてる「メモ帳」や「シンプルテキスト」でもOKです。

具体例、ちうことになると、「ソースを表示」ってしてもらうと、もうそのものなのです。テーブルの組み合わせで成り立ってまする。

HTMLに関しては、ワタクシがここでタラタラ書くより、「ほーむぺーじ作成の第一歩」とか、「とほほのWWW入門」とかの方を、じっくり見てもらうのがいいかと思われます。

個人的な気持ちとしては、「HTMLファイルの構成」と、「テーブルの作り方」と、テーブルタグの使い方だけが理解できれば、いけるっす。用はこれを組み合わせてるだけなのでありますよ(ソース見てもらったらわかりますが、ワタクシのソースはテーブルばっかしです)。

画像をテーブルで組み合わせる時のポイントは

1.「スキマをなくす(bodyタグでは「topMargin="0" leftmargin="0" marginwidth="0" marginheight="0"」、tableタグでは「cellSpacing="0" cellPadding="0" border="0"」、tdタグでは「valign="top"」は必須)」

2.「サイズをそろえる(widthとheight)」。

以上です。スキマなく埋めれば、繋がって見えるっす。

でも、今回過去のソースをいろいろ触って、当時の苦労とか思い出したりとかして、結構面白かったっす。「この辺からソフト使い出してるんや」とか、「このタグ発見したとき嬉しかったんよなー」とか。ま、それ以上に「よー、これで表示できとったなー」も大量にあって「ふー」ってなってたわけなのでありますが。

ってなわけで、ワタクシHPに関しては「表示できたもん勝ち」と思っておりますので、今後もまたご迷惑をかけるようなリニューアルをかけるかもわかりませんが、そん時はすんませんです。とりあえず今回はこんなわけでした。毎度ご来場ありがとーございます。