Part 2 テンプレートからページを 作 る(3) Part 2-3 テンプレートを 使 ってページを 作 ろう テンプレートを 利 用 してホームページを 作 りましょう テンプレートを 利 用 すると 文 字 や 画 像 を 差 し 替 えるだけ で 魅 力 的 で 華 やかなページを 作 ることができます 特 にフル CSS テンプレートを 利 用 して 作 ったページは ページのデザインやレイアウトをスタイルシートで 管 理 しているため あとから 簡 単 にデザインやレイアウトの 変 更 ができます ヘッダーなどページに 共 通 の 部 分 をまとめて 変 える メニューを 追 加 する 入 れ 替 える ページを 作 る タイトルなどの 画 像 を 編 集 する 文 字 を 修 正 する 画 像 を 差 し 替 える 編 集 したページを 保 存 する デザインやカラー レイアウト を 変 える フル CSS テンプレートを 利 用 して 複 数 のページを 作 ると 同 じ 場 所 に 同 じ 内 容 が 記 載 されていることに 気 が 付 き ます ページ 上 部 のヘッダーや 下 部 のフッター メニューやバナーなどです ホームページ ビルダーではこれを 共 通 部 分 と 呼 びます あるページで 共 通 部 分 の 文 字 やリンク 先 画 像 を 変 更 すると ほかのページに 変 更 を 反 映 す ることができます CSS スタイルシートは ページ 共 通 のフォーマット(ロゴ レイアウト 配 色 ナビゲーションなど)を 定 義 するものです CSS は Cascading Style Sheets(カスケーディング スタイルシート)の 略 です スタイルシートを CSS ファイルと 呼 ば れるファイルにまとめておき HTML ファイルから 呼 び 出 すようにすると ページに 載 せる 情 報 と フォーマットとを 別 々 に 管 理 できます また CSS ファイルを 編 集 するだけで ホームページ 全 体 のフォーマットを 変 更 することができます 22
Part 2 テンプレートからページを 作 る(4) ページを 作 る フル CSS テンプレートを 利 用 して トップページと 複 数 のサブページをまとめて 作 成 します かんたんナビバーの[ 新 規 作 成 ]を クリックします ❷[フル CSS テンプレート]を 選 びます ❸[テーマ]の 一 覧 からテーマを 選 び [デザイン]の 一 覧 からデザインを 選 びます デザインのカラーやレイアウトはあ とから 変 更 できますので(32 ペー ジ) ここでは 基 本 のものを 選 んで おきます ❹[OK]をクリックします ここでは 複 数 のページをまとめて 作 成 しますので [ 作 成 するページ] は [すべてのページ]が 選 ばれた 状 態 にしておきます 23
Part 2 テンプレートからページを 作 る(5) ❺[ 保 存 場 所 ]にページを 保 存 する 場 所 を 設 定 します ❻[サイトをつくる]にチェックがつい ている( )ことを 確 認 し [サイ ト 名 ]にサイトの 名 前 を 入 力 します ホームページ 用 のファイルをまとめて 管 理 するための 場 所 (フォルダ)です サ イトを 作 成 しておくと ホームページで 使 われているファイルの 構 成 ページ 間 のつながり(リンク)など ホームページ 全 体 の 構 造 を 把 握 できるようになります ❺ ❻ ❼ ❽ ❼[ 基 本 情 報 の 入 力 ]で 書 き 換 えたい 項 目 の 内 容 を 変 更 します ❽[ 保 存 ]をクリックします サイトが 作 成 され 編 集 画 面 に 作 成 したサイトのトップページが 表 示 されます 24
Part 2 テンプレートからページを 作 る(6) 文 字 を 修 正 する ページに 表 示 されている 文 字 を 修 正 して 目 的 に 合 った 内 容 にします ❶ページ 内 の 文 字 列 をクリックします ❷ 目 的 に 合 った 内 容 を 入 力 し 不 要 な 文 字 は b キーや d キー で 削 除 します 画 像 を 差 し 替 える ページに 表 示 されている 画 像 を 別 の 画 像 に 差 し 替 えます ここでは 商 品 の 紹 介 などで 使 われ ている 画 像 を 別 の 画 像 に 差 し 替 え ます 商 品 の 紹 介 などで 使 われている 画 像 は HTML ファイルに 直 接 貼 られて いる 画 像 です これに 対 して タイトル 部 分 やメニュー バナーなどで 使 われている 文 字 付 きの 画 像 は スタイルシートで 管 理 されている 画 像 です(ホームページ ビルダーでは 背 景 画 像 と 呼 びます) 操 作 ❷で[デ ジカメ 写 真 の 編 集 ]が 表 示 されない 場 合 は 背 景 画 像 です 背 景 画 像 の 編 集 方 法 については 33 ページをご 覧 ください ❶ページ 内 の 画 像 をクリックします 画 像 の 周 囲 にハンドルマーク( )が 付 いたフォーカス 枠 が 表 示 されます ❷かんたんナビバーの[デジカメ 写 真 の 編 集 ]をクリックします 25
Part 2 テンプレートからページを 作 る(7) ❸[ 画 像 の 指 定 ]で[ファイルから(F)] をクリックし 差 し 替 えたい 画 像 を 選 んで [ 開 く(O)]をクリックし ます [ 写 真 挿 入 ウィザード( 画 像 ファイル の 指 定 )] 画 面 に 戻 りますので [ 次 へ(N)]をクリックします ❹[サイズの 指 定 ]では [ 属 性 の 大 き さ( 表 示 サイズ)(A)]を 選 んで[ 次 へ(N)]をクリックします [ 画 像 の 補 正 ]では 補 正 は 行 わない で[ 次 へ(N)]をクリックします ❺[ 画 像 の 特 殊 効 果 選 択 ]では [ 飾 り 効 果 なし(1)]を 選 んで [ 完 了 ]を クリックします ページ 内 の 画 像 が 差 し 替 わります 26
8 Part 2 テンプレートからページを作る メニューを追加する 入れ替える メニューやバナーなど同じデザインやレイアウトの複数の項目は 1 つのまとまりとして管理されています ホームページ ビルダーではこれを リスト項目 と呼びます リスト項目を追加する リスト項目の追加は 既存のリスト 項目を複製して行います ❶ページ内のメニューをクリックします ❷かんたんナビバーの リスト項目 の編集 をクリックし リスト項 目の複製 を選びます ❶でクリックしたメニューの右または 下に リスト項目の複製が追加され ます ここでは 右に追加されてい ます ❸ページ上で 追加されたリスト項目 の文字列やリンク先を修正します リンク先の修正手順 リンク文字 にカーソルを移動 かんたんナビ バーの リンクの設定 をクリッ クして リンクの設定 を選ぶ ペ ージや URL へのリンクを作成する P を選んで 次へ N をク ID の設定方法 画面が表示されたときは リック 次へ N をクリック ID を新しく設定する 2 を選 リンク先 にリンク先のペー んで ID を入力し OK をクリ ジを指定して 完了 をクリック ックします ID は HTML ソースの目印とし する て使われる識別子です 例えば 今回のリスト項目の追加のよう メニューやバナーなどほかのページにも 共通のリスト項目に追加をした場合 ほ かのページにも追加を反映するには 共 通部分の同期 を実行します に 特定部分にスタイルシートの スタイルを適用させる場合などには必要となります ID は特に難しい名 称にする必要はありません 複製元の ID の末尾に数字を追加するなど ほかと同じにならない名称にするとよいでしょう 29 ページ ヘッダーなどページに共 通の部分をまとめて変える 27
Part 2 テンプレートからページを 作 る(9) 追 加 したリスト 項 目 の 場 所 を 変 更 し ます ❶ページ 内 のメニューをクリックします ❷かんたんナビバーの[リスト 項 目 の 編 集 ]をクリックし [リスト 項 目 を 前 へ 移 動 ]を 選 びます メニューが 1 つ 前 へ 移 動 します [リスト 項 目 を 後 へ 移 動 ]を 選 ぶと リスト 項 目 は 後 ろに 移 動 します メニューやバナーなどほかのページにも 共 通 のリスト 項 目 の 順 序 を 変 更 した 場 合 ほかのページにも 順 序 の 変 更 を 反 映 するには 共 通 部 分 の 同 期 を 実 行 し ます 29 ページ ヘッダーなどページに 共 通 の 部 分 をまとめて 変 える 28
10 Part 2 テンプレートからページを作る ヘッダーなどページに共通の部分をまとめて変える ヘッダー フッターやメニュー バナーなどほかのページにも共通の部分 共通部分 は あるページ で文字やリンク先 画像を変更すると ほかのページにその変更を反映することができます 注意 共通部分は ヘッダーやメニューなどの大きなまとまりでほかのページに反映されます 反映され る部分には 共通の部分であることを示す色付きの枠が表示されます ❶変更した部分をクリックします ここではヘッダーを変更しています ❷かんたんナビバーの 共通部分の同 期 をクリックします 共通部分の同期 が表示されない 場合 その部分は共通部分ではあり ません 変更をまとめて反映するこ とはできません 未保存の素材ファイルがあります が表示された場合は 共通部分に 画像を変更または追加し その画像がまだ保存されていません かんた んナビバーの 上書き保存 をクリックしてページを上書き保存してか ら もう一度❶ ❷を行ってください ❸左側の一覧で変更を反映するページ にチェックがついていることを確認 し 完了 をクリックします 同期を行いますか が表示された らよく読んで はい をクリックし ます ❹ほかのページに切り替えて 変更し た部分が反映されていることを確認 します ❺ほかに変更した部分があれば 変更 した部分をクリックし ❷ ❹と同 じようにして同期を実行します 例えば メニューのリスト項目を追 加した場合は メニューをクリック してから❷ ❹を実行します 29
Part 2 テンプレートからページを 作 る(11) 編 集 したページを 保 存 する フル CSS テンプレートを 利 用 してページを 作 成 した 場 合 ページはすでに 名 前 を 付 けて 保 存 されています 編 集 した 内 容 を 保 存 するには ページを 上 書 き 保 存 します ❶かんたんナビバーの[ 上 書 き 保 存 ] をクリックします ページが 上 書 き 保 存 されます ❷ 画 像 などの 素 材 ファイルを 追 加 した 場 合 は 素 材 ファイルをコピーして 保 存 画 面 が 表 示 されます そのま ま[ 保 存 ]をクリックします ❸ 再 編 集 用 フォルダについて が 表 示 された 場 合 は [ 閉 じる(C)]を クリックします 再 編 集 用 フォルダは ロゴ ボタン フォトフレームなどを 再 編 集 する ときに 必 要 な 元 データが 保 存 されるフォルダです 再 編 集 する 可 能 性 が ある 場 合 は 削 除 しないように 注 意 しましょう ❹ 編 集 したすべてのページについ て ❶ ❸と 同 じようにしてペ ージを 上 書 き 保 存 します 30
12 Part 2 テンプレートからページを作る デザインやカラー レイアウトを変える フル CSS テンプレートを利用して作成した複数のページは デザインやカラー レイアウトを簡単にまと めて変更することができます デザインを変える ❶かんたんナビバーの デザイン変更 をクリックします ❷デザインを選びます ❸ ❸ ページの設定 をクリックします ❹ ページの設定 画面が表示されま すので 左側の一覧でデザインを変 更するページにチェックをつけて OK をクリックします ❹ OK をクリックします デザインチェンジを適用します か が表示されたらよく読ん で はい をクリックします ページのデザインが変わります 31
13 Part 2 テンプレートからページを作る カラーやレイアウトを変える ❶かんたんナビバーの デザイン変更 をクリックします ❷デザイン上に表示される カラー選 択 や レイアウト選択 をクリッ クすると カラーやレイアウトのバ リエーションが表示されます 好みのものをクリックすると カ ラーやレイアウトが選ばれます ❸ ❸ ページの設定 をクリックします ❹ ページの設定 画面が表示され ますので 左側の一覧でカラー やレイアウトを変更するページ に チ ェ ッ ク を つ け て O K を クリックします ❹ OK をクリックします デザインチェンジを適用します か が表示されたらよく読ん で はい をクリックします ページのカラーやレイアウトが 変わります 32
Part 2 テンプレートからページを 作 る(14) タイトルなどの 画 像 を 編 集 する タイトル 部 分 や メニュー バナーなどで 使 われている 画 像 を 編 集 します これらの 画 像 は 文 字 複 数 の 画 像 背 景 色 の 重 なりをスタイルシートで 管 理 して 1 つの 画 像 に 見 せてい るもので ホームページ ビルダーでは 背 景 画 像 と 呼 びます 背 景 画 像 を 編 集 すると スタイルシー トにも 反 映 されます ここでは タイトル 部 分 で 使 われて いる 画 像 と 文 字 を 編 集 します ❶ページ 内 のタイトル 部 分 にある 画 像 をクリックします ❷かんたんナビバーの[ 背 景 画 像 の 編 集 ]をクリックし [ 合 成 画 像 の 編 集 ] を 選 びます ❸ 合 成 画 像 の 編 集 画 面 で [オブジ ェクト 一 覧 ]から 修 正 したい 文 字 を 選 び( 文 字 は[ロゴ]と 表 示 されてい ます) [ 編 集 (E)]をクリックします ❹[ 文 字 (T)]の 入 力 欄 に 表 示 さ れている 文 字 を 修 正 して[ 次 へ (N)]をクリックします 文 字 の 色 を 選 んで[ 次 へ(N)]をクリ ック 文 字 の 縁 取 りを 設 定 して [ 次 へ(N)]をクリック 最 後 に 文 字 の 効 果 を 選 んで[ 完 了 ]をク リックします 合 成 画 像 の 編 集 画 面 に 戻 り ロゴの 文 字 が 修 正 されます 33
Part 2 テンプレートからページを 作 る(15) ❺ 合 成 画 像 の 編 集 画 面 で [オブジ ェクト 一 覧 ]から 差 し 替 えたい 画 像 を 選 びます [ 位 置 とサイズ]に 表 示 される[ 幅 (W)] と[ 高 さ(H)]の 値 [オブジェクト 一 覧 ]での 位 置 をメモします メモできたら [ 削 除 (D)]をクリ ックして 画 像 を 削 除 します ❻[ 追 加 (A)]をクリックし [ファイ ルから(F)][ 素 材 集 から(G)]な どを 選 んでから 画 像 を 選 びます 例 えば [ 素 材 集 から(G)]を 選 ん だ 場 合 は 素 材 集 から 開 く 画 面 で 写 真 を 選 んで[ 開 く(O)]をクリッ クします 画 像 を 選 び 終 わったら 合 成 画 像 の 編 集 画 面 の[オブジェクト 一 覧 ] に 新 しく 入 れる 画 像 が 追 加 されます ❼[オブジェクト 一 覧 ]で 画 像 を 選 び [ ][ 下 へ]を 何 回 かクリックして ❺でメモした 位 置 まで 移 動 します ❽ 新 しく 入 れる 画 像 の 大 きさを 調 整 し ます 1.[オブジェクト 一 覧 ]で 画 像 を 選 び 左 のプレビュー 画 面 上 でハンドル マーク( )をドラッグして 幅 と 高 さを 調 整 します 使 いたい 部 分 が 元 の 画 像 とほぼ 同 じ 大 きさ になるようにします 2.[ 編 集 (E)]をクリックし 表 示 されたメニューから[ 画 像 の 切 り 取 り(C)]を 選 びます 1. 2. 34
Part 2 テンプレートからページを 作 る(16) 3. 画 像 の 切 り 取 り 画 面 で [ 位 置 とサイズ]の[ 幅 (W)]と[ 高 さ(H)] に ❺でメモしておいた 元 の 画 像 のサイズを 入 力 します 4.[イメージ] 上 の 点 線 枠 をドラッ グして 使 いたい 部 分 と 重 なるよ うに 位 置 を 調 整 します 5.[OK]をクリックします 合 成 画 像 の 編 集 画 面 に 戻 ります 6.[ 位 置 とサイズ]の[X 座 標 (X)] と[Y 座 標 (Y)]に 0 を 入 力 します 3. 4. 5. 6. ❾ 文 字 の 修 正 と 画 像 の 入 れ 替 えが ❾ 終 了 したら [OK]をクリック します ❿スタイルシートに 反 映 してほか のページにある 画 像 もまとめて 変 更 するか 編 集 した 画 像 があ るページだけ 変 更 するかを 選 び ます ここでは[スタイルシート に 反 映 する(S)]を 選 んで [OK] をクリックします メニューやバナーで 使 われて いる 画 像 など ほかのページ にも 共 通 の 画 像 の 場 合 は [ス タイルシートに 反 映 する(S)] を 選 びます 編 集 したページ の 画 像 だけを 変 更 したい 場 合 は [ 編 集 したページだけに 反 映 する(P)] を 選 びます ⓫ 外 部 CSSファイルの 更 新 確 認 画 面 で[はい]をクリックし 画 像 ファイルを 上 書 きします で [はい]をクリックします タイトル 部 分 で 使 われている 画 像 が 変 わります 35