「ぽいっとHTML」を使って ワードでホームページを作るためのノウハウ集

 

【ホームページを作るには】

・ホームページをインターネット上で公開するには、以下の3点が必要!

1)ホームページ自体のデータ(これが表示される)

自分で作るか誰かに頼むか

2)サーバー(インターネット上の自分用の土地)

無料レンタルか有料(月額数百円から数千円まで多様)レンタル

3)ドメイン(インターネット上の住所)

(有料)独自ドメイン(戸建て)か(無料)間借りドメイン(○○マンション××号室)

・ホームページを作るツール(ソフト)は、いろいろある

習得する努力の覚悟があるなら、無料ソフトや市販のソフトで作っても良い。

その場合は、困難を乗り越えるための相当な努力が必要と覚悟すべし。

(1)ホームページ作成用のソフトを入手する

有料 : ホームページビルダーが有名(1万数千円くらい?)

無料 : いろいろある

いずれにしても習得には努力が必要

代替案(無料)

MS ワードで作る(ワードの知識と多少の約束事の知識は必要)。そして「ぽいっとHTML」(無料)を使う(操作は超簡単)。

(2)無料のサーバーをレンタルする

eo光      ・・・ 20MBまで無料(200MBまで追加可能 追加5MB毎に200円/月)

fc2      ・・・ 1GBまで無料

Wix      ・・・ 500MBまで無料

他にもいろいろ

(3)サーバーへアップロードするためのFTPソフトを入手する

「FFFTP」というソフトが有名(無料)

    http://www.vector.co.jp/download/file/win95/net/fh600851.html

 

【準備】

(1)「ぽいっとHTML」for Word をダウンロードする。

        http://www.vector.co.jp/download/file/winnt/net/fh490960.html

 

(2)「ぽいっとHTML」for Word の使い方

・このソフトのアイコン(デスクトップに置いたショートカットアイコンで可)にワード文書(○○○.doc)をドラッグイン(ドロップイン)します。

・次の処理が実行されます。

@HTMLファイルおよびそれと対になるフォルダがデスクトップに作成される

「○○○.htm」のファイルと「Image」というフォルダが作られます。Imageフォルダ内には、写真とかイラストやワードアートで作られた画像ファイル(.jpgや.png)が入ります。

「○○○.htm」のように拡張子が「.htm」で作成されますが、サーバーにアップロードする場合に「.html」が必要な場合は名前を変更してください。

AHTMLファイルがブラウザに表示される

※ 「Image」フォルダはあらかじめデスクトップに作っておくことが出来ます。

※ 「Image」フォルダの中は「ぽいっとHTML」を実行する毎に「ぽいっとHTML」が生成する新しい画像ファイルに置き換わりますが、その他のファイルには影響を与えません。アルバムなどで使う元写真などはあらかじめ「Image」フォルダへ入れておくことが出来ます。

 

【ワードの文書を作成する】

・ワード文書を保存する場合は、「名前」は半角英数字としてください。例 abcd123.doc (日本語の名前は使わないほうが無難です。インターネットは英語圏の約束事が基本です。)

・ワードの拡張子は「.docx」より「.doc」のほうが良いみたいです。[word 97-2003 文書(*.doc)]

 

1.用紙と用紙の向きを設定する

(ページレイアウト>サイズ&印刷の向き)でA4縦置き(横 210o 縦 297o)とする。

 

2.余白の設定をする

(ページレイアウト>ページ設定>余白タブ)で余白は

上 8o 下 13o 左 5o 右 5o とする。

よって文書範囲は 横 200o 縦 276o となる。

 

3.ホームページを作成する「枠」を作る

(1)(挿入>表) で 1行×1列の表を挿入し「外枠」を作る。

(2)(表ツールのレイアウト>プロパティ)で

(表タブ)

サイズ : 幅指定 200o        配置 : 中央揃え

線種/網かけの変更

罫線タブとページ罫線タブ>罫線なし

網かけタブ>背景の色 を選ぶ

(行タブ)

サイズ : 高さは指定しない

(列タブ)

サイズ : 幅指定 200o

(セルタブ)

サイズ : 幅指定 200o        垂直方向の配置 : 上揃え

を設定する。

※ すべての文字・図・写真・イラストなどはこの表(外枠)の中に記述する。

※ ページ全体の背景の色は(ページ/レイアウト>ページの色)で選ぶ。

 

4.行間を設定する

Ctrl + A で全体を選択し

(ホーム>段落の行と段落の間隔)で1.5 に設定する。

※ こうすればHTMLソースの <head> 内に line-height:150% が入る。

※ 表(外枠)全体の行間隔が 1.5に設定される。

注 外枠は表なので、Tabキーはそのままではセルの移動/行の追加になる。

  タブとするには Ctri + Tab でTabが有効になる。

 

5.タイトルを記入する

(ファイル>情報>プロパティ)の「タイトル」欄にタイトルを書く。

※ HTMLソースの <title> 内にタイトルが入り、ページのタグに表示される。

 

6.タグを設定する

(ファイル>情報>プロパティ)の「タグ」欄に検索エンジン向けのキーワードを書く。

例 [東京,千葉,埼玉,神奈川] と記入すれば

  HTMLソースに <meta name="keyword" content="東京,千葉,埼玉,神奈川">が入る。

 

7.コメントを設定する

(ファイル>情報>プロパティ)の「コメント」欄にサイトの簡単な紹介文を書く。

※ グーグルなどの検索エンジンの、検索結果で表示される文章なので大事です。

サイトの内容や雰囲気を伝えるために、ちゃんと書いておきましょう!

 

8.ミリメートルとピクセルの関係

※ パソコン画面の画素数(dpi ドット・パー・インチ)により一定値で変換は出来ない。

例 ゆーめのパソコンでは

  200ミリ=756px (3.78px/mm)

  180ミリ=680px (3.77px/mm)

  210ミリ=793px (A4用紙幅いっぱい)

(推奨) 表の横幅=列幅=セル幅=200ミリ(756px)

※ 横幅いっぱいの写真を入れる場合は写真の横幅は756ピクセルにする。

※ このページの最上部の写真(ホームページ作成)の大きさは 756 px × 87 px です。

 

9.ワードでの文字の編集

(ホーム>フォント)で文字の体裁・修飾出来ること(有効・無効)。 ※ 2010を使って docで作成の場合

(有効)

フォント、フォントサイズ、太字、斜体、下線、取り消し線、下付き、上付き、蛍光ペン、フォントの色、文字の網掛け、囲み線、ルビ

(無効)

囲い文字、文字の効果

 

10.図(写真・イラスト・図形など)の配置

「文字列の折り返し」は「行内」のみOK。

行内 OK

四角 NG        外周 NG        内部 NG        上下 NG        背面 NG        前面 NG

※ 図だけの行では、図の左右の位置揃えは「文字列の揃え」では出来ない。空白文字(スペース)で調整する。

△△△△△△△△△△ ← (△はスペースのつもり)

「外枠」(3.で作った表)の中に別の表を作る(挿入する)ことが出来る。

お友達仲間“かいつぶりの会”のイラストです。

 

11.リンクのしかた

(挿入>ハイパーリンク)

(a) 外部ページへのリンク

 額縁:かんたんギター弾き語り 額縁:youtube 君が代

 文字列/図を選び、ハイパーリンクでURL(http://・・・)を指定する。(※a)

(b) 内部HTMLファイル

 額縁:セブンのアルバム

 文字列/図を選び、別に作った「○○○.htm」ファイルをハイパーリンクで指定する。(※a)

(c) ページ内の指定の場所

 額縁:このページの最初へ

 文字列/図を選び、ハイパーリンクでブックマークを指定する。あらかじめワード内で「ブックマーク」を設定しておく。

(d) 写真(jpg や png など)

 

 「Image」フォルダにあらかじめ元写真を入れておく。

 ワード文書内に元写真を図として挿入し、サイズを小さくする(サムネイル化する)。

 文字列/図(サムネイル)を選び、ハイパーリンクで「Image」フォルダ内の元写真を指定する。(※a)

(e) 地図(Google Map など)を表示する

    額縁:国会議事堂 ボタン/文字列でも可。

 ワード文書内に地図のスナップショットを図として挿入し、サイズを調整する。

 文字列/図を選び、ハイパーリンクで目的の場所の地図(Google Map)のURLを指定する。(※a)

(f) 動画・音声を再生する

「Image」フォルダにあらかじめ動画/音声ファイルを入れておく。

文字列/図を選び、ハイパーリンクで「Image」フォルダ内の動画/音声ファイルを指定する。

IE(インターネット・エクスプローラ)を前提に説明する(Chrome、Firefox は参考程度)。

 

IE

Chrome

Firefox

動画 mp4

WMPで再生可能

アプリ不明だが可能

アプリ不明だが可能

動画 mpg

WMPで再生可能

△WMP(※※)

WMPで再生可能

動画 wmv

WMPで再生可能

△WMP(※※)

WMPで再生可能

音声 mp3

WMPで再生可能

アプリ不明だが可能

アプリ不明だが可能

音声 wav

WMPで再生可能

アプリ不明だが可能

WMPで再生可能

音声 wma

WMPで再生可能

△WMP(※※)

WMPで再生可能

※※ パソコン内にダウンロードされてから再生されるようでお奨めしない。

(注)IEで再生されない場合は下記を確認のこと。

 (スタート>既定のプログラム>プログラムのアクセスとコンピュータの規定の設定>カスタム>既定のメディアプレーヤ)でラジオボタンで「Windows Media Player」を選択する。

  動画(wmv)          麦の唄(mp3)

(g) ドキュメントファイルの表示

いずれもあらかじめ「Image」フォルダに目的のファイルを入れておく。

文字列/図を選び、ハイパーリンクで「Image」フォルダ内のファイルを指定する。(※a)

・MS Word(ワード)

いきなりですがワードは出来ません。ソースコードを修正すれば出来ますがお奨めしません。

・MS EXCEL(エクセル)

表示する前に「開く/保存する」を選ぶことになります。

・MS Power Point(パワーポイント)

表示する前に「開く/保存する」を選ぶことになります。もちろんパワーポイントがインストールされていないパソコンでは開くことは出来ません。

・Adobe PDF

普通に開くことが出来ます。

 

※a ハイパーリンクする時に「ターゲットフレーム」を「新しいウィンドウ」にすれば別タブで開きます。

 

 

 

とりあえず ここまで。あらたな知識を得たら追記していきます。 (ゆーめ)

 

inserted by FC2 system