1. 新 しくページを 作 成 する( 無 制 限 タイプ) デザイン 変 更 検 索 1 左 のメニューから デザイン 変 更 をクリックします 2ページタイプが 3 種 類 あります ここでは 無 制 限 タイプ を 選 びます テーマとカラーがありますので ここでデザインを 絞 り 込 むこと

ウェブ 作 成 システム Web Factory 1

1. 新 しくページを 作 成 する( 無 制 限 タイプ) デザイン 変 更 検 索 1 左 のメニューから デザイン 変 更 をクリックします 2ページタイプが 3 種 類 あります ここでは 無 制 限 タイプ を 選 びます テーマとカラーがありますので ここでデザインを 絞 り 込 むことが 出 来 ます 1ページタイプ では 情 報 量 が 限 られてしまい 5ページタイプ は 目 次 が 編 集 できないため 無 制 限 タイプ がオススメです 3 検 索 ボタンを 押 してデザイン 一 覧 を 表 示 してみましょう デザインを 決 定 する デザイン 一 覧 が 表 示 されますので お 好 みのデザインをクリックします 2

サムネイルをクリックすると 確 認 画 面 へ 進 みます このデザインに 変 更 する を 押 してデザインを 決 定 します ページ 一 覧 編 集 ページ 一 覧 の 画 面 です はじめはトップページのみの 表 示 です 1 ページ 以 降 の 作 成 は 新 規 追 加 でページを 追 加 してください トップページ という 名 前 が 表 示 されていますので 編 集 をクリックします 3

基 本 項 目 の 入 力 基 本 項 目 の 欄 に 入 力 します まず タイトル を 入 力 します 検 索 キーワード は 関 連 するキーワードを 入 力 します 検 索 されやすいキーワードを 入 れると 良 いです その 下 のプルダウンメニューで 文 字 の 色 の 変 更 ができます わからない 場 合 はデフォルトのままで 結 構 です HTML タグを 使 いたい 場 合 は HTML タグ の 欄 を 使 用 にします 会 社 ロゴは 画 像 を 表 示 できます ( 画 像 のアップロードは 後 で 説 明 します ) 画 像 が 無 い 場 合 は 空 欄 に 入 力 した 文 字 がロゴの 部 分 に 表 示 されます 左 側 項 目 の 入 力 この 項 目 は 1ページタイプ の 場 合 のみ 表 示 されます セット1~セット5があり 入 力 方 法 は 以 下 と 同 じ 4

右 側 項 目 の 入 力 右 側 項 目 の 欄 に 入 力 します 写 真 については 後 で 説 明 します 見 出 ( 太 字 ) テキスト( 普 通 の 文 字 )をそれぞれ 入 力 します ( 写 真 のアップロードは 後 で 説 明 します ) この 項 目 は 1ページタイプ の 場 合 のみセット5まで 表 示 されます [ 表 示 非 表 示 ]をクリックすると 入 力 欄 が 1 セット 分 現 れます 確 認 と 更 新 (トップページ 及 び 以 降 のレイアウト 1~6 共 通 ) 更 新 担 当 者 の 名 前 を 入 力 することができます 掲 載 は 実 際 のページに 公 開 するときに 掲 載 する を 選 択 して 下 さい 編 集 だけしておいて 公 開 は 後 からする 場 合 は 掲 載 しない を 選 びます 右 下 に 3 つボタンがあります 中 止 は 編 集 を 中 止 します 確 認 は 編 集 中 のページを 実 際 に 表 示 することができます 更 新 は 実 際 のページに 編 集 結 果 を 反 映 させます これで 初 めてインターネット 上 に 公 開 されます ただし 掲 載 しない を 選 んでいる 場 合 は 実 際 のページは 準 備 中 になります 5

1 ページ 以 降 の 作 成 (1)ページ 一 覧 編 集 左 のメニューから ページ 一 覧 編 集 を 選 びます 新 規 追 加 でページ 1 を 作 成 します 新 規 作 成 を 選 択 します 1 ページ 以 降 の 作 成 (2)レイアウト 選 択 レイアウトが 1 から 6 までありますので 目 的 に 応 じて 選 択 して 下 さい レイアウトタイプ-1 レイアウトタイプ-2 レイアウトタイプ-3 レイアウトタイプ-4 レイアウトタイプ-5 レイアウトタイプ-6 テキストを 入 力 変 更 できます シンプルなレイアウトに 向 いています 見 出 しとその 内 容 を 入 力 できる 標 準 的 なレイアウトです 表 組 ができるレイアウトです 会 社 概 要 沿 革 等 表 組 がメインのページにご 利 用 下 さい テキストまたはタグを 自 由 に 使 えるレイアウトです 見 出 しとその 内 容 そして 画 像 ファイルをアップロードできるレイアウトです メール 送 信 用 のフォームを 作 成 できるレイアウトです (アドレスを 非 公 開 にできます ) 6

メニュータイトルの 入 力 基 本 項 目 のタイトルの 下 に メニュータイトル の 入 力 欄 があります ここに このページのわかりやすい 説 明 を 入 力 して 下 さい (トップページの 左 側 にメニューとして 表 示 されます ) 未 入 力 のままだとメニューが 表 示 されませんので ご 注 意 下 さい レイアウト 1 テキスト 入 力 欄 が 2 つあります ここにテキストを 入 力 して 下 さい HTML タグ 入 力 支 援 ツール をクリックすると 簡 単 に 文 字 の 色 や 大 きさの 変 更 やリンクの 挿 入 などができます その 場 合 作 成 されたタグをコピーして テキスト 欄 に 貼 り 付 ける 必 要 があります また 基 本 項 目 の 中 の HTML タグ の 欄 を 使 用 にする 必 要 があります (タグに 関 しては 以 降 も 同 様 ) 7

レイアウト 2 見 出 しとテキストを 10 セットまで 入 力 できます HTML タグも 利 用 できます レイアウト 3 表 を 2 セット 入 力 できます 項 目 名 を 2 つで 10 行 の 表 が 作 成 できます HTML タグも 利 用 できます 8

レイアウト 4 テキスト 欄 が 一 つあるタイプです HTML タグも 利 用 できます レイアウト 5 見 出 し テキストと 写 真 を 10 セット 入 力 できます 写 真 の 入 力 方 法 は 後 で 出 てきます HTML タグも 利 用 できます 9

レイアウト 6 フォームメールを 設 置 できます 設 定 した 宛 先 メールアドレスにメールが 送 信 されます (ここに 設 定 したメールアドレスは 実 際 のページには 表 示 されません ) 項 目 は 6 個 まで 設 定 できます 入 力 欄 の 行 数 も 指 定 することができます 確 認 と 更 新 (トップページ 及 びレイアウト 1~6 共 通 ) レイアウトを 決 めて 入 力 が 終 わったら 確 認 ボタンをクリックして 実 際 の 表 示 を 確 認 し 良 ければ 掲 載 欄 を 掲 載 する に 変 更 し 更 新 ボタンをクリックします 10

2. 写 真 をアップロードする(ページ 編 集 画 面 から) 例 では トップページの 写 真 をアップしてみます ファイル 選 択 (1) ページ 編 集 に 入 り 写 真 の 項 目 から 参 照 を 押 します 既 にアップした 写 真 等 があれば アプロードした 写 真 の 欄 に 確 認 用 と 削 除 用 のボタンが 表 示 されます ファイル 選 択 (2) 選 択 画 面 が 別 ウィンドウで 開 きます ここから アップロードしたいファイルを 選 択 します ( 拡 張 子 が jpg jpeg gif png の 画 像 に 対 応 しています ) 選 んだら 開 く ボタンでファイルを 決 定 します 11

ファイルをアップロード 参 照 ボタンの 左 に 選 択 したファイル 名 のパスが 表 示 されます この 画 像 ファイルで 良 ければ アップロード を 押 します ファイルの 確 認 削 除 アップロードした 写 真 を 確 認 する 場 合 は 確 認 ボタンを 押 して 下 さい 別 窓 で 画 像 が 開 きます もし 間 違 ってアップロードした 場 合 などでも 写 真 を 削 除 できます 削 除 ボタンの 左 側 にチェックボックスがありますので これチェックしてから 削 除 ボタンを 押 して 下 さい これで 削 除 できます 画 像 を 確 認 できたら 全 体 の 表 示 を 見 てみましょう 12

表 示 の 確 認 アップロードできたら 全 体 を 確 認 します 編 集 画 面 の 右 下 の 確 認 ボタンを 押 すとページが 確 認 できます 表 示 例 13

3.HTML タグの 入 力 HTML タグの 入 力 について 基 本 的 にテキスト 入 力 エリアに HTML タグを 入 力 することが 出 来 ます ( 基 本 項 目 の HTML タグを 使 用 に 設 定 する 必 要 があります ) たとえば 文 字 色 を 指 定 するために この<font color="red">テキスト</font>は と 入 力 すると 表 示 は このテキストは となります タグの 部 分 は 半 角 英 数 です タグを 用 いる 場 合 は 改 行 なしで 入 力 して 下 さい 通 常 の 入 力 と 兼 用 するため 改 行 すると<br>が 挿 入 されます HTML タグ 入 力 支 援 ツール をクリックすると 左 下 のウインドウが 表 示 されますので 文 字 の 色 や 大 きさの 変 更 他 のHPへのリンクなどを 作 成 したい 場 合 は HTML タグ 支 援 ツール をクリックして タグを 生 成 して 下 さい ( 右 下 ) 生 成 されたタグをコピーして テキスト 欄 の 表 示 させたい 部 分 などに 貼 り 付 けて 下 さい 4.アップローダについて 画 像 のアップロード(1) 画 像 をアップロードするにはページの 編 集 からアップロードする 方 法 と ファイルのアップロード 機 能 を 使 用 する 方 法 があります ページ 編 集 からアップロードする 方 法 は ご 利 用 方 法 ( 基 本 機 能 ) にありますので ここでは ファイルのアップロード を 紹 介 します 14

画 像 のアップロード(2) ファイルを 参 照 して 実 行 ボタンを 押 すとアップロードされます アップロードしたファイルが 下 に 表 示 されます アップロードしたファイル 名 はパソコン 上 のファイル 名 と 同 じになりますので 半 角 英 数 で 拡 張 子 に 注 意 してご 利 用 下 さい 注 )この 機 能 では 画 像 はリサイズされません ご 自 分 でリサイズしてアップロードするか タグで 大 きさを 指 定 してください このファイル 名 を HTML タグ 入 力 で 使 用 することで 画 像 の 配 置 等 自 由 にレイアウトしたページを 作 成 することができます アップロードされたファイル: の 下 にファイル 一 覧 があります 使 いたいファイルをクリックすると 新 規 ウィンドウで 画 像 が 表 示 されます アドレス 欄 にある URL をコピーし テキスト 欄 で タグ 利 用 して 画 像 を 配 置 下 さい 例 : http://www.miyazaki-cci.net/test/upload/test.jpg ファイルを 画 像 として 使 用 する 場 合 <img src="http://www.miyazaki-cci.net/test/upload/test.jpg" alt=" 画 像 " height="100" width="150" border="0"> 15

ホームページ 作 成 のワンポイント 集 1デジカメで 撮 影 した 写 真 等 のサイズを 変 更 したい! デジカメ 写 真 を 開 いた 時 に 写 真 のサイズが 大 きすぎて 画 面 をはみ 出 してしまう 場 合 ホームページで 公 開 するには 大 きすぎます そこでサイズを 小 さくする 方 法 を 紹 介 します 急 急 ペイントを 使 用 する ペイントは 全 ての Windows パソコンにあらかじめ 入 っていると 思 います それを 使 用 する 方 法 を 紹 介 します (WindowsXPの 場 合 ) (WindowsXP 以 外 の 場 合 ) サイズ 変 更 したい 写 真 等 を 右 クリックし プ ログラムから 開 く Paint をクリックする サイズ 変 更 したい 写 真 等 を Shift を 押 しながら 右 クリックし アプリケーションから 開 く をクリックする ( 下 左 図 )そして MSPAINT を 選 択 し OK をクリックする ( 下 右 図 ) 図 内 の この 種 類 の~ の 欄 のチェックを 付 けると 次 からは この 作 業 をしなくてもペイントで 写 真 等 のファイルを 開 くようにな ります 16

ペイントで 開 いたら 変 形 伸 縮 と 傾 き をクリックする ( 下 左 図 )そして 変 更 したい 大 きさの 割 合 を 水 平 方 向 垂 直 方 向 ともに 同 じ 数 字 を 入 力 し OK をクリックする ( 下 右 図 )この 場 合 は 写 真 は4 分 の1のサイズにな ります 元 のファイルのサイズや 用 途 に 応 じて 数 字 を 入 力 して 下 さい 元 のサイズのファイルを 残 す 必 要 がある 場 合 は ファイル 名 前 を 付 けて 保 存 をクリックし 別 の 名 前 を 付 けて 保 存 しましょう 残 す 必 要 がない 場 合 は 上 書 き 保 存 で 保 存 しましょう 他 にもイラストレータなど 市 販 のソフトを 使 用 してもサイズ 変 更 等 はできます 2 表 示 される 文 字 を 変 更 したい!(HTMLタグの 利 用 ) 文 字 を 大 きくしたい 場 合 <font size="+2">あいうえお</font> とすると あいうえお と 表 示 されます ("+2")の 部 分 の 数 字 は-2 から+4 まで 設 定 できます 文 字 に 色 をつけたい 場 合 <font size="+2" color="red">あいうえお</font> とすると あいうえお と 表 示 されます 半 角 のスペースを 空 けて 上 の 様 に 入 力 して 下 さい ("red")の 部 分 は 好 きな 色 を 設 定 できます size を 変 える 必 要 がない 場 合 は 省 略 して 下 さい 太 字 にしたい 場 合 <b>あいうえお</b> とすると あいうえお と 表 示 されます アンダーラインを 引 きたい 場 合 <u>あいうえお</u> とすると あいうえお と 表 示 されます 文 字 を 斜 めにしたい 場 合 <i>あいうえお</i> とすると あいうえお と 表 示 されます 17

書 体 を 変 更 したい 場 合 <font face="hg 丸 ゴシック M-PRO">あいうえお</font> とすると あいうえお と 表 示 されます 書 体 については 見 た 人 のパソコンにその 書 体 がインストールされていない 場 合 はその 通 りには 表 示 されま せん 別 のホームページ 等 へリンクしたい 場 合 <a href="http://www.miyazaki-cci.or.jp/nichinan/" target="_blank"> 日 南 商 工 会 議 所 </a> とすると 日 南 商 工 会 議 所 と 表 示 され 文 字 の 部 分 をクリックすると 日 南 商 工 会 議 所 のホームページが 新 しいウインドウで 表 示 されます ("http://~/")の 部 分 にリンクしたいホームページのアドレスを 入 力 して 下 さい これらを 組 み 合 わせて 使 うこともできます 例 えば <font size="+2" color="red"><b><i>あいうえお</i></b></font> とすると あいうえお と 表 示 され ます 組 み 合 わせの 順 番 は 関 係 ありません 色 々と 試 してみて 下 さい 上 で 紹 介 したもの 以 外 にも 色 々あります 専 門 書 等 をご 覧 下 さい ただし 当 無 料 システムでは 使 用 できるものに 制 限 があります ホームページでは 半 角 カタカナは 使 わないほうが 良 いです 文 字 化 けすることがあります 注 意 <font>などのタグの 部 分 は 必 ず 半 角 英 数 で 入 力 して 下 さい ホームページのアクセスアップのために 頑 張 ってまめに 更 新 しましょう! 18