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
12 Part 2 テンプレートからページを作る デザインやカラー レイアウトを変える フル CSS テンプレートを利用して作成した複数のページは デザインやカラー レイアウトを簡単にまと めて変更することができます デザインを変える ❶かんたんナビバーの デザイン変更 をクリックします ❷デザインを選びます ❸ ❸ ページの設定 をクリックします ❹ ページの設定 画面が表示されま すので 左側の一覧でデザインを変 更するページにチェックをつけて OK をクリックします ❹ OK をクリックします デザインチェンジを適用します か が表示されたらよく読ん で はい をクリックします ページのデザインが変わります 31
13 Part 2 テンプレートからページを作る カラーやレイアウトを変える ❶かんたんナビバーの デザイン変更 をクリックします ❷デザイン上に表示される カラー選 択 や レイアウト選択 をクリッ クすると カラーやレイアウトのバ リエーションが表示されます 好みのものをクリックすると カ ラーやレイアウトが選ばれます ❸ ❸ ページの設定 をクリックします ❹ ページの設定 画面が表示され ますので 左側の一覧でカラー やレイアウトを変更するページ に チ ェ ッ ク を つ け て O K を クリックします ❹ OK をクリックします デザインチェンジを適用します か が表示されたらよく読ん で はい をクリックします ページのカラーやレイアウトが 変わります 32
Part 2 テンプレートからページを作る (6) 文字を修正する ページに表示されている文字を修正して 目的に合った内容にします ❶ ページ内の文字列をクリックします ❷ 目的に合った内容を入力し 不要な 文字は b キーや d キー で削除します 画像を差し替える ページに表示されている画像を別の画像に差し替えます ここでは 商品の紹介などで使われ ている画像を 別の画像に差し替え ます 商品の紹介などで使われている画像は HTML ファイルに直接貼られている画像です これに対して タイトル部分やメニュー バナーなどで使われている文字付きの画像は スタイルシートで管理されている画像です ( ホームページ ビルダーでは 背景画像 と呼びます ) 操作 ❷で [ デジカメ写真の編集 ] が表示されない場合は 背景画像です 背景画像の編集方法については 33 ページをご覧ください ❶ ページ内の画像をクリックします 画像の周囲にハンドルマーク ( ) が 付いたフォーカス枠が表示されます ❷ かんたんナビバーの [ デジカメ写真 の編集 ] をクリックします 25
Part 2 テンプレートからページを作る (7) ❸[ 画像の指定 ] で [ ファイルから (F)] をクリックし 差し替えたい画像を選んで [ 開く (O)] をクリックします [ 写真挿入ウィザード ( 画像ファイルの指定 )] 画面に戻りますので [ 次へ (N)] をクリックします ❹[ サイズの指定 ] では [ 属性の大きさ ( 表示サイズ )(A)] を選んで [ 次へ (N)] をクリックします [ 画像の補正 ] では 補正は行わないで [ 次へ (N)] をクリックします ❺[ 画像の特殊効果選択 ] では [ 飾り 効果なし (1)] を選んで [ 完了 ] を クリックします ページ内の画像が差し替わります 26
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
Part 2 テンプレートからページを作る (11) 編集したページを保存する フル CSS テンプレートを利用してページを作成した場合 ページはすでに名前を付けて保存されています 編集した内容を保存するには ページを上書き保存します ❶ かんたんナビバーの [ 上書き保存 ] をクリックします ページが上書き保存されます ❷ 画像などの素材ファイルを追加した場合は 素材ファイルをコピーして保存 画面が表示されます そのまま [ 保存 ] をクリックします ❸ 再編集用フォルダについて が表 示された場合は [ 閉じる (C)] を クリックします 再編集用フォルダは ロゴ ボタン フォトフレームなどを再編集するときに必要な元データが保存されるフォルダです 再編集する可能性がある場合は 削除しないように注意しましょう ❹ 編集したすべてのページについて ❶ ❸と同じようにしてページを上書き保存します 30