1 ~ ~ HTMLが 全 く 分 からない 初 心 者 でも ~ ~ はじめに この 度 は 本 レポート HTMLが 全 く 分 からない 初 心 者 でも かんたん 無 料 でホームページ を 作 成 する 方 法 をダウンロードして 頂 き まことにありがとうございました 本 レポートは HTMLやCSSなどが 全 く 分 からない 初 心 者 の 方 向 けに できるだけ 分 かりや すい 説 明 を 心 がけて 作 成 させて 頂 きました ただ 経 験 された 事 がある 方 ならお 分 かりかもしれませんが ホームページを 作 成 する 作 業 は 意 外 と 思 うようにいかない 事 が 多 く たくさんの 時 間 と 労 力 を 費 やしたあげくに 結 局 挫 折 した というパターンもよくある 話 です 当 レポートでは そのような 苦 労 をせずに ホームページを 作 成 するために bptranという 少 々 変 わった 無 料 ソフトでホームページを 作 成 する 手 順 を 解 説 しています bptranはホームページビルダーのようなソフトとは 全 く 違 うタイプものです bptranにホームページに 挿 入 したいテキストや 画 像 ファイルをリスト 化 したデータと bptran に 対 応 したホームページテンプレートを 読 み 込 ませれば あとは 自 動 的 にHTMLファイルとい うホームページを 表 示 するためのファイルを 生 成 してくれます 実 際 にbptranで 作 成 したデモサイトは 下 記 のURLで 見 る 事 ができます http://blcinc.net/bptran/ 使 い 方 次 第 では 大 量 のページを 一 瞬 で 量 産 する 事 も 可 能 で ホームページやインターネッ トを 使 ったお 金 儲 け(アフィリエイト)などでも 活 用 している 人 もいます 初 めてホームページを 作 成 する 場 合 まずはホームページに 挿 入 するテキストや 画 像 ファイ ルを 用 意 し それをExcelの 表 にリスト 化 していく 作 業 がありますので その 作 業 には 数 時 間 が 必 要 になってくるかもしれません しかし いったんデータができてしまえば あとは 半 自 動 でbptranがホームページを 作 ってく れます Bptranをはじめ 本 作 業 で 使 用 するツールやサービスは 無 料 で 使 用 できるものがほとんどな ので お 金 もかからずホームページを 作 成 していただけるはずです Microsoft Excelは 有 料 ですが 代 わりになるソフトは 無 料 で 使 用 も 可 能 です では 本 レポートの 作 業 を 上 から 順 番 に 実 行 してゆき ホームページを 作 成 してみましょう
2 必 要 なもの 1.パソコン 光 かケーブル ADSLなどの 高 速 インターネット 回 線 がつながっているもの 2.Excel Excelがない 場 合 は Excelと 互 換 性 のある 表 計 算 ソフト 下 のリンクから 無 料 の 互 換 ソフト(OpenOffice)をダウンロード インストールできます http://www.openoffice.org/ja/ 3.bptran ホームページ 作 成 を 簡 単 にしてくれる 無 料 のソフト 下 のリンクからダウンロード 可 できます http://www.vector.co.jp/soft/win95/net/se157300.html 4.bptran 対 応 済 ホームページテンプレート bptranに 対 応 済 のホームページテンプレートは 下 記 のURLから 無 料 でダウンロードして 下 さい https://www.facebook.com/pages/felix- Asia/290266951088253?sk=app_404284039647850 5.TeraPad ホームページ 作 りに 定 番 のテキストエディタ 下 のリンクからダウンロードできます http://www.vector.co.jp/soft/win95/writing/se104390.html 6.サーバー 作 成 したホームページを 置 くインターネット 上 の 土 地 のようなものです 無 料 で 借 りれるところもたくさんあります ここでは 忍 者 ツールズ という 無 料 レンタルサーバーをおススメします 下 記 のURLから 登 録 をして 下 さい http://www.ninja.co.jp/hp/ 7.FTPソフト 作 成 したホームページをサーバーに 転 送 するためのソフトです 無 料 のソフトでおススメなのは Filezilla という 無 料 のFTPソフトです ダウンロード 方 法 と 使 い 方 のマニュアルのURLを 下 に 載 せておきます http://www.ninja.co.jp/hp/help/manual/1043/
3 STEP1: 作 業 前 に 上 に 挙 げた 必 要 なものがそろったら bptran 対 応 済 ホームページテンプレート( 例 : [PAGE1].html)をダブルクリックして 開 き どんなページ 構 成 かをご 確 認 してみましょう また 左 サイドのメニューもそれぞれクリックし 他 のページの 構 成 も 見 てみましょう 続 いて bptran 対 応 済 ホームページテンプレートと 同 じフォルダに 入 っている 専 用 Excel ファイル( 例 :bptran_data_type1.xlsx)を 開 きます 専 用 Excelファイルには bptran 対 応 済 ホームページテンプレート( 例 :[PAGE1].html~ [PAGE5].html)にそれぞれ 対 応 したシートがあり さらに 各 シートの 背 景 色 の 付 いたセル には ホームページテンプレートの 各 部 分 に 対 応 した 名 前 が 付 いているのを 確 認 しましょ う 大 まかにで 結 構 ですが ホームページテンプレートと 専 用 Excelシートとを 見 比 べてみて 下 さい 勘 の 良 い 方 はもうお 気 づきかもしれませんが bptranというソフトは この 専 用 Excelシート を 元 に 作 成 されたデータを 読 み 込 んで ホームページテンプレートのそれぞれの 箇 所 に データを 当 てはめていってくれるソフトなのです たとえばbptranを 操 作 すると bptran 対 応 済 ホームページテンプレート[PAGE1].htmlの [PAGE1_H1]と 書 かれた 部 分 は 専 用 Excelファイル PAGE1 シートの PAGE1_H1 と 言 う 列 に 入 っている 文 字 列 に 書 き 換 えられるといった 具 合 です このbptranと 専 用 Excelファイルとホームページテンプレートとの 関 係 性 が 大 まかに 理 解 で ましたでしょうか 大 まかに 理 解 ができたところで. 改 めてbptran 対 応 済 みホームページテンプレート( 例 : [PAGE1].htmlなど)をご 覧 になり ページ 内 の 各 箇 所 にどんなテキストや 画 像 を 入 れるか を 考 えてみましょう なお ページのタイトルやメニューなど 箇 所 によってはあらかじめどんな 種 類 のテキスト を 入 れるか 指 定 されているものもあります また ページの 表 面 には 表 示 されないが 入 力 しなければならない 特 殊 なテキストなども あります ( 検 索 エンジン 対 策 用 のテキストなど) どの 箇 所 にどのようなテキストを 入 れたらよいかは 専 用 Excelファイルの 各 項 目 ( 背 景 色 が 青 や 黄 色 赤 になっている 行 )の 上 の 行 にガイドがそれぞれ 記 載 されています これらのガイドを 参 考 にしながら 各 箇 所 に 挿 入 するテキストや 画 像 を 決 定 していきます
4 補 足 : 画 像 ファイルについて テキストの 下 書 きや 入 力 の 前 に 挿 入 する 画 像 ファイルを 準 備 しましょう bptran 対 応 済 テンプレートはjpg 画 像 のみ 対 応 可 能 です 挿 入 したい 画 像 や 写 真 を 用 意 したら それぞれの 画 像 のサムネイル( 縮 小 版 ) 画 像 を 作 成 します サムネイル 画 像 は ホームページのレイアウトに 合 わせ 実 際 に 見 せたい 画 像 を 画 像 編 集 ソフトなどで 編 集 して 作 成 しますが 今 回 は 初 心 者 向 けという 事 で 縮 小 のみをしてくれ る FC2 画 像 縮 小 ( 無 料 ) を 以 下 のURLで 使 うことにしましょう http://r.fc2.com/ 縮 小 する 際 のサイズはピクセル px という 単 位 を 使 います ホームページ 内 の 各 箇 所 に 適 合 する 画 像 サイズの 縦 横 のピクセル 数 は 専 用 のExcel ファイルの 各 項 目 上 のガイドに 231px * 150px という 具 合 に 記 載 されていますので その サイズに 合 わせて 縮 小 画 像 を 作 成 して 下 さい サムネイル 画 像 をクリックすると 元 の 大 きさの 画 像 が 表 示 される という 仕 組 みの 為 画 像 ファイルは 1つの 画 像 に 付 サムネイル( 縮 小 版 ) と 元 の 大 きさの 画 像 の それ ぞれ2つづつを 用 意 することになります 用 意 した 画 像 にはそれぞれわかりやすい 名 前 を 付 け images フォルダの 中 に 入 れてお きます 画 像 を 他 のフォルダの 中 に 入 れたり images フォルダの 名 前 を 変 えてしまったりす ると 画 像 が 表 示 されなくなってしまいます 以 降 の 作 業 で 画 像 ファイル 名 を 入 力 する 際 は 画 像 ファイル 名 を 拡 張 子.jpg の 手 前 ま で 入 力 して 下 さい 例 : hana1_s.jpg の 場 合 hana1_s と 入 力 する イメージがわいてきたらさっそく 挿 入 するテキストなどを 下 書 きしてゆきましょう STEP2: 下 書 き 作 業 本 来 は 挿 入 するテキストや 画 像 ファイルが 決 まったら 専 用 Excelファイルの 各 箇 所 に 直 接 入 力 していくのですが 便 宜 上 専 用 Excelファイルの 書 式 設 定 が 縮 小 して 表 示 という 設 定 になっており 長 い 文 章 を 入 力 した 時 は 字 がとても 小 さくなりほとんど 読 めなくなって しまいます もちろん 数 式 バーを 見 れば 入 力 内 容 は 読 めますので 下 書 きは 使 用 せず 直 接 専 用 Excelファイルへ 書 きこんでゆくことも 可 能 です
5 下 書 きを 使 用 するかしないかは どちらでもやりやすい 方 を 選 んで 下 さい 下 書 きを 使 用 しない 場 合 はSTEP2は 飛 ばしてSTEP3へ 進 んで 下 さい ただし どちらの 場 合 も 各 入 力 作 業 の 注 意 事 項 をよく 読 んでから 入 力 作 業 に 入 って 下 さい 下 書 きを 使 用 する 場 合 は 下 記 のように 使 用 します 1. 挿 入 する 内 容 の 下 書 きには 入 力 項 目 下 書 き.txt という 下 書 き 用 のテキストファイル を 使 用 しますが 入 力 項 目 下 書 き.txt はダブルクリックでは 開 かず 右 クリック で 表 示 されるメニューから プログラムから 開 く を 選 択 し さらに Terapad を 選 択 して Terapad で 開 いて 下 さい もし Terapad での 開 き 方 が 分 からないときは 空 の Terapad をひとつ 開 き その Terapad の 上 に 入 力 項 目 下 書 き.txt ファイルをドラッグ&ドロップする 事 でも 開 くこと ができます 2. 専 用 Excelシートの 場 合 各 項 目 は 横 並 びに 並 んでいますが 入 力 項 目 下 書 き.txt の 各 項 目 は 全 く 同 じ 項 目 が 縦 に 並 んでいます 入 力 項 目 下 書 き.txt に 各 項 目 を ホームページテンプレートと 専 用 Excelファイルの 最 上 行 のガイドを 参 照 しながら 順 番 に 入 力 していきます なお 入 力 時 の 注 意 事 項 は 以 下 の 通 りです 各 入 力 作 業 の 注 意 事 項 共 通 項 目 文 章 の 途 中 で [Enter]キーでの 改 行 や タブ や 半 角 カンマ, や ダブルクォーテー ション " を 入 れないで 下 さい キーワードを 入 力 する 項 目 PAGE1_KEYWORDS~PAGE5_KEYWORDS は 5つ 程 度 の キーワードを 区 切 りで 入 力 して 下 さい ( 例 :ABC 乾 パン 非 常 食 純 日 本 製 乾 パン 災 害 用 ) 金 額 の 三 ケタ 区 切 りの 半 角 カンマ, を 使 用 したい 場 合 も 半 角 カンマ, の 代 わりに を 入 力 して 下 さい ( 例 :12,000 円 12 000 円 ) キーワード 区 切 りの も 金 額 の 区 切 りの も 後 から 元 に 戻 しますが 作 業 の 便 宜 上 一 時 的 にこのようにして 下 さい
6 補 足 : 改 行 やカンマについて [Enter]キーでの 改 行 や タブ や 半 角 カンマ, や ダブルクォーテーション " 入 れるとCSVの 読 み 込 みがうまくいきません 改 行 を1つ 入 れたい 時 は <br> 改 行 を2つ 連 続 で 入 れたい 時 は <br> <br> と 入 力 して 下 さい 作 業 の 一 番 最 後 に はまとめて, に 戻 します テキストを 入 力 する 項 目 で 入 力 する 内 容 が 何 もない 場 合 は と 入 力 して 下 さ い ( かっこは 含 みません ) リンクを 挿 入 したい 時 は ダブルクォーテーションは 使 わず 代 わりにシングルクォー テーションを 使 用 して 下 さい 例 > 通 常 <a href="hogegoge.com">hoge</a> 本 下 書 きファイル および 専 用 Excelファイルへの 入 力 時 <a href='hogegoge.com'>hoge</a> 専 用 Excelファイルの 入 力 項 目 の 行 ( 色 のついた 行 )は 項 目 列 ごとに 色 分 けがされて おり それぞれの 色 には 下 記 のような 意 味 があります 青 い 列 : 全 部 のページで 同 じでも 問 題 ないデータ(メニューなど) シートPAGE1のそれぞれの 対 応 するセルのデータを 反 映 させてもOK 橙 列 : できればページごとに それぞれ 最 適 なものを 設 定 したデータ 列 どうしても 面 倒 な 時 はシートPAGE1のデータを 反 映 させてもOK 赤 列 : 必 ずページごとにそれぞれ 設 定 する 必 要 のあるデータ 列 青 い 列 のみは シートPAGE1にだけ 入 力 すれば 他 のシートに 自 動 反 映 するように なっています 3. 入 力 作 業 が 終 わったら いったん 内 容 を 上 書 き 保 存 し てから 専 用 Excelファイルの 各 項 目 へ コピーアンドペーストしてゆきます Excelに 貼 り 付 ける 時 は 入 力 内 容 の 方 だけをコピーペーストして 下 さい ( 手 前 のタブや 項 目 名 を 入 れない )
7 STEP3: CSVファイルへの 変 換 作 業 ここからExcelにまとまったデータをCSVファイルというものに 変 換 する 作 業 を 行 います ExcelのデータをCSV 出 力 するには 名 前 を 付 けて 保 存 から.csv 形 式 で 保 存 する 方 法 がありますが Excelのバージョンや Microsoft 以 外 の 表 計 算 ソフトによっては その 機 能 がない 場 合 もあるようなので ここでは 別 の 方 法 をご 説 明 します 1.まずは Excelでまとめたデータが 消 えてしまわないように 上 書 き 保 存 しておきます 2. 空 のTerapadを 開 きます 3. 完 成 したExcelファイルの1 枚 目 のシートの 背 景 色 の 付 いた 項 目 名 と 各 項 目 名 の 下 に 入 力 または 貼 り 付 けたデータをすべて 選 択 コピーします この 時 必 ずデータを 入 力 または 貼 り 付 けたセルだけではなく 背 景 色 のついた 項 目 名 のセルも 同 時 選 択 コピーするようにして 下 さい また 元 々 項 目 名 が 指 定 されていない 列 まで 選 択 範 囲 が 右 にはみだしてしまわないよう に 注 意 して 下 さい 参 考 画 像
8 4.コピーしたデータを 空 のTerapadに 貼 り 付 けます 5. 正 常 に 貼 り 付 けができると 項 目 名 と 各 データが タブ 区 切 りの 状 態 で 選 択 コピーし た 行 数 分 にわたってTerapad 上 に 表 示 されます 6.このデータがタブ 区 切 りのままだとbptranが 正 常 に 読 み 込 むことができないため 下 記 の 要 領 でTerapadの 機 能 を 使 い タブを 一 括 で 半 角 カンマ, に 置 き 換 えます A まずはカーソルをデータ 文 字 列 の 先 頭 に 置 いてから Terapadの 上 部 ツールバー 内 の[ 検 索 ]ボタンをクリックし 置 換 を 選 択 します B 置 換 という 小 さな 窓 が 開 いたら 検 索 する 文 字 列 に \t ( 半 角 )と 入 力 し 置 換 後 の 文 字 列 に, ( 半 角 )と 入 力 し オプション のところは \n= 改 行,\t=TAB,\\=\(E) と 置 換 動 作 の 確 認 (P) の2か 所 だけにチェックを 入 れます C 検 索 方 向 は 下 へ を 選 択 し [ 連 続 置 換 ]のボタンをクリックします D すると 置 き 換 えますか? というアラートが 表 示 されますので キーボードのEnterを 押 すか Y のキーを 押 していくと 順 番 に 変 換 がなされていきます 面 倒 な 時 は[すべて]のボタンをクリックすれば 一 発 で 全 て 変 換 してくれますが 万 が 一 間 違 えた 時 は 元 に 戻 すのが 大 変 だったり 元 に 戻 せなかったりすることがありますの で 注 意 して 下 さい E 最 後 に 必 ず 上 書 き 保 存 してから 閉 じます もともと 半 角 カンマ, を 使 いたかったのに 等 で 代 用 していた 部 分 をカンマに 戻 すのはHTMLファイルに 変 換 した 後 に 行 います ワンポイント ここで 一 番 上 の 行 ([PAGE1]などが 入 っている 行 )のカンマ, の 数 と 2 行 目 以 降 のカン マ, の 数 が 同 じでない 時 は あとからbptranが 正 常 にCSVデータを 読 み 込 む 事 ができま せん もしあとで bptranでcsvファイルの 読 み 込 みがうまくいかない 時 は 上 記 のような 半 角 カ ンマ, の 数 が 合 っていない 可 能 性 を 疑 ってみるのが 良 いかもしれません 7. 上 記 の タブ 区 切 りを 半 角 カンマに 置 換 する 作 業 を 終 えたら 一 番 最 後 の 行 の 最 後 の 文 字 の 後 ろに 改 行 が 入 っているかどうかを 確 認 し もし 入 っていないようであれば 必 ず 最 後 の 行 の 最 後 の 文 字 の 後 ろに 改 行 が 入 るようにして 下 さい 8. 下 記 のA~Cの 要 領 でファイルを 保 存 します
9 A Terapad 上 部 のツールバー 内 の[ファイル]をクリックし 文 字 / 改 行 コード 指 定 保 存 を 選 択 します B 文 字 / 改 行 コード 指 定 保 存 ボックスが 開 いたら その 中 の 文 字 コード を SHIFT-JIS 改 行 コード を CR+LF を 選 択 し [OK]ボタンをクリックします 今 回 は 初 めてファイルを 作 成 する 前 提 なので 名 前 を 付 けて 保 存 を 選 択 して 下 さ い C 名 前 を 付 けて 保 存 のボックスが 表 示 されたら 保 存 場 所 を 適 宜 選 択 し ボックス 下 部 の ファイルの 種 類 は すべてのファイル(*.*) を 選 択 してから ファイル 名 に 任 意 の ファイル 名 に 拡 張 子.csv を 付 けて 入 力 して[ 保 存 ]ボタンをクリックします 9. 上 記 手 順 2. の 作 業 をExcelのシートごとに 行 っていき 最 後 にエクセルのシートの 数 と 作 成 したcsvファイルの 数 が 同 じになるようにします ここまでくれば ホームページはほとんどできたも 同 然 です STEP4: bptranでcsvファイルを 読 み 込 む 1.bptranを 開 きます 2. ソースファイル(CSV) の[ 参 照 ]ボタンをクリックし 上 で 保 存 したCSVファイルを 選 択 し ます 3. 他 の 箇 所 は 後 で 設 定 するので 先 にCSVファイルのデータが 正 常 に 読 み 込 めるかど うかのチェックを 行 うため ボックス 中 段 より 少 し 下 の 左 端 にある[CSVロード]ボタンをク リックし CSVファイルをbptranに 読 み 込 ませます 4. 正 常 に 読 み 込 めた 場 合 は [CSVロード]ボタン 下 の 白 い 背 景 の 枠 の 中 に 文 字 化 けなど せずに 項 目 名 とデータが 縦 線 で 区 切 られた 状 態 でキレイに 横 に 並 んで 表 示 されます ワンポイント bptranの 画 面 で 見 た 時 に 項 目 とデータにズレているように 見 える 場 合 がありますが 実 際 に 出 力 してみると 問 題 ない 事 もあります 出 力 してみたらやっぱりズレていた という 場 合 は Tabを 半 角 カンマに 変 換 する 作 業 がう まくいっていない 可 能 性 があります
10 文 字 化 けなどしている 場 合 は CSVファイルの 保 存 時 に 指 定 した 文 字 コードがShift-JIS 以 外 になっている 可 能 性 があります そのような 時 は いったんbptranを 閉 じてからCSVファイルを 開 きなおし 各 行 のカンマの 数 が 一 致 しているかどうかや 文 字 コードの 指 定 がShift-JISになっているかどうか 確 認 し て 適 宜 修 正 しましょう CSVファイルの 修 正 をする 時 は bptranを 閉 じずにCSVを 編 集 するとうまくいかなかった り 変 な 文 字 が 混 入 する 事 があるので 必 ずCSVの 編 集 をする 時 はbptranをいったん 閉 じ てから 行 いましょう 5.CSVのデータを 正 常 に 読 み 込 めた 場 合 は 続 いて テンプレート(HTML) の[ 参 照 ]ボタ ンをクリックし テンプレートとなるHTMLファイルを 選 択 します 6. 続 いて 出 力 先 (フォルダ) ですが こちらは 直 接 保 存 先 を 入 力 しなければいけませ んので もし テンプレートのHTMLファイルと 同 じ 場 所 に 保 存 したい 時 は 手 順 5. で 選 択 して 表 示 されているパスをコピー 貼 り 付 けし 貼 り 付 けたパスの 最 後 の \ マーク 以 降 を 消 せばOKです ( 例 C:\Documents\[PAGE1].html をコピーし 最 後 の [PAGE1].html だけ 消 して C:\Documents\ の 状 態 にする ) 7. 生 成 ファイル 名 を フィールド 名 を 指 定 する にします この 生 成 ファイル 名 というのは 何 というファイル 名 でHTMLファイルを 作 成 するか という 事 です プレフィックス は 生 成 ファイル 名 を フィールド 名 を 指 定 する にした 場 合 チェック 不 要 ですが もし 生 成 ファイル 名 を レコード 番 号 ( 自 動 ) や 連 番 ( 自 動 ) にした 場 合 チェックを 入 れる 事 で ファイル 名 の 頭 に 付 ける 文 字 列 を 指 定 する 事 もできます ( 例 : プレフィックス の 文 字 列 を abc にした 場 合 HTMLファイル 名 が 自 動 的 に abc00001.html abc00002.html... のようになってゆきます ) 8. 続 いてHTMLファイルの 名 前 を 指 定 する フィールド 名 の 選 択 ですが フィールド 名 デフォルトのExcelファイルのデータの 場 合 [PAGE1][PAGE2]... と 表 示 された 項 目 がそれぞれのファイル 名 にあたります 特 にオリジナルでExcelデータの 改 変 をされていない 場 合 は フィールド 名 という 箇 所 で 使 用 したいテンプレートに 該 当 する 列 を 選 択 して 下 さい [PAGE1]のテンプレートを 使 用 するのに フィールド 名 の 選 択 で[PAGE2]のフィール ドを 選 択 してしまうと 思 った 結 果 にならなくなります
11 9.チェックファイル 生 成 のチェックボックスのチェックは 任 意 で 入 れて 下 さい 入 れておくと _index.html db.html というHTMLファイルが2つ 自 動 作 成 されます この 二 つのファイルは サーバーにアップロードするためのものではありませんが bptranでのcsvファイルの 読 み 込 み 作 業 等 が 問 題 なく 行 われたかどうかのチェックが できるようになっています たとえば db.html を 開 くと 各 項 目 とデータがきちんと 同 じ 数 だけ 並 んでいるかどうか の 確 認 ができます また _index.html は 同 一 のHTMLテンプレートを 使 用 して 一 つのCSVデータから 複 数 のHTMLファイルを 連 続 生 成 した 際 などには 便 利 です 上 記 のような 連 続 生 成 をした 場 合 には _index.html を 開 くと 各 HTMLファイルのリンク が 目 次 のように 表 示 されるので そのリンクからHTMLファイルを 順 番 に 開 き それぞれ のHTMLファイルに 問 題 がないかのチェックを 行 う 事 ができます 10. 一 番 上 の 自 動 実 行 と リピート はチェックを 外 します CSVに 複 数 行 のデータを 入 れた 時 でも bptranの 画 面 一 番 下 の 白 い 背 景 の 中 の 項 目 名 以 外 の 対 象 行 が 全 て 選 択 されて 青 く 反 転 していれば 行 数 分 だけHTMLファイルが 生 成 さ れます 11. 一 番 下 の 白 い 背 景 の 枠 に 表 示 されたCSVのデータの 行 を 選 択 します 取 り 込 みたいデータ 行 をクリックし 取 り 込 みたいデータ 行 が 全 て 青 く 反 転 した 状 態 にして 下 さい 12.[HTMLを 生 成 ]ボタンをクリックし 一 番 下 に 100% 完 了 と 表 示 されれば 指 定 したフォ ルダに 指 定 したフィールド 名 の 名 前 でHTMLファイルが 新 たに 生 成 されています 上 記 の 作 業 を 各 CSVファイルごとに 行 っていくので 最 後 にCSVファイルの 数 と bptranで 生 成 されたHTMLファイルが 同 じ 数 になる 事 になります チェック 用 ファイルは 除 く 13. 半 角 カンマの 代 わりに 入 れていた を 半 角 カンマ, に 戻 す 作 業 を 下 記 の 要 領 で 行 います A まずはカーソルをデータ 文 字 列 の 先 頭 に 置 いてから Terapadの 上 部 ツールバー 内 の[ 検 索 ]ボタンをクリックし 置 換 を 選 択 します B 置 換 という 小 さな 窓 が 開 いたら 検 索 する 文 字 列 に と 入 力 し 置 換 後 の 文 字 列 に, ( 半 角 )と 入 力 し オプション のところは \n= 改 行,\t=TAB,\\=\(E) と 置 換 動 作 の 確 認 (P) の2か 所 だけにチェックを 入 れます C 検 索 方 向 は 下 へ を 選 択 し [ 連 続 置 換 ]のボタンをクリックします
12 D すると 置 き 換 えますか? というアラートが 表 示 されますので キーボードのEnterを 押 すか Y のキーを 押 していくと 順 番 に 変 換 がなされていきます 面 倒 な 時 は[すべて]のボタンをクリックすれば 一 発 で 全 て 変 換 してくれますが 万 が 一 間 違 えた 時 は 元 に 戻 すのが 大 変 だったり 元 に 戻 せなかったりすることがありますの で 注 意 して 下 さい E 最 後 に 必 ず 上 書 き 保 存 してから 閉 じます 14. 生 成 されたHTMLファイルをbptran 対 応 済 みホームページテンプレートが 入 っていた フォルダに 戻 してから 開 き 思 ったような 表 示 になっているかどうかを 確 認 して 下 さい HTMLファイルは CSS や js や images といったフォルダとの 関 係 性 が 変 わると 正 常 に 表 示 できなくなってしまいますので 各 フォルダとHTMLファイルの 階 層 は 変 えない ようにご 注 意 下 さい 生 成 されたHTMLファイルがパソコン 上 で 問 題 なく 表 示 できるようであれば 各 ファイルを サーバーにアップロードする 作 業 を 行 います STEP5: ファイルのアップロード 1.FTPソフト Filezilla の 設 定 を 下 記 のURLを 参 考 に 行 って 下 さい http://www.ninja.co.jp/hp/help/manual/1043/ 2.FTPソフトでサーバーに 接 続 できたら これまでのステップで 作 成 したHTMLファイルと CSS や js や images といったフォルダを 階 層 の 関 係 性 を 保 ったままサーバーにアッ プロードします 3. 契 約 したサーバーから 発 行 されているURLにアクセスし 作 成 したホームページが 表 示 されていれば 成 功 です お 疲 れ 様 でした! 付 録 : 参 考 サイト 忍 者 ツールズの 登 録 方 法 :http://www.ninja.co.jp/help/manual/592/ FTPソフトへの 転 送 設 定 方 法 :http://www.ninja.co.jp/hp/help/manual/1027/ Filezillaの 設 定 方 法 :http://www.ninja.co.jp/hp/help/manual/1043/