"Film &
Entertainment"
"NY, Japan & US,
Travel"
"Home Page,
and Friends"
このHPを立ち上げてから２週間経って、初めて学び始めたHTML。
まだまだHP制作初心者の私です。
皆さんも私と一緒にHP制作で遊んでみましょう♪
え〜、ご覧になれば一目瞭然、これまでほぼ１年間見慣れてきたトップページの形をリニューアルしました。（飽きっぽいヤツなんですぅ〜(^_^;)
これまで毎月変えてきた、トップページの移り変わりはこのページから見ることが出来ます。
さてさて、このページからこのページへの変身（？）、一番大きなトリックは、表を使った並べ技。コレについてはまだ説明していませんでしたね。文字や画像を並べるには、スタイルシートを使えばもっと色々なバリエーションで遊ぶことが出来るのですが、現在の私、スタイルシート全く分かりません(^_^;)。実は今回トップページの”Welcome to mook’s Homepage”って、スタイルシートでかっこ良く書いてみよ〜かな、なんていう野望があったのですが、ちんぷんかんぷんなので挫折してしまったくらい…(^_^;)。
でも、文字や画像の配置は、HTMLの基本知識だけでちゃ〜んと出来るんですよぉぉぉ！！！（負け惜しみ？？？）
まず、表の基本は＜TABLE＞＜／TABLE＞。この間に横の行＝＜TR＞＜／TR＞と縦の行＝＜TD＞＜／TD＞を入れ込んでいけばよいのです。
＜例＞
トップページにある↓のアイコンと文字、実は見えない表を使って並べられているのです。
|
|
|
|
"Film & Entertainment" |
"NY, Japan & US, Travel" |
"Home Page, and Friends" |
表の線を出してみると、こんなカンジになります。
|
|
|
|
"Film & Entertainment" |
"NY, Japan & US, Travel" |
"Home Page, and Friends" |
さてコレは、HTML上どんな風に書かれているのでしょうか？？？
. ＜TR＞←横一列目のスタート
＜TD＞←縦一行目のスタート ＜／TR＞←横一列目の終わり。 ＜TR＞←横二列目のスタート
＜TD＞←縦一行目のスタート ＜／TR＞←横二列目の終わり。 ＜／TABLE＞←表の終わり。
|
何となくお分かり頂けたでしょうか？？？これで＜TR＞を増やせば横の列が、＜TD＞を増やせば縦の行がいくらでも増やせるということです。列と業を合わせないという表も書ける様ですが、私はまだその域にまで達していません(^_^;)。
TABLEの次に書いてある、CELLSPACING="1"とCELLPADDING="4"ですが、私はっきり言って、全然意味知らないんですよね(^_^;)。もぉ、ただいつもカット＆ペーストして書いちゃってます。本当はなくても良かったりして…(^_^;)。
ただし、その次のBORDER="1"は重要。この値を０にすることによって、あら不思議！表の線が消えてしまうので〜す（上に書いた、線入り・線なしは、この値が１か０かの違いなので〜す。すごいでしょ〜〜〜？
文字やアイコンのアドレスの前にある＜CENTER＞は、単に文字や画像を真中に揃える為のもの。表の中では、升目ごとに新しいタグを書かなければならないので、各セルごとに書いています。
…というわけで、この新しいトップページ、上の表を組み合わせただけで全部文字や画像を組み合わせています。表の中にまた表を作ったりすると、かなりいろんな組み合わせが出来るので〜す。(^0^)
え〜、半年以上もお休み（？）していたこのコーナー、前から書こう書こうと思っているゲストブックについてと、今回のリニューアルでちょっと小技を使わせてもらったJava Scriptについて書けるのは、いつのことやら…(^_^;)。
注：これは下のコーナーからの続きです。まずは、その１から読みはじめて下さい。
さて、「アップロード」が出来てしまえば後は簡単。残された作業は、HTMLのパレット上でそれをタグと一緒に「組み立てる」だけなのです。
さっそく、ジオシティーズやヤフーメール、その他のHTMLパレット（私のゲストブックにあるノートパッドと全く同じモノです）に書いたものをお見せしてしまいましょう。
注：＜＞等は半角で書くとこのページ上に現われてこないので、わざと全角で書いています。
HTML上にタグを書く時は、必ず全て半角で書いて下さいね。
 ＜HTML＞ ＜TITLE＞mook's X'mas card sample＜/TITLE＞ ＜BODY BACKGROUND=http://アップロードした背景のアドレス＞＜BODY TEXT=330099＞ ＜BODY＞ ＜FONT SIZE=4＞ ＜CENTER＞＜b＞*** Merry Christmas 2000 ***＜P＞
Hello! everyone!＜br＞
Love, mook＜P＞ e-mail: mookhomepage@hotmail.com＜br＞
(The address has been changed. Please change the bookmark)＜P＞
|
これだけなんですよ。以上のタグをパレットに書き込むだけでこのページが出来上がってしまうのです。
この＜HTML＞から＜／HTML＞の間の範囲でHTMLのタグが有効であると宣言しています。
この＜TITLE＞から＜／TITLE＞の間に書かれた文字が、サイトで一番上に書かれているタイトルになります。
＜BODY＞＝本文上の設定をしています。
＜BODY BACKGROUND=背景にしたい画像のアドレス＞ 前回アップロードした背景のアドレスを入れるだけで、そのページの背景があらゆる模様、写真に変わります。
＜BODY TEXT=色番号＞ 本文中に書く文字の色を宣言しています。色番号については、「HTMLで遊びましょう♪」のコーナーを見てみて下さい。
この＜BODY＞から＜／BODY＞の間が本文になります。
この＜FONT SIZE＝数字＞から＜／FONT＞の間に書かれた文字の大きさを宣言しています。通常の大きさは3ですが、私はけっこう4を使っています。
この＜CENTER＞から＜／CENTER＞の間に書かれた文字、置かれた画像の全てが真ん中に来ます。
この＜b＞から＜／b＞の間に書かれた文字全てが大文字になります。これは下でもすでにお勉強しましたね。
動くサンタさんの部分。これはちょっと高度に見えるかもしれませんが、この部分をただカット＆ペーストして＜＞の部分を半角に直し、アドレスを入れる部分にアップロードした動画のアドレスを入れるだけ。後は私にも分からないので、分かる様になったら説明します(^_^;)。---この様に、HP作りの基本はカット＆ペーストなのですよ〜。
基本は＜IMG SRC=アップロードした画像のアドレス＞です。これでお好きな画像を何でもページ上に載せることが出来るので〜す。
このリンクの付け方は、「HTMLで遊びましょう♪」でやりましたね。
＜br＞＜P＞については、皆さんもうよくご存じだと思います。（「ゲストブックに書く」のページを見てみて下さい）
…というわけで、これだけの知識で立派なEカードの出来上がり♪。カードだけじゃなく、私、これだけの知識でこのHP、ほぼ全ページやってますから(^_^;)。だってここまでの部分でまだ説明していないのって、表の書き方とMIDI（BGMの挿入）ぐらいなんですよ。
ゲストブックについては、HTMLの知識だけでは出来ない所があって、私もまだ混乱している所です。でも、今は全くのフリーで特別な知識なんか全然必要としないゲストブックやBBSが山程あるのですね、これが。次回は、（いつになるか全く分かりませんが）、このタダで誰でもGET出来るゲストブック＆BBSについてお話しようかと思います。
というわけで滞っていたこのコーナー、「アップロードの説明」をするするといって早2か月半…。
せっかくクリスマス＆お正月の季節ということで、この際「手作りe-カード」の作り方にかこつけて簡単にご説明致しましょう。
取り合えずはシンプルなデザインで、こんなモノを作ってみます。
１）カードの用紙にあたるものについて、私のご説明出来る範囲でいうと次の２種類があります。
a）ジオ・シティーズのフリーホームページ・スペース（GETの仕方は以下その１〜３をご覧ください）を使う。
b）ヤフー・ジャパンのフリーメールでHTML形式のページを選ぶ。
２）文字や絵、背景、写真などの素材は、こちらのリ
ンク集から適当に選んでみて下さい
（もちろんお気に入りの素材サイトがあればそれでOK）。
例として、
まずは「ヤフー・ギャラリー」からこの
写真、
「Joli Jouet +Nae's Free Material」さんのHPからアイコンと壁
紙をGETしました。
３）これらの素材を”アップロード”するのに必要なモノ
a）ジオ・シティーズのスペースをGETした方---すでにファイルマネージャーのペー
ジに「EZアップロード」のソフトが含まれています。
b）その他のアップロード・ソフト。このサイトの「FTP Explorer
を使ってアップロードしよう」から、「FTP Explorer」をダウンロードしても出来ます。
簡単に言うと「ダウンロード」の反対です。
皆さんは「ダウンロード」というと、ネット上に乗った画像や音楽を自分のパソコン
のファイルに落としますよね。
で、「アップロード」はその反対。自分のファイルにある画像や音楽をネット上に上
げてやる作業です。
（ジオ・シティーズ以外の方法でアップロードする場合は、
こちらのサイトにやり方が全て書いてありますので、そちらを参考にしてみて下さい）
１）まず、好きな素材を自分のパソコンに「ダウンロード」します。
a) ウィンドウズの場合---欲しい画像の所で右ボタンをクリックして「画像をファイ
ルに保存」を選択。
b) マックの場合---欲しい画像の所でボタンをクリックし続けて「画像をファイルに
ダウンロード」を選択。
こ の写真で言えば、もみの木あたりをクリックしてみましょうか。（別にどこをク リックしても同じなんですけどね^_^;)
２）ジオ・シティーズ「ファイルマ ネージャー」にログインして、下にある「EZアップロード」に行く。
a) 「参照」をクリックすると、自動的に自分のパソコンのファイルが開きます。
b) アップロードしたい画像・音楽を選択して「開く」をクリック。
c) 自分の好きな数だけこの作業を繰り返して、最後に「アップロード」をクリック。
これだけの作業で、こんなサイトページが出来ます。
同じ手順で、サンタのアニメ、 背景もアップロードしておきました。（注：ご自分の作品を作る時はこのページに直接リンクすることは絶対に避けて下さい。ファイルが重くなってしまうので）
まぁ私個人の経験から言って、ジオ・シティーズのフリースペースを使った方が”アップ ロード”に関しては超簡単だと思います。（あ、また宣伝してしまった…^_^;)
さて、次回はこれらの素材を組み立てて、カードを作ります。お楽しみに〜。
さてさて、アップロードのお話に行く前に、一回だけお遊びのコーナーを設けました。
考えてみたら、私のゲストブックってＨＴＭＬフォーマットじゃないですか！（＜ｂｒ＞って入れないと、改行できないでしょ？あれってカキコの部分がＨＴＭＬフォーマットだからなのです。）
そうそう、皆さんも知らないうちにＨＴＭＬフォーマットの上でカキコしていたのですよ。
だから！これを利用しない手はありません。以下の記号を使って、皆さんも私のゲストブックでどんどん遊んでみて下さい。もし失敗したら、上に「削除して下さい」と一言頂ければ削除しますので、大丈夫。（^_^)
パート２に書きました様に、ＨＴＭＬ記号の基本は＜＊＊＞−−−＜／＊＊＞。
＊＊に命令記号を入れて挟めば−−−の部分がその命令どおりに変わるというものです。
とにかくやってみましょう！
***注意***
以下＜＞や英数字の部分は、わざと全角で書いてあります。（そうしないとこの画面に現れてこないので）でも、ゲストブックに書く時、＜＞や英数字は全て必ず半角で書いて下さいね。
遊び:１）文字にアクセントをつける。
太字にする---こんにちは＜ｂ＞mook＜／ｂ＞です。 ＝ こんにちはmookです。
イタリックにする---こんばんは＜i＞mook＜／i＞です。 ＝ こんばんはmookです。
下線を入れる---どうも＜u＞mook＜／u＞です。 ＝ どうもmookです。
遊び：２）文字に色をつける。
これは、以下の000000のところにいろいろな色番号を入れて変えます。
色番号はこちらのサイトから選んで下さい。
＜ＦＯＮＴ ＣＯＬＯＲ＝"＃000000←お好きな色番号"＞青にします。＜／ＦＯＮＴ＞
＝青にします。
（””と＃も、半角で忘れずに入れて下さいね）
遊び：３）文字にリンクをつける。
これは最近、私がiwaki先生のＨＰで遊ばせてもらっているワザです。でもあなたも簡単に出来るのでーす！
＜Ａ ＨＲＥＦ＝”ｈｔｔｐ：//お好きなサイトのアドレス”＞mookのＨＰ＜／Ａ＞へ遊びに来てね。
＝mookのＨＰへ遊びに来てね。
***最後に必ず＜／＊＊＞をつけるのを忘れないで下さいね。でないと後のカキコが全て＊＊になってしまいますよー。
どうですか？もっと遊んでみたくなりませんか？
でも...ＨＰまではどうも、というあなたに朗報!!!
ヤフーのフリーメールでは、ＨＴＭＬメールを送ることの出来る選択支があります。（”新規メール”の下の部分で選べます）送る前に何度でもプレビューできるから安心ですよ。メールの登録には５分くらいしかかりません。そして全くのタダです。
ここでいろいろ試して、お友達に色付きメールを送ってみましょう。
そして、次回からのアップロード方法をマスターすれば、あなたのオリジナルでお友達に写真・背景・イラストの入ったグリーディング・メールだって送れるんです！！！
とにかく！まずは試して、いろいろと遊んでみて下さいね〜〜〜。
う〜ん、困ったことに（？）まずますHP制作にハマりつつある私です(^_^;)。
私の場合、本当にまったくゼロの知識から始めているので、せっかくならこの体験をシェアして、皆さんのHP制作の参考にして頂ければと思っています。これから何かフォーマット的なことでアップディトする度、”mookのHP制作奮闘記”も同時進行として連載していきたいと思いますので、宜しくご支援下さいね。
ただし、私の体験談はあくまでもジオシティーズのFee HP制作フォーマットを使ったものなので、他のフォーマットだと、また話が全然違うかもしれません。その点は何卒ご了承下さい。 「ジオシティーズ」Fee HPの長所、そして短所については、まずジオライフというサイトの”ジオの良いとこ、悪いとこ”を読んで、じっくりと考えてみてくださいね。（ジオに属していない人が書いた率直な意見なので、参考になると思います）
第１回目の分はそのまま下に転載しましたが、何だかわかりづらいと思うのでポイントを書き出しますと…
１）まずジオシティーズ・メインからカテゴリーを選んで、自分のアドレスをGETする。
２）ウェルカム・メールが届いて自分のパスワードをGETしたら、”ホームページ・ウィザード”の質問に答えていく。これで、ベージックHP・トップのページの出来上がり。
３）”ツール”のページに行って、日記やゲストブックのページをセットアップする。（これも、フォーマットの質問に答えていくだけ）
2000年9月12日まで、私のHPのセットアップはたったコレだけの３ステップでした！
所要時間１時間で十分でしょう？
さて、当面はこのベーシック・フォーマットでぼちぼちやっていこうと思っていたのですが、私の激長カキコと、有り難いことに予想以上に皆さんが遊びにいらして下さったので、たったの2週間でこのベーシックバージョンがパンクしてしまいました(^^;)。
そこで！私mookは覚悟を決めてしまいました。一HPの管理人として、やっぱりHTMLの知識くらいはつけようと…。で、コレがまたやってみると、意外に簡単でした。異国の地に暮らしている為、本屋でHTMLの本を買い込むこともままなりませんでしたが、このインターネット様々のご時勢、海外に居ながらにして、必要最低限の知識は殆どネットからGETすることが出来ました。
ぶっちゃけた話（死語？）、HTMLの記号というのは、HTMLのフォーマット上に何かを書く時の指示記号です。
ちなみに、ジオHP最初の3ベーシック・ステップが終わって、次の段階の"HTML"に進むには、”ファイルマネージャー”のページヘ行って下さい。そこから、各ファイルごとに"HTML"のページに行くことができます。
以下、私の個人的お薦め”HTMLの基礎知識”がわかるHP集です。
・とにかく何もわからない人用
・猿でもわかるHP入門。（もうその名の通りです）
・おすすめ本の紹介もあります。
・場合別に、かなり細かく分かれています。
・HTML逆引きデモンストレーションが出来るのが魅力。
最後に私からの一言アドバイス。本当に初心者の方は、いきなりこれらのHPを読んでみても、何の話をしているのかあまりピンとこないと思うので（私も2週間前に読んでいたらチンプンカンプンだったと思います）、まずは自分のHTMLスペースをGETして、”実際にやってみること”。これが一番の早道だと思います。
次回は、「アップロード」について。私が”理解”できたら、この連載続きます。（現時点では、まだ全然わかっていませ〜ん…(^^;)
え〜、ゲストブックの方に、ジオシティーズのＨＰについての素朴な疑問がいくつかありましたので、私のＨＰ制作体験談をちょこっと（？）書きますね。
＜**＞---＜/**＞でワンセットとなって、間の---の部分に書かれた文字その他が、**という指示通りに表示されるというしくみ。
例えば、”あいうえお”と書いた文字の両端に、太字を指示する＜b＞、＜/b＞を挟むようにして＜b＞あいうえお＜/b＞書くと最終的な画面上ではあいうえおと太字が現われてくるわけですね。理屈としては、簡単でしょう？
http://village.infoweb.ne.jp/~hometown/
http://www.synapse.ne.jp/~yama/saru/
http://www.big.or.jp/~toda/html/
http://www.tanasan.com/html/menu_ht.htm
http://nagoya.cool.ne.jp/geregere/tyouindex.html
何てったってスペースGETはタダなのですから、とにかくGETして遊んでみては？アドレスを公開しない限り、誰が見るわけでもないのですから、”遊ぶだけ”でいいんです！！！ご健闘を祈ります。
09/01/00
私はジオの回し者ではありませんが、とにかく本当に簡単でした。私の場合ＰＣが日本語ベースでないので、文字化けや言語エラーの問題があり、いらぬ労力を費やすハメになってしまいましたが、そうした問題がなければ、おそらく１時間前後であなたも自分のＨＰが作れてしまいます！しかもタダで！！（宣伝しすぎ？？？）
まず、ジオシティーズのメインページに行って下さい。（http://www.geocities.co.jp）
そこから自分の好きなジャンルを選びます。私の場合は芸能一般＝ハリウッド大通りを選びました。（http://www.geocities.co.jp/Hollywood/）
ハリウッド大通りの中にも、小さなストリートがあります。そこで私が選んだのが映画＝みゆき通りでした。（http://www.geocities.co.jp/Hollywood-Miyuki/whatsnew/1000.html）
で、そこで1000ごとに分かれた番地の中から、適当に空き家を探してGETします。これが、まず第一段階の”スペース獲得”。自分が今使っているメールアドレスに「ウェルカムメール」が来るのを待ちます。（私の場合、ここで文字化けや言語エラーが出てかなり苦労しましたが）
「ウェルカムメール」に書かれているパスワードをGETしたら、後はもう作るだけ！！！もし貴方が”ベーシック”のＨＰを選ぶなら、そこから先は、すべてフォーマット化された質問に答えていけばいいのです。
私の９月１２日までのトップページ
は、事前に聞かれた質問、「ニックネーム」、「出身」etc,に答えたものが、フォーマット化されたページに出て来ただけなのですよ。全体的なフォーマットも、「かわいい系」とか「さわやか系」とか、全部で5種類くらいの中から選べます。私のは、確か「さわやか系」だったかな？だから、ジオのストリートを適当に散策していれば、私とそっくりで、データだけの違うページを、いくらでも見つけることが出来ると思います。
この後、ツールのページから「日記」や「ゲストブック」の設定に入るのですが、一つ注意しておきたいのが、一度カキコを始めてしまってから後で設定を変えると、今までのカキコが上書き＝つまり全部消えてしまうということ。この点よ〜く頭に入れて、心ゆくまで設定してみて下さいね。（私は何も考えないでやってしまったので^_^；）勿論その都度プレビューも出来ます。
こうしてフォーマットに乗っかってやれば、ＨＴＭＬの知識など全くゼロでOKです。もちろん、このジオのフリーＨＰにも、中級とか上級者用の設定もありますし、やろうと思えばいろいろと遊べるようですよ。私はその度に文字化けや言語エラーと格闘しなければならないので、暫くはベーシックでボチボチやる予定ですが。
また、少し落ち着くまでは”検索登録”もしない予定ですので、ジオシティーズ検索でmook等のキーワードで探しても出て来ませんので、その点はあしからず。このＨＰのことは会社の同僚にも内緒ですし（仕事中にROMるとすぐバレるので^^；）、日本に住んでいる友達には、まだ２人にしかこのＨＰのこと教えていません。今回やっと分かりましたが、知り合いと”バーチャル・ワールド”でお喋りするのって、けっこう照れますね。時には、まだ顔を見ぬ方々の方が心置きなく話ができたりなんかして（^_^；）
まぁ、これが”また長くなってしまった”私のＨＰ体験談でした。皆様も、いろいろとチャレンジしてみて下さいね〜♪
Above, I'm just explaing how to create a Home page via Geocities Japan. Since it's totally different from how to create a Geo Hope Page in US, I won't translate it.
---------------------------
Back to mook's page Index
