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