KDDI ホスティングサービス (G120, G200) ブック SiteBuilder スタートアップガイド (ご 参 考 資 料 ) Rev.1.0 KDDI 株 式 会 社 1
- 目 次 - 1.はじめに...2 2.サイト 初 期 設 定...2 3.SiteBuilderインストール...5 4.サイトの 作 成...6 4.1 SiteBuilder ウィザードを 開 く...7 4.2 開 始...8 4.3 デザイン...9 4.3.1 デザインテンプレートの 選 択...9 4.3.2 色 の 配 置 の 選 択...11 4.3.3 バナーの 選 択...11 4.3.4 ボタンスタイルの 選 択...12 4.3.5 ロゴの 変 更...13 4.3.6 会 社 名 及 び 著 作 権 表 示 の 指 定...14 4.4 ページ...15 4.4.1 ページの 追 加...15 4.4.2 ページ 位 置 の 変 更...17 4.4.3 ページの 削 除...18 4.4.4 ページ 構 成 後 について...19 4.5 編 集...20 4.5.1 テキストの 取 り 扱 い...20 4.5.1.1 テキストにスタイルの 適 用...20 4.5.1.2 段 落 のフォーマット...21 4.5.1.3 テキストのコピーおよび 移 動...22 4.5.1.4 テキストの 検 索 および 置 換...22 4.5.1.5 変 更 のキャンセルおよび 繰 り 返 し...24 4.5.1.6 イメージの 挿 入...24 4.5.1.7 リンクの 挿 入...25 4.5.2 テーブルの 取 り 扱 い...27 4.5.2.1 テーブルの 挿 入...27 4.5.3 ウェブページのHTMLソースの 修 正...32 4.6 サイトの 公 開...33 2
1.はじめに SiteBuilderは ブラウザからの 簡 単 操 作 で 見 栄 えの 良 いウェブサイトを 作 成 出 来 るツールです 約 500 種 類 のデザインテンプレートから 選 べる 為 デザインの 自 由 度 も 向 上 しております SiteBuilder スタートアップガイドでは コントロールパネルの 設 定 方 法 からSiteBuilderを 活 用 したウェブサイトの 構 築 方 法 を 説 明 致 します 2.サイト 初 期 設 定 SiteBuilderを 利 用 するには ASP.NETのバージョンを 2.0 に 設 定 する 必 要 がございます( 初 期 設 定 では ASP.NET 2.0に 設 定 されている) ASP.NETのバージョンを 確 認 し ASP.NET 1.1 のが 設 定 され ている 場 合 ASP.NETのバージョンを 2.0 に 変 更 します 1) コントロールパネルを 開 き [ウェブサイト] をクリックします 2) [ウェブサイトの 設 定 ] をクリックします 3
3) ウェブサイトの 設 定 画 面 が 表 示 されます ASP.NETサポートの 欄 に ASP.NET 2.0が 有 効 になりました と 表 示 されていた 場 合 は 設 定 変 更 の 必 要 はございません SiteBuilderをインストールする 事 が 出 来 ます ASP.NET 2.0が 有 効 になりました と 表 示 されていない 場 合 は ASP.NETのバージョンは 1.1 になります (テストをクリックするとバージョンを 確 認 する 事 が 可 能 ) ASP.NETのバージョンが 1.1 の 場 合 SiteBuilderが 利 用 出 来 ない 為 ASP.NET 2.0 に 変 更 しま す [ 編 集 ] をクリックします ASP.NET 2.0 が 有 効 になって いると SiteBuilder が 利 用 可 能 ASP.NET 2.0 が 無 効 の 場 合 場 合 [ 編 集 ]をクリックし 変 更 します 4
4) ASP.NET サポート 欄 のプルダウンメニューで ASP.NET 2.0 に 変 更 し [ 送 信 ] をクリックします 5) ASP.NET 2.0 に 変 更 が 完 了 すると 以 下 のように 表 示 されます ASP.NET サポートの [テスト] をクリックすると 動 作 確 認 及 び バージョンを 確 認 する 事 が 出 来 ま す If you see this page, ASP.NET 2.0.50727.3607 works properly. 5
3.SiteBuilderインストール コントロールパネルにて SiteBuilderをインストールします 1) コントロールパネルを 開 き [ドメイン 名 ] [ドメイン 管 理 ] をクリックします SiteBuilderをインストールする ドメイン 名 をクリックします 2) ドメイン 名 の 管 理 メニューが 表 示 されます 概 要 タブのコンテンツ 管 理 欄 [ SiteBuilderを 使 用 してサイトの 作 成 ]をクリックします 3) インストールがスケジュールされます 右 上 の リフレッシュ をクリックし 状 態 が 作 成 中 から 準 備 完 了 になるとインストール 完 了 になります 6
4.サイトの 作 成 SiteBuilderではウィザード 形 式 の 簡 単 な 操 作 でウェブサイトを 公 開 する 事 が 出 来 ます この 章 では 5つのステップ 毎 の 操 作 手 順 及 び サイト 作 成 方 法 を 説 明 致 します SiteBuilder ウィザードの 5 つのステップ 1. 開 始 作 成 するサイトのタイプを 選 択 することができます 2. デザイン サイトのデザインテンプレート 配 色 ボタンのスタイル その 他 を 選 択 する 事 が 出 来 ます 3. ページ サイトの 構 造 を 作 成 および 編 集 することができます 4. 編 集 サイトのコンテンツ 作 成 および 編 集 することができます 5. 公 開 サイトを 公 開 することができます 7
4.1 SiteBuilder ウィザードを 開 く 1) コントロールパネルを 開 き [ドメイン 名 の 概 要 ] [ドメイン 名 の 管 理 ] をクリックします SiteBuilderをインストールした ドメイン 名 をクリックします 2) ドメイン 名 の 管 理 画 面 が 表 示 されます ページ 下 に 移 動 し コンテンツ 管 理 項 目 の [Edit your site] をクリックします 3) SiteBuilderウィザードが 表 示 されます 8
4.2 開 始 1) SiteBuilderウィザードの 1 開 始 をクリックします 2) 作 成 するウェブサイトのタイプを 選 択 する 事 が 出 来 ます サイトのタイプで 定 義 済 みのページセット を サイト 構 造 のベースとして 使 用 することができます 作 成 したいサイトのタイプを 選 択 して [ 次 へ] をクリックします (このスタートアップガイドでは サイトの 作 成 を 利 用 した 方 法 を 紹 介 致 し ます ) 9
3) [デザイン]のページが 表 示 されます 10
4.3 デザイン ウェブサイトのデザインテンプレートや 配 色 などを 選 択 する 事 が 出 来 ます 4.3.1 デザインテンプレートの 選 択 テンプレートは 既 定 のウェブサイトデザインになり 簡 単 にカスタマイズすることが 出 来 ます サイ トのテンプレートを 選 択 するには 以 下 を 実 行 します 1) [カテゴリ] 一 覧 からテンプレートのカテゴリを 選 択 します 全 てのカテゴリのテンプレートを 見 るには [ 全 てのカテゴリー] を 選 択 します 11
2) テンプレートをワークエリアでクリックして 選 択 します 3) 選 択 したテンプレートはプレビューウィンドウに 表 示 されます プレビューウインドウをクリックすると 大 きなサイズで 表 示 されます 12
4.3.2 色 の 配 置 の 選 択 色 の 配 置 はサイトのデザインで 使 用 される 色 のセットです サイトの 色 の 配 置 を 選 択 するには 以 下 を 実 行 します 1) [ 色 の 配 置 ] エリアで 色 の 配 置 を 選 択 します 選 択 した 色 の 配 置 は 赤 く 縁 取 られます 13
4.3.3 バナーの 選 択 バナーはサイトの 全 ページの 上 端 に 表 示 される 画 像 です バナーを 選 択 するには 以 下 を 実 行 します 1) [バナー] エリアで プルダウンメニュー をクリックします 利 用 可 能 なバナー 一 覧 が 表 示 されます こちらクリックし バナーを 選 択 2) お 好 みのバナーを 選 択 します [ 参 照...] をクリックし バナーの 画 像 ファイルを 選 択 し[アップロード] すると お 好 みの 画 像 をバナ ーに 設 定 する 事 が 出 来 ます 14
4.3.4 ボタンスタイルの 選 択 ボタンスタイルを 選 択 するには 以 下 を 実 行 します 1) [ボタン] エリアでスタイルを 選 択 します 選 択 したスタイルの 配 置 は 赤 く 縁 取 られます こちらクリックし ボタンを 選 択 15
4.3.5 ロゴの 変 更 ロゴは 会 社 の 組 織 の 名 前 又 は 記 号 商 標 であり 全 てのサイトウィンドウの 左 上 隅 に 表 示 されます ロゴをアップロードするには 以 下 を 実 行 します 1) [ロゴ] エリアの [ 参 照...] をクリックします [ 参 照 ] をクリッ クし ファイルを 選 択 2) アップロードするロゴ 画 像 を 選 択 し [アップロード] をクリックします 新 しいロゴが[デザイン] 画 面 に 表 示 されます 16
4.3.6 会 社 名 及 び 著 作 権 表 示 の 指 定 会 社 の 情 報 を バナーエリアのロゴの 隣 とサイトページ 下 端 の 著 作 権 表 示 と 一 緒 に 表 示 することがで きます サイト 情 報 を 構 成 するには 以 下 を 実 行 します 1) [サイト 情 報 ] セクションの [ 会 社 名 ] フィールド 及 び [ 著 作 権 ] フィールドに 会 社 名 と 著 作 権 情 報 を 入 力 します 入 力 後 右 下 の [ 次 へ] をクリックします サイト 情 報 を 入 力 2) 変 更 を 適 用 しますか? と 表 示 されたら [はい] をクリックします 17
4.4 ページ ウェブサイト 構 造 の 作 成 及 び 編 集 を 行 う 事 が 出 来 ます 18
4.4.1 ページの 追 加 SiteBuilder による 作 業 を 円 滑 に 進 められるよう HTMLで 定 義 されたページがタイプ(ビジネス 個 人 その 他 ) 毎 に グループ 化 されております サイトの 目 的 や 機 能 によって それらのページセ ットを 一 部 変 更 してサイト 構 造 に 適 応 させる 事 が 出 来 ます サイトにページを 追 加 するには 以 下 を 実 行 します 1) [ページセットの 選 択 ] 一 覧 からページセットを 選 択 します 19
2) 選 択 したページセットの 各 ページが シンプルページボックスに 表 示 されます 20
3) 追 加 したいページのチェックボックスにチェックを 入 れ ボタンをクリックすると 選 択 したページが 右 側 の [サイトの 構 造 ] ボックスに 表 示 されます スペシャルページは 全 てのページセットで 共 通 して 使 用 する 事 が 可 能 4) ページ 名 を 変 更 するにはページのチェックボックスをチェックして [リネーム] をクリックするか 名 前 を 変 更 したいページをクリックします 21
4.4.2 ページ 位 置 の 変 更 SiteBuilder を 利 用 することで ページをトップレベルページとセカンドレベルページの 2 つの 階 層 レ ベルに 分 けることができます [サイトの 構 造 ] ボックスの 右 上 部 にあるボタンでサイト 構 造 を 編 集 することができます 1) 同 じレベルでページを 上 下 に 移 動 するには 以 下 を 実 行 します [サイトの 構 造 ] ボックスで 移 動 したいページを 選 択 し それぞれ [ 上 へ] または [ 下 へ] を 選 択 します 2 1 2) トップレベルからセカンドレベルにページを 移 動 するには [サイトの 構 造 ] ボックスで 移 動 したい ページを 選 択 し [ 下 位 レベルへ] をクリックします 1 2 3) セカンドレベルからトップレベルにページを 移 動 するには [サイトの 構 造 ] ボックスで 移 動 したいペ ージを 選 択 し [ 上 位 レベルへ] をクリックします 1 2 22
4.4.3 ページの 削 除 不 要 なページがあったりページ 数 の 制 限 を 超 えてしまった 場 合 には ページをサイトから 削 除 するこ とができます ページを 削 除 するには 以 下 を 実 行 します 1) [サイトの 構 造 ]ボックスでページを 選 択 します 複 数 のページを 一 度 に 選 択 することも 可 能 をクリックします 2) 選 択 されたページを 削 除 してもよろしいですか? と 確 認 画 面 が 表 示 されます [OK] をクリックす ると 削 除 されます 23
4.4.4 ページ 構 成 後 について 1) ページサイトの 構 成 が 終 了 したら [ 次 へ] をクリックします 2) 変 更 を 適 用 しますか? と 表 示 されたら [はい] をクリックします 24
4.5 編 集 ウェブサイトのコンテンツ 作 成 及 び 編 集 を 行 う 事 が 出 来 ます 25
4.5.1 テキストの 取 り 扱 い このサブセクションではウェブページの 文 字 情 報 の 取 り 扱 い 方 法 について 記 載 します 文 字 および 段 落 の 設 定 方 法 イメージおよびリンクの 切 り 取 りやコピーや 貼 り 付 けや 挿 入 の 方 法 について 説 明 します 4.5.1.1 テキストにスタイルの 適 用 編 集 ツールバーで ページテキストの 以 下 のパラメータを 変 更 することができます フォント サイズ 段 落 スタイル 色 フォント 設 定 特 殊 記 号 テキストのフォーマットを 適 用 するには 以 下 を 実 行 します 1. 変 更 したいテキスト 部 分 を 選 択 します( 一 文 字 でも 構 いません) 2. [フォント 名 ] 一 覧 からフォントを 選 択 します 3. [サイズ] 一 覧 からフォントサイズを 選 択 します 4. [ 段 落 スタイル] 一 覧 からスタイルを 選 択 します 5. [ 前 景 色 ] アイコンをクリックしてフォントの 色 を 選 択 します 6. [ 背 景 色 ] アイコンをクリックして 背 景 の 色 を 選 択 します 26
7. テキストを 太 字 や 斜 体 にしたり 下 線 や 打 ち 消 し 線 を 引 くには それぞれ [ 太 い] [イタ リック 体 ] [アンダーライン] [ 抹 消 ]をクリックします 8. テキストを 下 付 き 字 や 上 付 き 文 字 にするには それぞれ [ 下 付 き 文 字 ]または [ 上 付 き 文 字 ] をクリックします 9. 著 作 権 の 記 号 やその 他 のアルファベットや 記 号 といった 特 殊 文 字 をテキストに 挿 入 するには [シンボルを 挿 入 します]アイコンをクリックします 注 意 : 選 択 したテキストに 特 定 のフォーマットを 適 用 するには 段 落 スタイルをご 使 用 ください それ によって 同 様 のテキストは 確 実 に 同 じ 方 法 でフォーマットされ サイトを 通 じて 一 貫 性 が 保 たれ ます 4.5.1.2 段 落 のフォーマット 段 落 のインデントおよび 整 列 はページ 内 の 段 落 の 位 置 を 定 義 するうえで 主 要 なパラメータです イン デントは 段 落 の 左 マージンからの 距 離 を 決 定 します 整 列 は 段 落 の 端 の 位 置 を 決 定 します SiteBuilder 編 集 ツールバーで 以 下 を 実 行 することができます 段 落 インデントを 増 大 または 減 少 します 段 落 を 左 に 整 列 中 心 に 整 列 右 に 整 列 または 行 端 位 置 を 合 わせます 行 端 位 置 を 合 わ せた 場 合 は テキストはページの 左 および 右 マージンの 間 に 均 一 に 配 置 されます テキスト 情 報 の 論 理 部 分 を 視 覚 的 に 分 けるには 横 罫 線 を 使 用 します 段 落 のフォーマットを 適 用 するには 以 下 を 実 行 します 1. フォーマットしたいテキストを 選 択 します 2. 必 要 なフォーマットコマンドを 適 用 します 1 テキストの 整 列 には ツールバーの [ 左 詰 め] [ 中 心 揃 え] [ 右 詰 め] または [ 両 端 揃 え]アイコンをクリックします 2 選 択 したテキストのインデントを 変 更 するには ツールバーの [ 解 除 インデント]アイコンをクリックします 3 横 罫 線 を 挿 入 するには ページの 任 意 の 場 所 にカーソルを 置 き コンをクリックします [インデント]または [ 均 等 なルーラー]アイ 4 段 落 を 区 切 るには 新 しい 段 落 の 冒 頭 の 前 で [ 新 しい 段 落 ]アイコンをクリックします 27
4.5.1.3 テキストのコピーおよび 移 動 テキストをコピーまたは 移 動 するには 以 下 を 実 行 します 1. テキストの 必 要 箇 所 を 選 択 します 2. テキストを 移 動 するには [カット]アイコンをクリックします 3. テキストをコピーするには [コピー]アイコンをクリックします 4. テキストを 表 示 したい 場 所 にカーソルを 置 きます 5. [ 貼 り 付 け]アイコンをクリックします 4.5.1.4 テキストの 検 索 および 置 換 ページコンテンツから 特 定 のテキストを 検 索 するには 以 下 を 実 行 します 1. [ 検 索 して 置 換 ]アイコンをクリックします 2. [ 検 索 して 置 換 ]ダイアログが 開 きます 3. [ 検 索 ]タブの[ 検 索 ]フィールドに 検 索 したいテキストを 入 力 します 4. 以 下 のオプションのどちらかを 選 択 して 検 索 範 囲 を 指 定 します 1 [ 全 体 のテキスト] ウェブページのテキスト 全 てについて 指 定 した 単 語 またはフレーズを 検 索 します 2 [ 選 択 のみ] 選 択 したテキスト 部 分 についてのみ 指 定 した 単 語 またはフレーズを 検 索 し ます 5. 以 下 のオプションのどちらかを 選 択 して 検 索 方 向 を 指 定 します 1 [ 上 へ] カーソルの 位 置 から 上 側 のテキストを 検 索 します 2 [ 下 へ] カーソルの 位 置 から 下 側 のテキストを 検 索 します 6. 検 索 方 法 を 選 択 するには 以 下 のコマンドオプションのどちらかを 選 択 します 1 [ 適 合 ケース] アルファベットの 大 文 字 または 小 文 字 が 完 全 に 一 致 するテキストだけを 検 索 する 場 合 に 使 用 します 2 [ 完 全 に 一 致 した 語 句 のみ] 指 定 したテキストと 完 全 に 一 致 するテキストだけを 検 索 する 場 合 に 使 用 します 28
7. [OK]をクリックして 検 索 を 開 始 します 8. 次 の 検 索 パターンで 検 索 するには [ 次 を 検 索 ] をクリックします 9. 単 語 またはフレーズを 検 索 して 置 換 するには 以 下 を 実 行 します 1 検 索 ツールバーで [ 検 索 して 置 換 ]アイコンをクリックします 2 [ 置 換 ]タブをクリックします 3 [ 検 索 ]フィールドに 置 換 したいテキストを 入 力 します 4 [ 以 下 と 置 き 換 え:]フィールドに 置 き 換 えるテキストを 入 力 します 5 [ 置 換 え]をクリックします 6 テキストの 該 当 箇 所 を 全 て 置 換 するには[すべて 置 換 え]をクリックします 29
4.5.1.5 変 更 のキャンセルおよび 繰 り 返 し 前 回 のアクションを 元 に 戻 すには [ 元 に 戻 す]アイコンをクリックします 後 から 前 回 のアクション を 元 に 戻 さないことにした 場 合 は [ 変 更 ]アイコンをクリックします 4.5.1.6 イメージの 挿 入 ウェブページにイメージを 挿 入 するには 以 下 を 実 行 します 1. [ 編 集 ]タブでイメージを 挿 入 したいウェブページを 選 択 します 2. イメージを 挿 入 したい 場 所 にカーソルを 置 きます 3. [イメージマネージャー]アイコンをクリックします 4. [イメージマネージャー]ダイアログボックスが 開 きます 5. [ 参 照...]をクリックしてアップロードするイメージを 選 択 します 注 意 : イメージの 最 大 サイズは 200KBです サポートしている 図 形 ファイル 形 式 は *.gif *.jpg *.jpeg *.png *.bmp です 6. [ファイルの 選 択 ]ダイアログボックスの[ 開 く]をクリックします 7. アップロードするイメージと 同 じ 名 前 のファイルがあり それを 上 書 きしたい 場 合 は [その 名 前 のファイルが 存 在 する 場 合 上 書 きしますか?]オプションを 選 択 します 8. [アップロード]をクリックします 9. 左 のダイアログボックスにアップロードされたイメージのファイル 名 が 表 示 されます 10. 左 のダイアログボックスでファイル 名 を 選 択 すると そのイメージを 右 のダイアログボックスで プレビューすることができます 11. [ 挿 入 ]をクリックします 30
4.5.1.7 リンクの 挿 入 SiteBuilder エディタで 内 部 リンクおよび 外 部 リンクの 両 方 を 挿 入 することができます 内 部 リンクはサ イト 内 の 他 の 場 所 へリンクして 読 者 を 関 連 ページへ 導 きます 外 部 リンクは 他 のサイトへリンクし 多 くの 場 合 サイトの 知 名 度 を 向 上 させるために 使 用 され サイトの 訪 問 者 にとって 親 しみ 易 いサイトと なります(いわゆるリンクエクスチェンジ) SiteBuilder ハイパーリンクマネージャーで 以 下 のタイプのリンクを 追 加 することができます ハイパーリンク ( 19ページ 参 照 ) アンカー ( 20ページ 参 照 ) Eメールアドレスリンク ( 20ページ 参 照 ) [ ハイパーリンクの 挿 入 ] ハイパーリンクとはハイパーテキスト 文 書 から 他 の 文 書 または 他 のリソースへの 関 連 付 けです ハイパーリンクを 挿 入 するには 以 下 を 実 行 します 1. ハイパーリンクを 設 定 したいテキストを 選 択 します 2. [ハイパーリンクマネージャー] アイコンをクリックします 3. [ハイパーリンクマネージャー]ダイアログボックスが 開 きます 31
4. [URL]フィールドにリンク 先 のウェブアドレスを 入 力 します その 文 書 に 既 にアンカーを 挿 入 している 場 合 は そのアンカーを[ 既 存 のアンカー] 一 覧 から 選 択 することができます(アン カーの 挿 入 についての 詳 細 は アンカーの 挿 入 をご 参 照 願 います) 5. [リンクテキスト]フィールドでそのリンクのテキストを 指 定 します 6. [タイプ] 一 覧 からリンクの 種 類 を 選 択 します 7. [ターゲット] 一 覧 からリンク 先 を 選 択 します 8. [ツールチップ]フィールドにツールの 説 明 を 入 力 します 9. ツールチップとは マウスカーソルをハイパーリンクの 上 に 置 いたときに 表 示 されるテキスト です 10. [CSSクラス]フィールドから 定 義 済 みのスタイル 名 を 選 択 します 11. CSS(カスケーディングスタイルシート)とは マークアップ 言 語 で 記 述 された 文 書 を 表 示 する のに 使 用 する スタイルシート 言 語 です 最 も 一 般 的 なアプリケーションは HTML および XHTML で 記 述 されたウェブページの 表 示 です 12. [OK]をクリックすると ハイパーリンクが 挿 入 されます [ アンカーの 挿 入 ] アンカーとは ハイパーリンクからリンクされている 宛 先 を 定 義 する 文 字 または 文 字 列 です 1 つのウ ェブページ 上 に 大 量 のテキストがある 場 合 にアンカーは 非 常 に 役 立 ちます アンカーがハイパーリン クに 使 用 されてウェブページの 特 定 の 場 所 へ 導 くため メッセージの 読 者 はウェブページのある 箇 所 か ら 別 の 箇 所 へと 簡 単 にとぶことができます アンカーを 挿 入 するには 以 下 を 実 行 します 1. リンク 先 にカーソルを 置 きます 32
2. [ハイパーリンクマネージャー] アイコンをクリックします 3. [アンカー]タブをクリックします 4. アンカー 固 有 の 名 前 を 入 力 します 5. [OK]をクリックします 6. アンカーへとぶハイパーリンクを 形 成 するテキストまたはイメージを 選 択 します 7. [ハイパーリンクマネージャー] アイコンをもう 一 度 クリックします 8. [ハイパーリンク]タブの[URL]フィールドに # に 続 けてアンカー 名 を 入 力 します 9. [タイプ]を[ 他 ]に 変 更 します 10. [OK]をクリックします 11. アンカーが 挿 入 されます 33
[ eメールアドレスリンクの 挿 入 ] サイトの 訪 問 者 からの 連 絡 をメールで 欲 しい 場 合 には ウェブページにeメールアドレスリンクを 挿 入 し ます ウェブページ 上 ではeメールアドレスに 下 線 が 引 かれているように 見 え ユーザーがそれをクリ ックすると そのeメールアドレスが 宛 先 に 指 定 された 新 規 メッセージの 作 成 画 面 をユーザーのコンピ ューターのメールソフトが 開 きます eメールアドレスリンクを 挿 入 する 際 に メッセージの 件 名 を 指 定 す ることもできます eメールアドレスリンクを 挿 入 するには 以 下 を 実 行 します 1. eメールアドレスリンクを 設 定 したいテキストを 選 択 します 2. [ハイパーリンクマネージャー] アイコンをクリックします 3. [eメールアドレス]タブをクリックします 4. [アドレス]フィールドにeメールアドレスを 入 力 します 5. [リンクテキスト]フィールドに eメールアドレスリンクに 表 示 されるテキストを 入 力 します 6. [ 件 名 ]フィールドにメッセージの 件 名 を 入 力 します 7. [CSSクラス] 一 覧 から CSS クラスを 選 択 します CSS(カスケーディングスタイルシート)とは マークアップ 言 語 で 記 述 された 文 書 を 表 示 するのに 使 用 するスタイルシート 言 語 です 最 も 一 般 的 なアプリケーションは HTML および XHTML で 記 述 された ウェブページの 表 示 です 8. [OK]をクリックします 4.5.2 テーブルの 取 り 扱 い このセクションではテーブルの 取 り 扱 い 方 法 について 記 載 しています テーブルの 挿 入 行 や 列 やセ ルの 追 加 および 削 除 セルの 結 合 および 分 割 サイトコンテンツの 他 の 場 所 へテーブルをドラッグす る 方 法 についてご 説 明 致 します 34
4.5.2.1 テーブルの 挿 入 テーブルはテキストおよび 数 値 の 情 報 を 便 利 かつ 明 確 な 方 法 で 整 理 するために 使 用 します 大 量 の 文 字 情 報 でさえも 読 み 易 い 形 式 で 表 示 します テーブルは 行 と 列 によって 形 成 されるグリッドから 成 ります ウェブページでは あらゆる ブラウザや 出 力 形 式 でもページ 枠 のサイズや 比 率 を 一 定 にする ためのフォーマットツールとして 多 くの 場 合 テーブルが 使 用 されます 枠 を 非 表 示 にすることもできま すし テーブルに 記 載 した 情 報 は 希 望 の 形 式 で 表 示 されます これは 例 えば 新 聞 などで 複 数 の 欄 に 文 章 を 構 成 したいときなどに 便 利 です [ テーブルの 挿 入 ] テーブルを 挿 入 するには 以 下 を 実 行 します 1. テーブルを 挿 入 したい 場 所 にカーソルを 置 きます 2. [テーブルを 挿 入 します]アイコンをクリックします 3. マウスカーソルを 動 かして 必 要 な 行 および 列 の 数 を 選 択 します 4. [テーブルウィザード]をクリックしてテーブル 作 成 の 設 定 を 更 に 調 節 することができます [ 行 および 列 の 追 加 ] 行 および 列 を 追 加 するには 以 下 を 実 行 します 1. テーブルの 行 または 列 を 追 加 したい 場 所 にカーソルを 置 きます 2. [テーブルを 挿 入 します]アイコンをクリックします 3. カーソルを 置 いた 場 所 の 上 または 下 に 行 を 挿 入 するには それぞれ [ 上 に 列 を 挿 入 しま 35
す]または [ 下 に 列 を 挿 入 します]をクリックします 4. カーソルを 置 いた 場 所 の 左 または 右 に 列 を 挿 入 するには それぞれ [ 左 にコラムを 挿 入 します]または [ 右 にコラムを 挿 入 します]をクリックします [ 行 列 セルの 削 除 ] 行 列 セルを 削 除 するには 以 下 を 実 行 します 1. 行 または 列 を 削 除 したい 場 所 にカーソルを 置 きます 2. [テーブルを 挿 入 します]アイコンをクリックします 3. 行 を 削 除 するには [ 行 の 削 除 ]アイコンをクリックします 4. 列 を 削 除 するには [ 列 の 削 除 ]アイコンをクリックします 5. セルを 削 除 するには [セルの 削 除 ]アイコンをクリックします [ テーブルのフォーマット ] テーブルのプロパティを 設 定 するには 以 下 を 実 行 します 1. テーブル 内 で 右 クリックしてコンテキストメニューの [テーブルのプロパティを 設 定 ]アイコンを クリックします 2. [テーブルのプロパティ] タブで 以 下 のプロパティを 設 定 します 3. 幅 / 高 さ テーブルの 幅 と 高 さをピクセルまたはパーセントで 指 定 します 4. 背 景 テーブルの 背 景 の 色 を 設 定 します 5. 整 列 テーブルをページの 左 端 か 中 央 か 右 端 に 整 列 させます 6. セル 間 隔 セルの 枠 と 枠 の 間 隔 を 増 加 または 減 少 します 7. セルパディング セルのコンテンツと 枠 の 間 隔 を 増 加 または 減 少 します 8. ボーダー セル 枠 の 幅 色 レイアウトを 設 定 します 9. ID テーブルに ID を 設 定 し 高 度 なテーブル 操 作 のオプションをいくつか 提 供 します 10. 背 景 イメージ テーブルの 背 景 として 画 像 を 設 定 します 11. CSSクラス テーブルの CSS クラスおよびスタイルを 指 定 します CSS クラスは 選 択 した テキストに 36
適 用 されている 定 義 済 みのスタイルです 注 : CSS クラスは 高 度 なユーザーのみ 対 象 のオプションです 12. [OK]をクリックします [ CSS クラスによるテーブルのフォーマット ] CSS クラスを 使 用 すると 簡 単 かつ 一 貫 性 のあるテーブルのフォーマットができます CSS クラスを 使 用 するには 以 下 を 実 行 します 1. テーブルを 作 成 します 2. この 手 順 の 詳 細 については 当 ガイド 前 述 の テーブルの 挿 入 をご 参 照 願 います 3. [テーブルのプロパティ]ダイアログボックスを 開 きます ます 4. [テーブルのプロパティ]ダイアログボックスの[CSS クラス] 一 覧 から CSS クラスを 選 択 し 5. [OK]をクリックします [ セルの 結 合 ] セルを 結 合 するには 以 下 を 実 行 します 1. 他 のセルと 結 合 したいセル 内 にカーソルを 置 きます 37
2. [テーブルを 挿 入 します]アイコンをクリックします 3. 右 側 のセルと 結 合 するには [ 横 にセルを 結 合 ]アイコンをクリックします 4. 上 側 のセルと 結 合 するには [ 縦 にセルを 結 合 ]アイコンをクリックします [ セルの 分 割 ] セルを 分 割 するには 以 下 を 実 行 します 1. 分 割 したいセル 内 にカーソルを 置 きます( 前 もって 結 合 したセルでなければなりません) 2. [テーブルを 挿 入 します]アイコンをクリックします 3. [セルを 分 割 ]アイコンをクリックします [ セルのフォーマット ] テーブルセルのパラメータを 設 定 するには 以 下 を 実 行 します 1. セル 内 で 右 クリックして コンテキストメニューの[セルのプロパティを 設 定 ]を 選 択 します 2. [セルのプロパティ] タブで 以 下 のプロパティを 設 定 します 1 コンテンツの 整 理 選 択 したセルのコンテンツを 垂 直 方 向 または 水 平 方 向 に 整 列 します 2 背 景 セルの 背 景 の 色 を 設 定 します 3 幅 / 高 さ セルの 幅 と 高 さをピクセルまたはパーセントで 指 定 します 4 ID セルに ID を 設 定 し 高 度 なセル 操 作 のオプションを 提 供 します( 高 度 なユーザーおよ び 開 発 者 向 け) 5 ラッピングなし セルの 折 り 返 しを 有 効 または 無 効 にします( 有 効 になっている 場 合 テキス トがセル 枠 に 達 すると 強 制 的 に 改 行 されます) 6 背 景 イメージ セルの 背 景 の 画 像 を 設 定 します 7 CSSクラス セルの CSS クラスおよびスタイルを 指 定 します CSS クラスは 選 択 したテ キストに 適 用 されている 定 義 済 みのスタイルです 3. [OK]をクリックします 38
39 KDDI ホスティングサービス G120, G200
4.5.3 ウェブページのHTMLソースの 修 正 SiteBuilder ではウェブページの 文 字 情 報 およびテーブル 情 報 は 自 動 的 に HTML コードに 変 換 されま す HTML (ハイパーテキストマークアップ 言 語 )は WWW (ワールドワイドウェブ) 上 の 情 報 や 画 像 や マルチメディアを 表 示 する 標 準 言 語 です タグプロパティ 機 能 を 使 用 して 選 択 したエレメントへの 異 な るスタイルの 適 用 およびプロパティの 変 更 が 簡 単 にできます SiteBuilder 編 集 ウィンドウの 下 端 に 現 在 マウスカーソルが 置 かれている 行 の HTML 構 造 を 表 す パネルが 表 示 されます 例 えば テーブルにマウスカーソルを 置 くと HTML コード 構 造 は TABLE TBODY TR TD 等 にな ります カーソルが 置 かれている 場 所 のタグが 太 字 で 表 示 されます ウェブページの HTML ソースを 修 正 するには 以 下 を 実 行 します 1. 編 集 したい 行 にマウスカーソルを 置 いてタグ 名 をクリックします 2. [タグのプロパティ]をクリックします 3. [タグのプロパティ]ダイアログボックスが 開 きます このダイアログボックスで 以 下 のプロパ ティを 変 更 できます 1 TABLE (テーブル) タグで セルの 間 隔 セルの 余 白 テーブルの 幅 および 高 さ テーブル およびセルの 整 列 を 調 整 し 枠 のスタイルを 定 義 することができます 2 TR (テーブル 行 ) タグで 列 の 色 および 枠 を 調 整 できます 3 TD (テーブルデータ) タグで テーブルのテキスト 余 白 マージン 装 飾 を 変 更 できます 4 A (リング) タグで リンクの 余 白 マージン テキストの 装 飾 を 変 更 できます 5 UL ( 番 号 なしリスト) および OL ( 番 号 付 きリスト) で リスト 項 目 のスタイルを 変 更 できます 6 HR ( 水 平 罫 線 ) タグで 色 および 枠 を 調 整 できます 7 IMG (イメージ) タグで 色 および 枠 を 調 整 できます 4. [OK]をクリックすると 変 更 がすぐに 編 集 画 面 に 適 用 されます 40
41
4.6 サイトの 公 開 SiteBuilder システムのユーザーカウントを 使 用 したサイトの 公 開 SiteBuilder の 登 録 ユーザーは 公 開 ボタン ができます をクリックする 事 でサイトを 公 開 すること 公 開 ボタンをクリックし サイトを 公 開 します 既 存 のコンテンツが 上 書 きされる 旨 の 警 告 が 表 示 された 場 合 は [OK] をクリックします 注 意 : 既 存 のコンテンツが 上 書 きされますのでご 注 意 ください 公 開 プロセスが 完 了 すると 以 下 の 画 面 が 開 きます 42
[ 編 集 に 戻 る]をクリックすると 編 集 の 画 面 に 戻 ります [サイトにいく]をクリックすると SiteBuilder で 作 成 したウェブサイトを 閲 覧 する 事 が 出 来 ます [ 完 了 ]をクリックすると SiteBuilderでの 作 業 を 終 了 します 43