Web Presence Builder 操作マニュアル
1、Web Presence Builder ユーザーズガイド
2、Web Presence Builder スタートアップガイド
3、初期設定
4、ウェブサイトの作成
5、ウェブサイトのレイアウト設定
6、ウェブサイトデザインをカスタマイズする
7、ウェブサイトにコンテンツを追加する
8、ページを追加、編集、削除する
9、ウェブサイトを公開する・削除する（やり直す）
10、ウェブサイトデザインをエクスポート / インポートする
11、画像を変更、編集、削除する
12、その他の詳細設定
13、ウェブサイトのコピーを保存、復元する
14、SiteBuilder4.5 からサイトをインポートする
更新ツール マニュアル目次
目次
スタートアップガイド トップページ
・Web Presence Builder 操作画面について
・初期設定 ・ウェブサイトトピックの選択 ・カラースキームの変更 ・ウェブサイトのヘッダと本文のフォントを選 ・新しいページの追加 ・ユーザー作成 ・コントロールパネルについて ・ウェブサイトの作成・公開 ・デザインテンプレートの選択 ・色または背景画像を設定する ・各ウェブサイトエリアのコーナーの形状を選 ・ページの編集 ・ウェブサイトを公開する ・エクスポート ・ウェブサイトの現在のデザイン、及びコンテンツを保存するに ・各ウェブサイトエリアの枠線を選択する ・ページの削除 ・ウェブサイトを削除する（やり直す） ・インポート ・保存したコピーからサイトを復元するには ・サイトコピーをアップロードするには ・サイトコピーをダウンロードするには ・サイトコピーを削除するには
・Web Presence Builder 設定 ・ウェブサイトの表示確認 ・DNS 設定 初期設定 ウェブサイトの作成 ウェブサイトのレイアウト設定 ウェブサイトデザインをカスタマイズする ウェブサイトにコンテンツを追加する ページを追加、編集、削除する ウェブサイトを公開・削除 ( やり直す ) ウェブサイトデザインをエクスポート / インポートする 画像を変更、編集、削除する ウェブサイトのコピーを保存 / 復元する SiteBuilder4.5 からサイトをインポートする 2. 5. 3. 6. 10. 13. 16. 19. 20. 23. 25. 33. 26. 36. ページ 本マニュアルをご利用したことにより、お客さま又は第三者に生じた損害について、当社の過 失の有無やその程度に関わらず、一切の責任は負いかねますのでご了承ください。
1. トップページ
STEP 1
Web Presence Builder 操作画面について
Web Presence Builder の操作は、コントロールパネルからの各種設定と、プレビュー画面上か らの直接操作により行います。
1
2
3
ウェブサイトプレビュー… コントロールパネル… 編集パネル… 作成中のウェブサイトのプレビューを背面の全体に表示します。 ウェブサイトのデザイン等の全体の設定を主に行うコントロール パネルです。機能は、後述の「コントロールパネルについて」を ご参照ください。 プレビューの画像やテキストなどのパーツをクリックすること で、編集パネルが表示されます。パーツごとにフォントや色など の編集が行えます。STEP 2
コントロールパネルについて
ウェブサイトの編集などの操作は主にコントロールパネルより行います。4
5
6
7
モジュール… デザイン… ページ… ドキュメント… 設定… 公開… サブメニュー… ダッシュボード… 保存… 復元… ヘルプ… その他… 画像やテキストなどのモジュールをページへ配置します。 ページのレイアウト設定、デザインテンプレートの設定を行います。 ページの追加、削除、編集を行います。 ドキュメントのアップロード、参照を行います。 サイト名、サイトの説明等の設定を行います。 ウェブサイトのレビューと公開を行います。 各メニュー内のサブメニューがある場合、表示されます。 サイトの訪問統計などを参照できます。 作成中または作成済みのサイトをスナップショットとして保存します。 保存されたスナップショットデータからページを復元します。 開発元 Parallels のユーザーズガイドを参照できます。 作成中のサイトを破棄し、作成をやり直すことができます。 それでは、新しいウェブサイトを作成してみましょう！2 .Web Presence Builder スタートアップガイド
STEP 1 STEP 2 STEP 3初期設定
ウェブサイトの作成・公開
ウェブサイトの表示確認
ユーザー管理 MENU にログインし、Web Presence Builder をご利用いただくための初期設定を します。初期設定の手順については、以下のページをご参照ください。
ホームページのテンプレートを選択後、ウェブサイトの作成、公開をします。
テンプレートの選択、ウェブサイトの制作手順については、以下のページをご参照ください。
他社のホスティングサービスから移転した場合、ドメイン名の移転が完了するまで、サーバーに アクセスすることはできません。ドメイン名の移転が完了するまでの期間は、「プレビューサー バー」の機能をご利用いただくことで、Web Presence Builder で作成したホームページの確認 が可能です。 ユーザー管理 MENU 内の [ ウェブコントロール ] ＞ [ プレビューサーバー ] をクリックしていた だき、[ 設定 ] の項目で [ 使用する ] をクリックしてください。 対象サイトのドメイン名をクリックしていただくことで、ホームページの確認が可能です。 >> 初期設定 >> ウェブサイトの作成・公開
3. 初期設定
STEP 1
ユーザー作成
>>ユーザー管理メニュー
ユーザー管理 MENU での事前準備から、Web Presence Builder でのアカウント設定までを行い ます。すでにドメイン管理者またはサイト管理者を作成済みの場合は、Web Presence Builder 設定から操作してください
Web Presence Builder で公開設定を行うための、ユーザー作成を行います。
①ご契約ドメイン名、契約者アカウント名とパスワードでユーザー管理メニューにログインしま
③情報を入力し、設定を保存します。 ユーザー名 コメント パスワード ユーザー権限 e メールアドレス Web メール ユーザー名に使用できる文字は a-z、0-9、ドット（.）、ハイフン（-）、 アンダーバー（_） です。ただし、先頭は a-z、0-9 のみ使用可能です。 e メールアドレスを作成する場合、作成される e メールアドレスは " ユー ザー名 @ ドメイン名 " となります。Web Presence Builder での設定に使 用するので、控えておいてください。 入力できる文字数は半角 64 文字（全角 32 文字）までです。コメントに はユーザーの管理をする際に分かりやすいよう氏名・所属・利用目的等 を入力することをおすすめします。 使用できる文字は A-Z、a-z、0-9 で、6 文字以上 32 文字までです。 セキュリティ保持のため、パスワードには必ず大文字、小文字、数字を 混在させてください。なお e メールや FTP などのパスワードを必要とす るサービスを利用する場合も、このログインパスワードと共通となりま す。自動生成ボタンをクリックすると 8 文字のパスワードが自動発行さ れます。Web Presence Builder での設定に使用するので、控えておいて ください。
作成するユーザーに割り当てる権限を選択します。
本ページでは、Web Presence Builder でのサイト作成を行うため、サイ ト管理者またはドメイン管理者を作成してください。 ユーザー名を e メールアドレスとして使用することが可能です。e メー ルアドレスを作成するか選択してください。 Web メールを使用するか選択してください。e メールアドレスを作成し ないと、Web メールを使用するこができません。 上記ユーザー権限、e メールアドレス、Web メールの表示項目は、お客さまの契約内容 やユーザー権限によって異なります。
STEP 2
Web Presence Builder 設定
Web Presence Builder で WEB サイトの公開情報を設定します。
① [ アプリケーション ] から [Web Presence Builder] をクリックします。
②公開情報の設定を行います。 ＜ FTP アカウントがサイト管理者の場合＞ ＜ FTP アカウントがドメイン管理者の場合＞ FTP パス FTP パス FTP パス FTP パス URL URL URL URL 入力なし www. お客さまドメイン名 www. お客さまドメイン名 /wpb/ wpb/ http://www. お客さまドメイン名 / http://www. お客さまドメイン名 / http://www. お客さまドメイン名 /wpb/ http://www. お客さまドメイン名 /wpb/ ドキュメントルート直下にウェブサイトを公開する場合は、 以下のように入力します。 ドキュメントルート直下にウェブサイトを公開する場合は、 以下のように入力します。 ドキュメントルート直下の「wpb」というディレクトリにウェ ブサイトを公開する場合は、以下のように入力します。 ドキュメントルート直下の「wpb」というディレクトリにウェ ブサイトを公開する場合は、以下のように入力します。
③ WebPresenceBuilder 管理画面にログインします。
4. ウェブサイトの作成
STEP 1ウェブサイトトピックの選択
まずはじめに、ウェブサイトトピック ( サイトのテーマ）を選択し、基本構成のページを作成し ましょう。また、各トピックごとに複数のデザインテンプレートが用意されているので、好みの テンプレートを選択することでサイトのイメージを変更することができます。 初期設定完了後、ウェブサイトトピックの選択画面が表示されます。 ①用途に合ったトピックをクリックし選択します。 ②サイト名などのウェブサイト情報を入力し、[ サイト作成 ] をクリック ここで入力した情報は後から変更可能です。サイト作成が完了すると、暫定デザインのページと、メインメニューが表示されます。
Web Presence Builder で用意されたデザインテンプレートを適用することで、サイト全体の構 成やイメージを変更できます。 ※デザインテンプレートを適用すると、サイト全体で共通のすべての要素とモジュールは、コン テンツごと上書きされます。すでに編集ずみのコンテンツがある場合は、事前にページの保存を していただくなど、十分に注意の上、操作を進めてください。 ① [ デザイン ] メニューの [ テンプレート ] タブを選択 STEP 1
デザインテンプレートの選択
②テンプレートを選択すると、変更後のページのイメージが表示されます。
5. ウェブサイトのレイアウト設定
［デザイン］の [ レイアウト ] タブで各エリアのサイズや配置の修正を行います。 ①［デザイン］＞ [ レイアウト ] タブをクリック ② サイドバーの数を選択します 「サイドバー」の項目で「なし」、「１」、「２」のいずれかを選択します。設置したサイドバーの 位置を入れ替えるには [ サイドバーをスイッチ ] をクリックします。 サイトのレイアウトは、以下の要素から構成されています。 ヘッダ メイン サイドバー フッタ 画面最上部のエリアであり、バナー画像やロゴを配置します。 ヘッダの横幅はデフォルトサイズ（サイトの幅）から 100％へ変更がで きます。 ウェブページの大部分のコンテンツはここに配置されます。メインエリ アは高さの調整、コンテンツの挿入、コンテンツの場所の変更が行えま す。 サイドバーを設置することで、コンテンツエリアの左または右にモ ジュールを配置できます。 サイドバーの設置は「なし」、「1 つ」、「２つ」、から選択します。高さと 幅の調整、位置の入れ替えが行えます。 画面最下部のエリアであり、一般に、会社名、連絡先、著作権表示など を記載します。フッタの横幅はデフォルトサイズ（サイトの幅）から 100％へ変更ができます。③各ページ要素のサイズを設定します ■サイドバーの幅（ピクセル）… サイドバーを設置する場合、ここで各サイドバーの幅を指定します。メインコンテンツエリアのサイ ズは、自動的に決まります。 ■カラムの最小高（ピクセル）… メインコンテンツエリアと各サイドバー（使用する場合）の高さを指定します。 また、この値はコンテンツがない場合の値のため、各エリアにコンテンツを追加すると、コンテンツ に合わせて高さが拡張します。 ■サイドバーとコンテンツエリアをフッタまで拡大する… サイドバーとコンテンツエリアの高さを揃えるには、このチェックボックスをオンにします。 ■ウェブサイトの幅… ウェブサイトの合計幅を ｢固定レイアウト」または「可変レイアウト」で設定します｡ ■固定レイアウト… ページを表示するウェブブラウザの幅を問わず固定サイズとなります。 この場合、ウェブサイトの幅をピクセル単位で指定してください。 ■可変レイアウト… 現在ページを表示しているウェブブラウザのサイズに対する割合を指定します。 この場合、ブラウザウィンドウのサイズに対する割合をパーセントで指定してください。 ■余白のサイズ（ピクセル）… 縦横の余白のサイズを指定します。
6. ウェブサイトデザインをカスタマイズする
[ デザイン ] タブよりウェブサイトの色やフォントなどの基本スタイルの設定を行います。 ウェブサイトの一般的なカラースキームまたはスタイルセットは、4 色で構成されています。 [ スキーム ] タブよりこの基本的なカラースキームを変更できます。 上部のプルダウンから、4 色が組み合わせとなった基本色セットを選択することもできます。 STEP 1カラースキームの変更
［色］タブより、個々のエリアの色や背景画像を変更できます。 ページエリアのプルダウンで、対象のエリアを選択し、それぞれの画像や、色を選択します。 ［フォント］タブよりウェブサイトの基本的なフォントのルールを設定します。 フォントファミリーと、サイズを選択します。 ※ [ 色 ] タブで個別に色設定を行った後、[ スキーム］タブでスタイルセットを変更すると、設 定が上書きされます。 STEP 2 STEP 3
色または背景画像を設定する
ウェブサイトのヘッダと本文のフォントを選択
[ コーナー ] タブより、各ページエリアのコーナー（角）の形状を選択します。 「角を丸くする」にチェックを入れると角丸になり、チェックをはずすと四角になります。 [ 枠線 ] タブより、枠線の種類と、表示位置の設定を行えます。 灰色の表示欄をクリックすることで、枠線の種類を選択します。 STEP 4 STEP 5
各ウェブサイトエリアのコーナーの形状を選択
各ウェブサイトエリアの枠線を選択する
7. ウェブサイトにコンテンツを追加する
[ モジュール ] タブから追加したいモジュールを選択し、ドラッグ＆ドロップでウェブサイトにコン テンツを追加することが可能です。
8. ページを追加、編集、削除する
作成するウェブサイトの必要に応じて、ページの新規追加や削除を行いましょう。 また、既存のページのタイトルの編集等も行えます。 ① [ ページ ] タブ内の [ ページを追加する ] をクリックします。 ②新しいページが追加され、選択された状態になります。 新しいページを適当な場所にドラッグするか、矢印をクリックすることで移動することができます。 STEP 1新しいページの追加
③ ページタイトルと、ブラウザのタイトルバーに表示するページ名、ページリンク名を入力します。 また、「ページの説明とキーワードを編集」をクリックすると、検索エンジンの結果に表示される説 明と、検索に使用される可能性があるキーワードを任意で指定できます。 ・ウェブサイトの訪問者にページを表示しない場合、［ページを表示しない］チェックボックスをオ ンにします。 ・パスワード認証でページへのアクセスに制限を加えるには、［ページを保護する］チェックボック スをオンにし、ユーザ名とパスワードを指定します。
既存のページのプロパティを編集する場合は、該当のページをクリックします。 ドラッグまたは矢印で場所の移動、またタイトル等の編集もできます。 削除するページを選択し、[ ページを削除する ] をクリックします。 確認画面は出ず、すぐに削除実行されます。十分に確認の上、操作を行ってください。 STEP 2 STEP 3
ページの編集
ページの削除
9. ウェブサイトを公開する・削除する（やり直す）
ウェブサイトの編集が完了し、準備が整ったらいよいよ公開です。
メインメニューの右上の［公開］をクリックすると、ユーザー管理 MENU の Web Presence Builder 公開情報設定で指定したドキュメントルート直下もしくはお客さまで指定されたディレ クトリで公開されます。 ［その他］>［やり直す］より、ウェブサイトの変更内容をすべて削除して、ウェブサイトの作成を やり直すことが可能です。 STEP 1 STEP 2
ウェブサイトを公開する
ウェブサイトを削除する（やり直す）
［その他］>［やり直す］より、ウェブサイトの変更内容をすべて削除して、ウェブサイトの作成 をやり直すことが可能です。
10. ウェブサイトデザインをエクスポート / インポートする
「デザイン ] タブで [ デザインをエクスポート ] を押します。 エクスポートした zip ファイルをインポートします。 「マイウェブサイト yyyy-mm-dd hh-mm-ss.zip」というファイル名でダウンロードされます。 ウェブサイトのレイアウト設定、画像を変更、編集、削除するで調整したものを、テンプレート として保存できます。以下のサイト要素と設定は、デザインテンプレートに保存できます。 ・ウェブサイトレイアウト：ヘッダ、フッタ、コンテンツエリア、サイドバーの位置とサイズ ・バナー画像 ・サイト全体で共通のモジュール ・カラースキームまたは個別に選択した ・ウェブサイトを作成および編集する ・フォント ・枠線およびページ要素のコーナーの形状に関する情報 STEP 1 STEP 2エクスポート
インポート
11. 画像を変更、編集、削除する
12. その他の詳細設定
ウェブサイト名とは、ウェブサイトへの訪問時にユーザのブラウザのタイトルバーに表示される 1 行 のテキストのことです。デフォルトのウェブサイト名は、「マイ・ウェブサイト」ですが、好きなサ イト名に変更することができます。 ウェブサイトが検索結果のリストに表示されている場合は、ウェブサイトの説明が検索エンジンに よって表示されます。また、ウェブサイトのキーワードが検索エンジンで解析され、それに基づいて、 それらのキーワードで検索した人々にウェブサイトが表示されます。 ［設定］タブで［ベーシック］タブに進みます。 ウェブサイト訪問者のブラウザウィンドウに、タイトルとして表示されるウェブサイト名を指 定します。 ブラウザのタイトル部分に、ウェブサイト名と現在のページの名前を両方表示し、検索エンジ ンの検索結果でウェブサイトのランクを上げるためには、［ページタイトルにウェブサイト名を 追加する］チェックボックスをオンにしてください。 ウェブサイトの説明（最大 255 文字）を追加します。 ウェブサイトについて説明するキーワードのリストを入力してください（10 ～ 15 個のキーワー ドを指定することを推奨します）。 ［OK］をクリックして変更を保存します。 STEP 1ウェブサイトの名前、説明、キーワードを変更する
① ② ③ ④ ⑤ファビコンとは、ウェブサイトを訪問するとブラウザのアドレスバー表示される小さなアイコンであ り、お気に入りブックマークのリストでもウェブサイト名の横に表示されます。 各種オンラインツールを使用してファビコンを作成し、Presence Builder エディタでアップロードす ることができます。 このファビコンは、すべてのウェブサイト訪問者に対して表示されます。 ［設定］タブで［ベーシック］タブに進みます。 ［参照］をクリックして、アップロードするファビコンの場所を選択します。ファビコンがアッ プロードされます。 ［OK］をクリックして変更を保存します。 ［設定］タブで［ベーシック］タブに進みます。 ［ファビコン］セクションで［削除］をクリックします。ファビコンが削除されます。 ［OK］をクリックして変更を保存します。 STEP 2 STEP 3
サイトアイコン（ファビコン）をアップロードする
ウェブサイトからファビコンを削除する
① ② ③ ① ② ③検索エンジンが要求する証明ファイルの名前を知っている場合は、［証明ファイルを作成する］フィー ルドに証明ファイル名を入力し、［OK］をクリックします。Web Presence Builder によって、適切な 場所にファイルが作成されます。 証明ファイルを検索エンジンからダウンロード済みであれば、証明ファイルを［証明ファイルアップ ロードする］フィールドにアップロードし、［OK］をクリックします。 ［設定］タブから［拡張］タブに進み、[ ウェブサイトの所有権を証明する ] の項目をクリッ クします。 証明ファイルを提示します。 ［設定］タブから［拡張］タブに進み、[ メタデータを変更する ] の項目をクリックします。 フィールドにコードを入力し、［追加］をクリックします。 ［OK］をクリックして変更を保存します。 証明ファイルの作成またはアップロードが完了し、ウェブサイトが公開済みであれば、検索 エンジンのウェブサイトで所有者であることを確認します。 ［OK］をクリックして変更を保存します。 STEP 4 STEP 5
ウェブサイトの所有者であることを証明する
ウェブサイト用に HTML<head> セクションを編集する
① ② ① ② ③ ③ ④Google Analytics とは、訪問者に関する情報を収集するためのツールです。
Google Analytics に登録して必要コードを取得すると、ウェブサイトに Google Analytics を埋め込む ことができます。
［設定］タブから［拡張］タブに進み、[ サイトマップをダウンロードする ] の項目をクリッ クします。
［OK］をクリックして、sitemap.xml ファイルのダウンロードを開始します。
一部の検索エンジンには、解析と最適化のためにサイトマップを提供する必要があります。 Web Presence Builder からサイトマップをダウンロードすることができます。
Google Analytics サービスに登録し、コードを入手します。 ［設定］タブから［拡張］タブに進み、[Google Analytics を組み込む ] の項目をクリックします。 Google Analytics から提供されたコードをフィールドに入力し、［追加］をクリックします。 ［OK］をクリックして変更を保存します。 STEP 6 STEP 7
Google Analytics コードを埋め込む
サイトマップをダウンロードする
① ② ① ② ③ ④ウェブサイトの特定のページが検索エンジンにインデックスされないようにするには、robots.txt ファ イルに適当なディレクティブを追加します。 このファイルは、サイトの公開先である顧客アカウントに保存されています。 たとえば、顧客アカウントの /private ディレクトリと /my_secret.html ファイルのコンテンツが、す べての検索エンジンロボットおよびクローラによってインデックスされないようにするには、次の行 を追加します。
・robots.txt ファイルの詳細および使用できるディレクティブについては、 About /robots.txt を参照し てください。 ［設定］タブから［拡張］タブに進み、[robots.txt を編集 ] の項目をクリックします。 入力フィールドにディレクティブを入力します。各ディレクトリは 1 行ずつ入力します。 [ 追加 ] をクリックします。 User-agent: * Disallow: /private/ Disallow: /my_secret.html STEP 8
検索エンジンによるサイトの特定ページのインデックスを防止する
① ② ③［設定］タブから［拡張］タブに進み、[ サイト訪問者に Cookie ポリシーについて通知する ] の項目をクリックします。 ［Cookie 通知をサイトに表示する］チェックボックスをオンにして［OK］をクリックします。 STEP 9
サイト訪問者に Cookie ポリシーについて通知する
① ②13. ウェブサイトのコピーを保存、復元する
ウェブサイト作成時に、各サイトの複数のコピーをサーバーに保存し、保存したコピー（別名「スナッ プショット」からサイトを復元することができます。 サイトコピーの保存は、以下のような場合に便利です。 ・同じウェブサイトを複数バージョン用意して、後でレビュー用に読み込み、最も優れたデザインや 最も適切なバージョンを選んでインターネット上に公開する。 ・サイトデザインまたはコンテンツに大幅な変更を加えるか実験を行う際に、問題が発生した場合に 安全に元に戻すことができる。 STEP 1ウェブサイトの現在のデザイン、及びコンテンツを保存するには
［画像ギャラリー］モジュール内の写真は、スナップショットには保存されませんので、 ご利用の PC のローカル環境に保存してください。 バックアップ名を入力せずに［保存］をクリックした場合、「ユーザが保存したスナッ プショット」という名前で保存されます。Web Presence Builder エディタのメインメニューで［保存］オプションの横のアイコンをク リックします。
表示されるリストから、空き保存スロットを選び、任意のバックアップ名を入力し [ 保存］ をクリックします。
① ②
STEP 2
STEP 3
保存したコピーからサイトを復元するには
サイトコピーをダウンロードするには
ファイル名は「スナップショット名 .ssb」という名前で保存されます。
Web Presence Builder エディタのメインメニューで［復元］オプションの横のアイコンをク リックします。
表示されるリストで、サイトコピーを選択し、［読み込み］をクリックします。 ［はい］をクリックして復元を確認します。
Web Presence Builder エディタのメインメニューで［保存］オプションの横のアイコンをク リックします。 ダウンロードするコピーを探し、ダウンロードアイコンをクリックします。 ファイルの保存先としてコンピュータ上のディレクトリを選択し、［OK］をクリックします。 サーバーに保存したサイトコピーをお客さまの PC にダウンロードすることができます。 ① ② ③ ① ② ③
STEP 4
STEP 5
サイトコピーをアップロードするには
サイトコピーを削除するには
Web Presence Builder エディタのメインメニューで［復元］オプションの横のアイコンをク リックします。
コピーのアップロード先とするスロットの横の （アップロード）アイコンをクリックします。 PC 上にダウンロードされたサイトスナップショットファイルを選択します。
［読み込み］をクリックすることでアップロードできます。
Web Presence Builder エディタのメインメニューで［保存］オプションの横のアイコンをク リックします。 削除するサイトコピーを探して、削除アイコンをクリックします。 ① ② ③ ④ ① ② お客さまの PC に保存したサイトコピーをサーバーにアップロードすることができます。
