ワードでHPを作る                     2004/01/27 最終修正

 

 通常、プロバイダ契約の際に、或いは、追加申請で、e-mail と同様に、HP開設の申し込みができます。

 HPを始めるに当たり、自分が加盟しているプロバイダに問い合わせてHP開設を申請し、登録してもらいます。その結果、FTPサーバー名、FTPアカウント名、ディレクトリ名、FTPパスワード、などの設定をしてもらいます。

 

前提条件 予備知識:

1. Windows Xp の環境で書いています。従って、その中での作業です。この場合は、恐らく、Windows 98 以降のものなら、大筋でさほど問題が無いと思います。

2. ワード2002で話を進めます。ワード2000でも大筋では、同じだろうと思います。ワード97には、まだこの機能がありません。

3. PCは、早いほど、メモリが多いほど、快適ですが、ワードでの作業が、遅すぎて入力待ちが有るほど遅くなければいいはずです。

4. FTPというソフトが必要です。自分で作ったファイル群を、プロバイダの持つサーバーとデータのやり取り(upしたりdownしたり)をするソフトです。私は、曽田さんのフリーソフトffftp.exeを使わせてもらっています。ここでは、これを使います。

5. ファイル名は、「全て英数半角の小文字」と覚えておきましょう。こんな話が随所に出てきます。
ワードの場合は日本語入力設定なので、ファイルに名前をつけて保存する際に、F10(半角指定)を押すと覚えておきましょう。

6. 実は、ソフトとして「ワード」しか使わなければ、文字種を余り厳密に考えなくてもできてしまう部分(取り込み用画像ファイル)があります。でも、それは、ワードが勝手に処理してくれるからで、他のソフトや、html言語を使い始めると、その途端からトラブルの連続になるので要注意です。(このワードの機能は、htmlに詳しい人には、返って煩わしいようです。)

7. 私の場合、My Documents の中に「mypage」と言う名前のフォルダを置き、アップロードするファイルは、全て、その中へ収納しています。ワードで文書作成する際に、ストレスを感じない場所なら何処でも、どんな名前でも構いません。

 

作業手順、等:

 

1. 最初がトップページの作成です。メニューバーの ファイル 新規作成 で、左のようなブラウザがポップアップします。ここでは、白紙のWebページを指定します。

 ワードの一般文書で作ってから、Webページに変換することは可能ですが、そのページが呼ばれたときに表示される「ページのタイトル名」まで登録できるので、こちらをお勧めします。

 

2. ファイルの中身を書き始める前に、ファイル 名前をつけて保存で、HTMLファイルの名前をつけておきます。プロバイダごとに、HPのトップページ(最初に開かれる表紙や目次に該当)には、特定の名前を付けるという決まりがあります。多く場合はindex.htm という名前ですが、プロバイダの指定に従います。拡張子も、*.html と4文字の場合がありますが、その場合は、他のページも同じ拡張子に統一します。
(index.htmlは、自分のサイトの内部文書としては、*.htmlのみしか認めないようです。)

 

3. 文章は、普通のワープロと同じような積りで書くだけです。フォントは、普通のワープロについてくる、MS-明朝 MS-ゴシックが最も無難です。お気に入りのフォントがあっても、外から見た人が使っているPCに、同じフォントが登録されていないと読めません。

 

4. ページの表題(タイトル)は、通常の文字で入力した後、その文字列の選択状態で、ワードアートを呼びます。 でスタイルを選択し、文字列をチェックすれば後はOKだけです。

 

5. (又は写真)を挿入します。写真は通常 JPEGファイルを使います。拡張子が、*.jpg です。図の場合は、GIFファイルを使います。拡張子は、*.gif です。これらのファイルは、ファイル名が、拡張子を含めて全て半角英数小文字であることが要求されると思ってください。

 作業は、メニューバーから、挿入 図 ファイルから と追っていくと、My Documents の中にある、マイ ピクチャーをブラウズするようになっています。自分で作った図(写真や線画などの画像)を、この中へ整理し、準備しておきます。借り物を使うなら、クリップ アートを呼びます。

 マイ ピクチャー(、または、その中に作ったフォルダ)の中で、目的の図を探します。見つけたらクリックで選択し、ブラウザの右下の「挿入」ボタンを押せば、作業中のHTMLファイル内のカーソルがあった位置へ挿入されます。

 

6.  ワードの作業で、写真や図が、インターネット上で表示されないトラブルがあれば、それは、ワードと、FTPの癖を知らないためです。後で説明します。心配しないで、先ずは、出来映えの良いページ作りに務めましょう。

 

7.  表は、文章を整理するだけでなく、図を整然と並べるのに役立ちます。

下の(1)のように、メニューバーの罫線を使い、「表のフォーマット」で、ポップアップメニュー(2)から、表(Web)1 を指定します。

適用ボタンで、次にポップアップする「表の挿入」メニュー(3)で、列と行の数を指定します。あとは「OK」ボタンだけです。

 

 

 

 

 以上の手順で作った表を、右側だけ「セルの結合」処理したのが、下の表です。

(1)

 

(2)

(3)

 

 

8. 表の中へ並べたものを上下 或いは、左右方向の配置を見易いものにするために、コマンドボタンを準備します。

 こちらが、お馴染みの左右方向です。

 こちらが、上下方向用のものです。有効活用するためには、表示 ツールバー ユーザー設定 で、表/罫線の中から探します。コマンド一覧の中から目的のボタンを、ドラッグによりツールバーの一部へ取り込んでおくと便利です。(図参照)

 

表の中へ図を配置した状態で、通常のデフォルト設定では左上揃えになっているので、上下左右共、センタリングにすれば見易い落ち着いた感じのものになってくれます。

 

 このマークの「テキストの折り返し」も、図の配置に働いてくれますが、興味があれば試してください。これは、紹介程度にしておきます。

 

9. トップページは、index.htm という名前から、目次だけと解釈できます。門であり、玄関であり、顔なのです。どなたに聞いてもそのようにおっしゃいます。私の奴のように、ゴチャゴチャしたのは、見苦しいばかりだそうです。

 

10. 他のページは、各々、より具体的なテーマに沿った編集をするだけで、従って、「外観より中身を充実させる」こと以外は、格別の違いもなさそうです。

以上説明したものをベースに、Web ページをいくつか作れば、後は、お互いをリンクするだけです。

 

例えばトップページからは、子供のページへ、子供のページからは、孫ページへ進む場合と、親ページへ戻る場合を準備します。戻る作業を忘れても、インターネットイクスプローラの「戻る」ボタンで、脱出は可能です。でも、これだけに頼っていると、折角の来訪者が、トップページを飛ばして舞い込んだ場合は、次の作業でハイ、サヨウナラ !  になります。

さあ! リンクの設定です。

 

11. リンク先がわかりやすい表現で、例えば、「トップページ」と書きます。その後へ、スペースを挟んで、へ進む とか、へ戻る と書いておきます。タイトル名の文字列を選択した状態で、メニューバーから、挿入 ハイパーリンク として、ポップアップメニューを呼びます。現在のフォルダの中から、

 

目的のファイルを選んで、例えば、図の例では、トップページへ戻す作業で、「OK」ボタンを押します。

 通常の場合ですと、トップページ と書かれた文字列が、リンク先を示す青いアンダーライン付きに変わってくれます。

 

12. 閲覧者から、感想をもらいたい場合は、「ご意見ご感想がありましたら、 こちらへ メールを下さい。」とし、「こちらへ」の部分を選択した状態で、アドレス欄へ自分のメールアドレスを記入します。確定時に、mailto: 付きで、設定されるので、確認のうえ「OK」です。
 設定がまともにできているか心配なら、青文字のリンク設定した部分をctrl+クリックします。自分宛のメールを呼び出してくれます。これまで経験の無い人は、ついでに、自分宛のメールが配信され、メモとして残すことができることも覚えておきましょう。

 

 以上が、ワードでの作業です。もっと書きたいけれど勉強不足で不明のところもたくさんあります。「何だ、掲示板が無いじゃないか」とおっしゃる向きには、「フリーソフトとして公開されているものもあります。先ずは、HPを作って動き始めたら、ご自分で研究してみてください。」と申し上げておきます。

 

 私の場合は、その後の作業で、無料掲示板サイトを拝借しています。色々ある書式の中から、自分の趣味にあったものが選定できます。(掲示板の場合は、特殊性もあって、ワードで処理する作業は無さそうです。)

 

 お疲れ様でした。以上が、私がHP作成前に読みたかったHow to bookの内容です。不足の部分は、上記の「こちらへ」でお問合せください。お答えできる範囲で返信を差し上げます。

 

 サーバーへ向けてアップする方法は、別のページに作ってあります。

 

 追記事項: 久方振りに思い出して作業です。ここでは、webページ作成時のフィルタの話です。

 

1.      HTMLファイルも、写真や図形のファイルも、サイズが小さいほど閲覧者の負担が少なくなります。ADSLを使っていなくても、パソコンがやや古くても読んで貰おうと思ったら、この努力は重要です。

2.      ワードでは、webページとして作れば、普通に動いてくれますが、HTMLとしては不要なOffice用の機能を保持するために、かなり無理をしているそうです。これを本来のHTMLにできるだけ近付けるには、

3.      編集終了時に、ファイル 名前をつけて保存 で、ファイルの種類の指定を、「webページ (フィルタ後)」にします。

4.      結果として、HTMLファイルそのもののサイズが、半分弱になります。これでも、メモ帳で作業している場合の数倍になっているかもしれません。

5.      もっと劇的に変化するのが、JPEGなどの図形ファイルです。適当なサイズで作った図形ファイルを、ワード自身は、元の図形と変形後の両方を確保しようとするのか、*.filesフォルダの中に、二重登録されています。フィルタをかける作業で、一元管理の状態になってくれるようです。

6.      この作業の結果、副産物もありました。フィルタをかける前には、図形ファイルを「右クリック」でコピーを取ることができませんでした。選択・コピーする作業では、図形の外(手前)から図形を通り過ぎるまでドラッグし、背景の暗転を確認後、コピーすることが必要でした。

7.      フィルタをかけた後では、他のソフトで作った場合と同様で、単に図形の上で右クリックすれば、簡単にコピーが取れます。この結果から、フィルタをかけて、初めてHTMLらしいファイルになったようです。

 

 ところで今度は、副作用の話です。良いことばかりではありません。

8.     一度フィルタを掛けた状態から、「図形の追加」をし、そのまま上書き保存したとします。画像管理がガタガタです。新規に追加した分はいいのですが、追加前のものが別の図形に置き換わってしまいます。

9.     その対策で、マニュアル上では、「フィルタにかける前のファイル」を別のフォルダへ保存しておいて、これを書き換えてから「本番」のファイルへ上書きし、改めて、「webページ (フィルタ後)」にします。チョット面倒くさい話ですね !

10.  私の場合は、フィルタ後のファイルを開きなおして、フィルタ条件無しで保存しなおしてからの作業としますが、これで安全かどうかは、これからの実験です。

  実験の結果は、「不可」でした。やはり図形の管理がガタガタでした。9. 項の作業をお勧めします。

この、9. の作業は、慣れないと手順を間違えやすいので、ファイルを更新する際は、最初にフィルタ済みのファイルを削除し、フィルタ前のファイルを正規の場所へコピーで戻すのが良さそうです。

 

  既にフィルタをかけてしまって、元のファイルが保存されていない場合の復元作業を説明しておきます。

a.      先ずワードで、別のフォルダに、同じ名前を付けた新規の拡張子が.htmlの空ファイルを作っておきます。壁紙があれば、そのコピーを取って、新規ファイルに貼り付けます。

b.      この項目は、全面修正です。(04/01/26)
次に、元のファイルへ戻って、ファイル 名前をつけて保存 で、拡張子 .docのワード文書として保存します。 「編集 すべて選択」 し、コピーを取ります。先ほどの新規・空ファイルへ「貼り付け」ます。ここまでで、殆んどが、フィルタ前の状態で再現されているはずです。

c.       フィルタ済みのこれまで使っていたファイルは、念のため別フォルダへ移動させます。(捨てても大丈夫)

d.      新規ファイルは正規の場所へ移し、図形の追加など必要な操作を済ませてから、動作を確認してみます。運が良ければ、フィルタ前の状態に戻っています。

e.       この際にチェックで、最も大事なのはリンクの状態です。図形のリンク状態は、おかしなものが無いかザッと見ておけばOKです。問題は、他のページ(HTMLファイル)へのリンクです。Ctrl+クリックでチェックしておきましょう。

f.        フィルタ後のファイルを作り直す前に、a.「図形ファイル関連の処理」が完了していることを確認し、 b. 「別の場所へ保存すること」の2つを忘れないようにしましょう。

 

 

 目次へ 戻る

 次へ 進む