ホームページビルダー作成報告TOPへ

「ホームページビルダー」テクニカルガイド(V9/V8/V7/V6.5対応版)・目次

01 フォント >(15項目)

02 フレーム >(22項目)

03 リンクに関する設定 >(31項目)

04 表を操作する >(30項目)

05 ホームページの管理 >(17項目)

06 ページの装飾 >(64項目)

07 転送 >(20項目)

08 ウェブアートデザイナー >(49項目)

09 スタイルシート >(17項目)

10 完成から運用 >(25項目)

11 その他 >(20項目)


Part 01 フォント

<サイズと色を変更する(フォント属性)>

  1. 特定箇所のみフォントサイズや色を変更する
  2. 1ページごとにフォントの色を設定する

<サイズと色を変更する(スタイルシート)>

  1. 特定箇所のみフォントサイズを変更する
  2. 設定したフォントサイズを訪問者の環境に合わせて調整する
  3. どの環境でみてもフォントサイズが変わらないように固定する
  4. 特定箇所のみフォントの色を変更する
  5. 1ページごとにフォントサイズや色を設定する
  6. サイト全体のフォントサイズや色を変更する

<その他フォントに関する設定>

  1. フォントの種類を変更する
  2. フォントの属性を解除する
  3. 重要な文字列を強調する
  4. スタイルシートのフォント設定が反映されない場合の見直し箇所
  5. 外部スタイルシートが反映されない場合の見直し箇所
  6. プレビューやブラウザでページを確認すると文字化けしている場合
  7. フリーフォントのインストール

Part 02 フレーム

<フレーム>

  1. 新規にフレームページを作成する
  2. フレームの分割方法を自分で指定する
  3. すでに作成済みのページをフレーム内に開く
  4. フレームに名前を付ける、または変更する
  5. フレームページのタイトルを付ける
  6. フレームの幅を調整する
  7. フレームの幅を変更できないようにする
  8. フレームの境界線を表示しない、または太さを変更する
  9. フレームの境界線に色をつける
  10. フレームのスクロールバーを表示しない
  11. フレームを削除する
  12. フレームの設定に関するページを保存する
  13. フレームが表示されないブラウザへの配慮

<インラインフレーム>

  1. ページの中に開かれたフレーム
  2. インラインフレームを作成する
  3. インラインフレームのフレーム名を設定する
  4. インラインフレーム内でリンクする
  5. インラインフレームの外からフレーム内へリンクする
  6. インラインフレームの境界線を表示しない
  7. インラインフレームの境界線に色を付ける
  8. インラインフレームのスクロールバーの色を変更する
  9. インラインフレームが表示されないブラウザへの配慮

part 03 リンクに関する設定

<基本的なリンク設定の操作方法>

  1. 別のページへリンクする
  2. 他のサイトへリンクする
  3. リンク先を新しいウィンドウで開く
  4. フレームを解除して同一ウィンドウで開く
  5. メールへリンクする
  6. 同じページの別の場所にリンクする
  7. リンクの解除
  8. リンクエラーの修正

<基本にプラスして機能アップのリンク設定方法>

  1. 一つの画像から、いくつかのリンクを設定する
  2. ロールオーバー効果のリンク
  3. ロールオーバー効果のリンク先を変更する
  4. ロールオーバー効果でマウスポインタが上にきた時の画像サイズを変更したい
  5. パスワード付リンク
  6. 訪問者の履歴を使って前のページへ戻るリンクを設定する
  7. 訪問者の履歴を使って次のページへ進むリンクを設定する
  8. リンク先を小さいウィンドウで開く
  9. 小さいウィンドウに関するオプション
  10. 小さいウィンドウ内にウィンドウを閉じるボタンを設置する
  11. イメージマップのリンクから小さいウィンドウを開く
  12. リンクメニューの機能を利用する(V9)
  13. リンクメニューの削除
  14. プルダウンメニューのリンク設定
  15. プルダウンメニューのリンク設定(フレーム)

<リンク設定している文字列の装飾>

  1. リンクしている文字の色を設定する
  2. リンクしている文字の色を設定する(スタイルシート)
  3. リンクの下線を表示しない
  4. リンク設定した文字にマウスポインタを乗せると文字の位置がズレるようにする
  5. リンク設定した文字にマウスポインタを乗せると文字列に上下の線が表示される
  6. リンク設定した文字にマウスポインタを乗せると背景色と前景色が変わる
  7. 特定の箇所のみ、別のリンクスタイルにしたいとき
  8. リンクしたテキストの上にマウスポインタを乗せたとき、短い説明文を表示する

Part 04 表を操作する

<表/行/列の挿入や削除の方法>

  1. 表を作成する
  2. 表を挿入する際、常に最初の行を太字にしない設定にする(V9)
  3. 表を挿入する際、常に「表のデザイン」を無効にする(V9)
  4. 1行追加する
  5. 1列追加する
  6. 2行以上の行や列を追加する
  7. 表/行/列を削除する
  8. データを残して表/行/列を削除する
  9. セルを結合する
  10. セルを分割する

<表やセルのサイズやレイアウトの設定>

  1. 表の詳細を設定する
  2. 表のタイトルをつける
  3. データ挿入後、最初の行を太字や中央揃えにしないようにする(V9)
  4. セル内の余白を調整する
  5. 表の枠を表示しない
  6. 表の枠を表示せず、セルとセルの間の余白をなくす
  7. 表をウィンドウサイズに対して「中央」や「右揃え」または「左揃え」に配置する
  8. セル内に入力したデータを「中央」や「右揃え」または「左揃え」に配置する
  9. セル内に入力したデータを「上揃え」または「下揃え」に配置する
  10. 表のサイズを固定し、訪問者のウィンドウサイズに合わせない
  11. 表のサイズを訪問者のウィンドウサイズに合わせて変わるようにする
  12. セルのサイズを設定する
  13. 列単位でサイズを設定する
  14. ページ編集画面とプレビュー画面で表示結果が違う時
  15. 指定しているサイズをまとめて削除する
  16. 文字列が自動的に折り返されないようにする
  17. 表やセルの背景を設定する
  18. スタイルシートを利用して表の背景色を設定する
  19. スタイルシートを利用して表の枠に色をつける
  20. 「表のデザイン」で作成した表のデザインを変更または無効にする(V9)

Part 05 ホームページの管理

<サイトを設定する>

  1. サイトの設定
  2. サンプルを利用せずに、はじめからページを作成する
  3. サイトの作成(すでに作成したページが存在する場合)
  4. 二つ以上のサイトを作成する
  5. サイトを開く
  6. サイトを閉じる
  7. 作成済みのサイトが開かない場合
  8. サイト情報が正しく反映されない
  9. ビルダーを起動した時、自動的に前回使用したサイトを開く

<サイト機能を使って、ページ管理を便利にする>

  1. ビジュアルサイトビューを開く(V7以上)
  2. ビジュアルサイトビューからリンクの修正を行う(V7以上)
  3. サイトを開いたとき、ビジュアルサイトビューを表示しない(V8以上)
  4. ファイル名を変更する
  5. 「ビジュアルサイトビュー」からページのタイトルをつける(V7以上)
  6. 「サイト/素材ビュー」からページのタイトルをつける
  7. 転送対象ファイルに加える
  8. 転送済みファイルにする

Part 06 ページの装飾

<色んな機能を利用するために知ってると便利なこと>

  1. 目的の属性画面を表示する
  2. 属性/ドキュメントアウトライナを利用する
  3. _HPB_Recycledとは
  4. 編集画面上で縮小した写真をサイズ変更して早く表示されるようにする
  5. 「ロゴの作成」や「ボタンの作成」で作成した画像の周りをきれいに見えるようにする

<画像の属性を設定する>

  1. 用意した画像を挿入する
  2. 画像の代替テキストを入力する
  3. 画像の周りに枠線を表示する
  4. 画像の周りに余白を持たせる
  5. 画像の横に文字を回りこませる

<動きのあるページ>

  1. 流れるメッセージを設定する(マーキーを利用する)
  2. 最終更新日を表示する
  3. 入力してもらった名前を、「ようこそ○○さん。」と表示する
  4. ボタンをクリックすると背景色が変わる
  5. ボタンをクリックして、別の画像と入れ替える
  6. ボタンをクリックして、メッセージボックスを表示する
  7. マウスポインタが上にきたときだけ、説明文を表示する
  8. 位置が絶対変わらないメニューボックス
  9. 素材集から挿入したスクリプトを削除する
  10. 素材集から挿入したスクリプトを編集する
  11. イベントの設定を削除する
  12. イベントの設定で挿入されたスクリプトを削除する
  13. BGMを挿入する
  14. BGMの操作パネルを表示する
  15. BGMを繰り返し流さないようにする
  16. BGMを自動で流さないようにする
  17. アニメーションのようにしてページを移動する

<ビルダーの様々なウィザードを利用する>

  1. マウスポインタが上にきたとき、別の場所の画像が変わるようにする
  2. サイズや画像補正を自動調整して写真を挿入する
  3. 小さい写真をクリックすると、大きな写真が表示されるようにする
  4. ボタンをクリックして次々と写真をスライドさせる
  5. 整理して写真を公開する
  6. 画像をなぞると違う画像に変化する
  7. 画像と音声ファイルを交えて効果的にみせる
  8. 時間や日によってレイアウトの違うページにする
  9. Flashファイルを挿入する
  10. Excelファイルを挿入する
  11. スライドショーを削除する

<ワンポイントとレイアウト>

  1. マウスポインタの形を変えて表示する
  2. ウィンドウ内の余白をなくす
  3. ウィンドウを囲む枠線を表示する
  4. 背景画像を繰り返さないようにする
  5. 背景画像を一定方向だけ、繰り返して表示する
  6. 背景画像を一定位置に固定して動かさない
  7. 行間、文字間を調整する
  8. 文頭を下げる
  9. 縦書き文字を作成する(縦書きエディタ)
  10. 印刷用に改ページを設定する
  11. 素材集から角の丸い表を挿入する
  12. オリジナルの角の丸い表を作成する
  13. 「お気に入りに追加」ボタンを作成する
  14. 文字列を折り返さないで表示する
  15. 標準モードで作成ページ上に、画像や文字を重ねる
  16. 背景と文字色の組み合わせに迷ったら、素材集で選択する

<HTMLソースにひと手間加える>

  1. 指定してHTMLタグを挿入する
  2. HEAD内へHTMLソースを挿入する
  3. コピーしたHTMLソースを挿入する
  4. HTMLソースを自動修正しない
  5. ページを作成したソフトの記述をしない
  6. イメージツールバーを表示しない
  7. 右クリックを禁止する
  8. スクロールバーの色を変更する
  9. Alphaフィルタを利用して半透明にする
  10. Shadowフィルタを利用して写真に影をつける

Part 07 転送

<設定と方法>

  1. 新規に転送設定する
  2. 更新したページを自動的に抽出し、転送する
  3. 転送対象となったファイルの中で、転送したくないファイルを外す
  4. すべて転送済みにする
  5. ページ毎に転送する
  6. 予約転送する(V8以上)

<FTPツールを利用する(ファイル転送)>

  1. FTPツールを起動する
  2. 自動判別で転送する際、「テキストモード」と判断されるファイルを確認する
  3. パッシブモードで転送する
  4. ファイル毎に転送する
  5. 転送先のファイルを操作する
  6. 転送先のファイルを削除する
  7. サーバー上に新しいフォルダを作成する
  8. 転送済みファイルをパソコンへダウンロードする
  9. 転送するファイルの転送モードを切り替える
  10. CGI設置時のアクセス権の変更

<転送トラブルの確認事項>

  1. サーバーに接続できない
  2. 転送したら画像が×印になってしまった
  3. ファイル名を半角英数にしているのに転送できない
  4. ページ内容が更新されない

Part 08 ウェブアートデザイナー

<作業するために知ってると便利なこと>

  1. ウェブアートデザイナーの起動
  2. ウェブアートデザイナーの画面
  3. オブジェクトスタックを理解する
  4. キャンバスに色をつける
  5. キャンバスの背景に、ビルダーで編集しているページの背景を適用する
  6. キャンバスを拡大または、縮小して作業する
  7. 正確な円や正方形を描く
  8. グリッド線(補助線)を利用する
  9. グリッド線の幅や高さを変更する
  10. 周りがギザギザの曲線や円にする
  11. よく利用する色をカラーパレットに登録する
  12. 作成した色を登録する
  13. 作成した色をオブジェクトに適用する
  14. 独自のグラデーションを作成する
  15. 独自のグラデーションを保存せずに、オブジェクトに適用したいとき
  16. いくつかのオブジェクトをまとめて、ひとつのオブジェクトにする
  17. キャンバス上の特定のオブジェクトを表示しない

<オブジェクトの作成>

  1. ボタン作成ウィザードを利用する
  2. 作成したボタンを変更する
  3. ボタンの背景にお気に入りの壁紙を利用する
  4. 描いた四角形を立体的に見せる(ボタン効果)
  5. ロゴの作成ウィザードを利用する
  6. ロゴの作成で、入力した文字の右端が表示されないとき
  7. 小さい文字を入力すると、文字が滲んで読みにくくなるとき
  8. パソコンの画面を画像として取り込む
  9. 四角形の図形を描画すると下の方が薄く滲む
  10. 指定している箇所に線が引けない、または上手く消せない場合
  11. 描いた曲線を編集したい場合
  12. 画像の一部を切り抜く
  13. 切り抜く画像の輪郭をぼかす
  14. 少し複雑な画像を切り抜く
  15. 複雑な画像を切り抜いた後、画像周りを背景と馴染むようにする

<写真やオブジェクトの編集>

  1. 保存している画像を取り込む
  2. スキャナから写真を取り込む
  3. 暗い写真を明るくする
  4. 写真の色調を調整する
  5. ぼやけた写真をくっきりと修整する
  6. 効果パレットを利用して、画像に様々な加工をする
  7. キラキラ光ってるように見せる(クロス効果)
  8. 効果パレットを利用して、様々な模様の画像を作成する
  9. ひと手間掛けて写真に雰囲気を持たせる(ハーフトーン効果)
  10. 効果パレットを利用して文字を変形する(蜃気楼/拡散効果)

<画像の保存/その他>

  1. オブジェクトをホームページで利用するときの保存方法
  2. 画像のサイズを小さくし、なるべく早く表示できるようにする
  3. オブジェクト作成の続きを後で行うための保存方法
  4. 画像のファイルサイズを小さくし、なるべく早く表示できるようにする
  5. 調整用画像の作成(透明GIFファイル)
  6. ウェブアニメータを起動する
  7. ウェブアニメータで文字に動きのあるバナーを作成する
  8. アニメーションの稼動回数を指定する

Part 09 スタイルシート

<スタイルシートを利用するための基本操作>

  1. スタイルシートとは
  2. スタイルを設定するにはどんな方法があるのか
  3. <操作説明>スタイルシートマネージャーの画面と操作方法
  4. <操作説明>「スタイルの設定」ダイアログボックスで出来ること
  5. <操作説明>ページ内のHTMLタグ毎にスタイルを設定する
  6. <操作説明>クラス名を付けてスタイルを設定し、必要な箇所にスタイルを適用する
  7. <操作説明>サイト全体に適用されるようにスタイルを設定する
  8. <操作説明>文書の一部のみにスタイルを設定する
  9. <操作説明>「スタイルの編集」ダイアログボックスからスタイルを設定する
  10. 使用できる単位

<スタイルシートの利用>

  1. <操作説明>余白を設定する
  2. <実践>「見出し」をデザインする
  3. <実践>メッセージを縦横中央に配置する
  4. <実践>ページ内にインラインフレームのようなボックスを作る
  5. ビルダーが用意しているスタイルシートを利用する
  6. スタイリッシュエフェクトを利用する(V9)
  7. 作成した外部スタイルシートを、作成済みページに一度にまとめて適用する

Part 10 完成から運用

<完成したページまたは全体のチェックを行う>

  1. サイトマップを作成する
  2. 公開前にサイトチェックを行う
  3. 「まるごとチェック」でチェック項目が見つかったときの修正
  4. 誰もが利用しやすいページになっているかチェックする(アクセシビリティ)
  5. 半角カタカナを全角カタカナに変換する
  6. HTML構文チェックを利用する
  7. ページの容量や表示される予想時間を確認する
  8. サイト全体の容量を確認する
  9. 完成ページにキーワードを登録する
  10. 特定ページをロボット検索されないようにする
  11. 検索エンジンに登録する
  12. レンタルカウンタやウェブリングのタグを入力する
  13. バナーをダウンロードし、相手先をリンクする
  14. 公開した時、どこでも配置モードで作成したページのレイアウトが崩れないようにする(V8以上)
  15. サイトサマリー(RSS)を利用する(V9)

<ビルダーの機能やサンプルCGIを利用する>

  1. Web日記を作成する(V8以上)
  2. Web日記を追加、削除する(V8以上)
  3. テストを作成する(V8以上)
  4. アンケートを作成する(V8以上)
  5. CGIを利用しないフォームメールを作成する(フォームと入力部品)
  6. ビルダーのサンプルCGIを利用する
  7. アンケートCGIを利用してメールフォームを作成する
  8. 入力部品のTABキーで移動する順序を設定する
  9. テキストボックスに入力する文字を自動的に半角にする
  10. 作成したサイトを携帯用に変換する(V8以上)

Part 11 その他

<使いやすい操作や編集画面にする>

  1. ページ編集画面上の文字サイズを変更する
  2. ページを保存する際の拡張子を設定する
  3. レイアウト枠のHTMLソースをカーソルのある場所に挿入する
  4. 文字エンコードを指定する
  5. バックアップファイル(***.bac)を利用する
  6. バックアップファイル(***.bac)を作成しない
  7. 気に入ったページを勉強させてもらう
  8. ページ作成中に編集スタイルを変更する
  9. 同時にいくつかのページを作成している時、画面を並べて表示する
  10. よく利用するツールバーをまとめて、「オリジナルツールバー」を作成する
  11. ツールバーの位置を保存する
  12. ページ確認のためのブラウザを登録する
  13. サイト内を検索し、目的の文字列を探す
  14. ページ内を検索して、目的の文字列を探す

<完成後のメンテナンス>

  1. ページをまるごとコピーする
  2. サイトのバックアップをする
  3. 公開後、パソコン上のWeb用ファイルが利用できなくなった場合
  4. リカバリ前に「転送情報」を保存する
  5. 修正プログラムを適用する
  6. サイト情報、アプリケーション情報を最初の状態に戻す