テンプレートを利用してホームページを作りましょう。テンプレートを利用すると、文字や画像を差し替えるだけ で魅力的で華やかなページを作ることができます。 特にフル CSS テンプレートを利用して作ったページは、ページのデザインやレイアウトをスタイルシートで管理 しているため、あとから簡単にデザインやレイアウトの変更ができます。 ページを作る ヘッダーなどページに共通の 部分をまとめて変える タ イ ト ル な ど の 画像を編集する 文字を修正する メニューを追加する・ 入れ替える 画像を差し替える デザインやカラー・レイアウト を変える 編集したページを保存する フル CSS テンプレートを利用して複数のページを作ると、同じ場所に同じ内容が記載されていることに気が付き ます。ページ上部のヘッダーや下部のフッター、メニューやバナーなどです。ホームページ・ビルダーではこれを「共 通部分」と呼びます。あるページで共通部分の文字やリンク先、画像を変更すると、ほかのページに変更を反映す ることができます。 スタイルシートは、ページ共通のフォーマット（ロゴ・レイアウト・配色・ナビゲーションなど）を定義するものです。 スタイルシート（CSS）とは
かんたんナビバーの［新規作成］を クリックします。
■ページを作る
フルCSS
テンプレートを利用して、トップページと複数のサブページをまとめて作成します。 ［フルCSSテンプレート］を選びます。 ［テーマ］の一覧からテーマを選び、 ［デザイン］の一覧からデザインを選 びます。 デザインのカラーやレイアウトはあ とから変更できますので（32 ペー ジ）、ここでは、基本のものを選んで おきます。 ❹［OK］をクリックします。 ここでは、複数のページをまとめて作成しますので、［作成するページ］ は、［すべてのページ］が選ばれた状態にしておきます。 作成するページ❺［保存場所］にページを保存する場所 を設定します。 ❻［サイトをつくる］にチェックがつい ている（ ）ことを確認し、［サイ ト名］にサイトの名前を入力します。 ❺ ❻ ❼ ❽ ❼［基本情報の入力］で、書き換えたい 項目の内容を変更します。 ❽［保存］をクリックします。 サイトが作成され、編集画面に、作 成したサイトのトップページが表示 されます。 ホームページ用のファイルをまとめて管 理するための場所（フォルダ）です。サ イトを作成しておくと、ホームページで 使われているファイルの構成、ページ間 のつながり（リンク）など、ホームページ 全体の構造を把握できるようになります。 サイトとは
■デザインやカラー・レイアウトを変える
フルCSS
テンプレートを利用して作成した複数のページは、デザインやカラー、レイアウトを簡単にまと めて変更することができます。 ●デザインを変える かんたんナビバーの［デザイン変更］ をクリックします。 デザインを選びます。 ［ページの設定］をクリックします。 ❹「ページの設定」画面が表示されま すので、左側の一覧でデザインを変 更するページにチェックをつけて、 ［OK］をクリックします。 ❹［OK］をクリックします。 「デザインチェンジを適用します か？」が表示されたらよく読ん で、［はい］をクリックします。 ページのデザインが変わります。●カラーやレイアウトを変える かんたんナビバーの［デザイン変更］ をクリックします。 デザイン上に表示される、［カラー選 択］や［レイアウト選択］をクリッ クすると、カラーやレイアウトのバ リエーションが表示されます。 好みのものをクリックすると、カ ラーやレイアウトが選ばれます。 ［ページの設定］をクリックします。 ❹「ページの設定」画面が表示され ますので、左側の一覧でカラー やレイアウトを変更するページ にチェックをつけて、［OK］を クリックします。 ❹［OK］をクリックします。 「デザインチェンジを適用します か？」が表示されたらよく読ん で、［はい］をクリックします。 ページのカラーやレイアウトが 変わります。
ページ内の文字列をクリックします。
■文字を修正する
ページに表示されている文字を修正して、目的に合った内容にします。 目的に合った内容を入力し、不要な 文字は b キーや d キー で削除します。 ここでは、商品の紹介などで使われ ている画像を、別の画像に差し替え ます。■画像を差し替える
ページに表示されている画像を別の画像に差し替えます。 商品の紹介などで使われている画像は、HTML ファイルに直接貼られて いる画像です。これに対して、タイトル部分やメニュー・バナーなどで 使われている文字付きの画像は、スタイルシートで管理されている画像 です（ホームページ・ビルダーでは「背景画像」と呼びます）。操作❷で［デ ジカメ写真の編集］が表示されない場合は、背景画像です。背景画像の 編集方法については、33 ページをご覧ください。 画像の種類 ❶ページ内の画像をクリックします。 画像の周囲にハンドルマーク（■）が 付いたフォーカス枠が表示されます。 ❷かんたんナビバーの［デジカメ写真 の編集］をクリックします。❸［画像の指定］で［ファイルから（F）］ をクリックし、差し替えたい画像を 選んで、［開く（O）］をクリックし ます。 ［写真挿入ウィザード（画像ファイル の指定）］画面に戻りますので、［次 へ（N）］をクリックします。 ❺［画像の特殊効果選択］では、［飾り 効果なし（1）］を選んで、［完了］を クリックします。 ページ内の画像が差し替わります。 ❹［サイズの指定］では、［属性の大き さ（表示サイズ）（A）］を選んで［次 へ（N）］をクリックします。 ［画像の補正］では、補正は行わない で［次へ（N）］をクリックします。
■タイトルなどの画像を編集する
タイトル部分や、メニュー・バナーなどで使われている画像を編集します。 これらの画像は、文字・複数の画像・背景色の重なりをスタイルシートで管理して1
つの画像に見せてい るもので、ホームページ・ビルダーでは「背景画像」と呼びます。背景画像を編集すると、スタイルシー トにも反映されます。 ここでは、タイトル部分で使われて いる画像と文字を編集します。 ページ内のタイトル部分にある画像 をクリックします。 かんたんナビバーの［背景画像の編 集］をクリックし、［合成画像の編集］ を選びます。 「合成画像の編集」画面で、［オブジ ェクト一覧］から修正したい文字を 選び（文字は［ロゴ］と表示されてい ます）、［編集（E）］をクリックします。 ❹［ 文 字（ T ）］ の 入 力 欄 に 表 示 さ れ て い る 文 字 を 修 正 し て［ 次 へ （N）］をクリックします。文字 の色を選んで［次へ（N）］をクリ ック、文字の縁取りを設定して ［次へ（N）］をクリック、最後に 文字の効果を選んで［完了］をク リックします。❺「合成画像の編集」画面で、［オブジ ェクト一覧］から差し替えたい画像 を選びます。 ［位置とサイズ］に表示される［幅（W）］ と［高さ（H）］の値、［オブジェクト 一覧］での位置をメモします。 メモできたら、［削除（D）］をクリ ックして画像を削除します。 ❻［追加（A）］をクリックし、［ファイ ルから（F）］［素材集から（G）］な どを選んでから、画像を選びます。 例えば、［素材集から（G）］を選ん だ場合は、「素材集から開く」画面で 写真を選んで［開く（O）］をクリッ クします。 画像を選び終わったら、「合成画像の 編集」画面の［オブジェクト一覧］ に新しく入れる画像が追加されます。 ❼［オブジェクト一覧］で画像を選び、 ［▼］［下へ］を何回かクリックして、 ❺でメモした位置まで移動します。 ❽新しく入れる画像の大きさを調整し ます。 1.［オブジェクト一覧］で画像を選び、 左のプレビュー画面上でハンドル マーク（■）をドラッグして、幅 と高さを調整します。使いたい部 分が、元の画像とほぼ同じ大きさ になるようにします。 2.［編集（E）］をクリックし、表示 1. 2.
3.「画像の切り取り」画面で、［位置 とサイズ］の［幅（W）］と［高さ（H）］ に、❺でメモしておいた、元の画 像のサイズを入力します。 4.［イメージ］上の点線枠をドラッ グして、使いたい部分と重なるよ うに位置を調整します。 5.［OK］ をクリックします。 「合成画像の編集」画面に戻ります。 6.［位置とサイズ］の［X 座標（X）］ と［Y 座標（Y）］に「0」を入力 します。 3. 5. 6. ❾ 4. ❾文字の修正と画像の入れ替えが 終了したら、［OK］をクリック します。 ❿スタイルシートに反映してほか のページにある画像もまとめて 変更するか、編集した画像があ るページだけ変更するかを選び ます。ここでは［スタイルシート に反映する（S）］を選んで、［OK］ をクリックします。 ⓫「外部 CSSファイルの更新確認」 画面で［はい］をクリックし、「画 像ファイルを上書きします」で ［はい］をクリックします。 メニューやバナーで使われて いる画像など、ほかのページ にも共通の画像の場合は、［ス タイルシートに反映する（S）］ を選びます。編集したページ の画像だけを変更したい場合は、［編集したページだけに反映する（P）］ を選びます。
かんたんナビバーの［上書き保存］ をクリックします。 ページが上書き保存されます。 画像などの素材ファイルを追加した 場合は、「素材ファイルをコピーして 保存」画面が表示されます。そのま ま［保存］をクリックします。 フル
