ホームページ・ビルダー16

Size: px

Start display at page:

Download "ホームページ・ビルダー16"

しょうここうい
5 years ago
Views:

Part 2 テンプレートからページを作る (3) Part 2-3 テンプレートを使ってページを作ろうテンプレートを利用してホームページを作りましょうテンプレートを利用すると文字や画像を差し替えるだけで魅力的で華やかなページを作ることができます特にフル CSS テンプレートを利用して作ったページはページのデザインやレイアウトをスタイルシートで管理しているため

1 Part 2 テンプレートからページを作る (3) Part 2-3 テンプレートを使ってページを作ろうテンプレートを利用してホームページを作りましょうテンプレートを利用すると文字や画像を差し替えるだけで魅力的で華やかなページを作ることができます特にフル CSS テンプレートを利用して作ったページはページのデザインやレイアウトをスタイルシートで管理しているためあとから簡単にデザインやレイアウトの変更ができますヘッダーなどページに共通の部分をまとめて変えるメニューを追加する入れ替えるページを作るタイトルなどの画像を編集する文字を修正する画像を差し替える編集したページを保存するデザインやカラーレイアウトを変えるフル CSS テンプレートを利用して複数のページを作ると同じ場所に同じ内容が記載されていることに気が付きますページ上部のヘッダーや下部のフッターメニューやバナーなどですホームページビルダーではこれを共通部分と呼びますあるページで共通部分の文字やリンク先画像を変更するとほかのページに変更を反映することができます CSS スタイルシートはページ共通のフォーマット ( ロゴレイアウト配色ナビゲーションなど ) を定義するものです CSS は Cascading Style Sheets( カスケーディングスタイルシート ) の略ですスタイルシートを CSS ファイルと呼ばれるファイルにまとめておき HTML ファイルから呼び出すようにするとページに載せる情報とフォーマットとを別々に管理できますまた CSS ファイルを編集するだけでホームページ全体のフォーマットを変更することができます 22

デザイン ] の一覧からデザインを選びますデザインのカラーやレイアウトはあとから変更できますので (32 ページ ) ここでは基本のものを選んでおきます

2 Part 2 テンプレートからページを作る (4) ページを作るフル CSS テンプレートを利用してトップページと複数のサブページをまとめて作成しますかんたんナビバーの [ 新規作成 ] をクリックします ❷[ フル CSS テンプレート ] を選びます ❸[ テーマ ] の一覧からテーマを選び [ デザイン ] の一覧からデザインを選びますデザインのカラーやレイアウトはあとから変更できますので (32 ページ ) ここでは基本のものを選んでおきます ❹[OK] をクリックしますここでは複数のページをまとめて作成しますので [ 作成するページ ] は [ すべてのページ ] が選ばれた状態にしておきます 23

ホームページで使われているファイルの構成ページ間のつながり ( リンク ) などホームページ全体の構造を把握できるようになります ❺ ❻ ❼ ❽ ❼[

3 Part 2 テンプレートからページを作る (5) ❺[ 保存場所 ] にページを保存する場所を設定します ❻[ サイトをつくる ] にチェックがついている ( ) ことを確認し [ サイト名 ] にサイトの名前を入力しますホームページ用のファイルをまとめて管理するための場所 ( フォルダ ) ですサイトを作成しておくとホームページで使われているファイルの構成ページ間のつながり ( リンク ) などホームページ全体の構造を把握できるようになります ❺ ❻ ❼ ❽ ❼[ 基本情報の入力 ] で書き換えたい項目の内容を変更します ❽[ 保存 ] をクリックしますサイトが作成され編集画面に作成したサイトのトップページが表示されます 24

12 Part 2 テンプレートからページを作るデザインやカラーレイアウトを変えるフル CSS

めて変更することができますデザインを変える ❶かんたんナビバーのデザイン変更をクリックします

左側の一覧でデザインを変更するページにチェックをつけて OK をクリックします ❹ OK

4 12 Part 2 テンプレートからページを作るデザインやカラーレイアウトを変えるフル CSS テンプレートを利用して作成した複数のページはデザインやカラーレイアウトを簡単にまとめて変更することができますデザインを変える ❶かんたんナビバーのデザイン変更をクリックします ❷デザインを選びます ❸ ❸ ページの設定をクリックします ❹ ページの設定画面が表示されますので左側の一覧でデザインを変更するページにチェックをつけて OK をクリックします ❹ OK をクリックしますデザインチェンジを適用しますかが表示されたらよく読んではいをクリックしますページのデザインが変わります 31

5 13 Part 2 テンプレートからページを作るカラーやレイアウトを変える ❶かんたんナビバーのデザイン変更をクリックします ❷デザイン上に表示されるカラー選択やレイアウト選択をクリックするとカラーやレイアウトのバリエーションが表示されます好みのものをクリックするとカラーやレイアウトが選ばれます ❸ ❸ ページの設定をクリックします ❹ ページの設定画面が表示されますので左側の一覧でカラーやレイアウトを変更するページにチェックをつけて O K をクリックします ❹ OK をクリックしますデザインチェンジを適用しますかが表示されたらよく読んではいをクリックしますページのカラーやレイアウトが変わります 32

これに対してタイトル部分やメニューバナーなどで使われている文字付きの画像はスタイルシートで管理されている画像です ( ホームページビルダーでは背景画像と呼びます ) 操作 ❷で [ デジカメ写真の編集 ] が表示されない場合は

6 Part 2 テンプレートからページを作る (6) 文字を修正するページに表示されている文字を修正して目的に合った内容にします ❶ ページ内の文字列をクリックします ❷ 目的に合った内容を入力し不要な文字は b キーや d キーで削除します画像を差し替えるページに表示されている画像を別の画像に差し替えますここでは商品の紹介などで使われている画像を別の画像に差し替えます商品の紹介などで使われている画像は HTML ファイルに直接貼られている画像ですこれに対してタイトル部分やメニューバナーなどで使われている文字付きの画像はスタイルシートで管理されている画像です ( ホームページビルダーでは背景画像と呼びます ) 操作 ❷で [ デジカメ写真の編集 ] が表示されない場合は背景画像です背景画像の編集方法については 33 ページをご覧ください ❶ ページ内の画像をクリックします画像の周囲にハンドルマーク ( ) が付いたフォーカス枠が表示されます ❷ かんたんナビバーの [ デジカメ写真の編集 ] をクリックします 25

Part 2 テンプレートからページを作る (7) ❸[ 画像の指定 ] で [

(O)] をクリックします [ 写真挿入ウィザード ( 画像ファイルの指定 )]

では [ 属性の大きさ ( 表示サイズ )(A)] を選んで [ 次へ (N)]

7 Part 2 テンプレートからページを作る (7) ❸[ 画像の指定 ] で [ ファイルから (F)] をクリックし差し替えたい画像を選んで [ 開く (O)] をクリックします [ 写真挿入ウィザード ( 画像ファイルの指定 )] 画面に戻りますので [ 次へ (N)] をクリックします ❹[ サイズの指定 ] では [ 属性の大きさ ( 表示サイズ )(A)] を選んで [ 次へ (N)] をクリックします [ 画像の補正 ] では補正は行わないで [ 次へ (N)] をクリックします ❺[ 画像の特殊効果選択 ] では [ 飾り効果なし (1)] を選んで [ 完了 ] をクリックしますページ内の画像が差し替わります 26

] をクリックし [ 合成画像の編集 ] を選びます ❸ 合成画像の編集画面で [ オブジェクト一覧 ] から修正したい文字を選び ( 文字は [ ロゴ ] と表示されています )[ 編集 (E)] をクリックします ❹[ 文字 (T)]

8 Part 2 テンプレートからページを作る (14) タイトルなどの画像を編集するタイトル部分やメニューバナーなどで使われている画像を編集しますこれらの画像は文字複数の画像背景色の重なりをスタイルシートで管理して 1 つの画像に見せているものでホームページビルダーでは背景画像と呼びます背景画像を編集するとスタイルシートにも反映されますここではタイトル部分で使われている画像と文字を編集します ❶ ページ内のタイトル部分にある画像をクリックします ❷ かんたんナビバーの [ 背景画像の編集 ] をクリックし [ 合成画像の編集 ] を選びます ❸ 合成画像の編集画面で [ オブジェクト一覧 ] から修正したい文字を選び ( 文字は [ ロゴ ] と表示されています )[ 編集 (E)] をクリックします ❹[ 文字 (T)] の入力欄に表示されている文字を修正して [ 次へ (N)] をクリックします文字の色を選んで [ 次へ (N)] をクリック文字の縁取りを設定して [ 次へ (N)] をクリック最後に文字の効果を選んで [ 完了 ] をクリックします合成画像の編集画面に戻りロゴの文字が修正されます 33

Part 2 テンプレートからページを作る (15) ❺ 合成画像の編集画面で [ オブジェクト一覧 ] から差し替えたい画像を選びます [

削除 (D)] をクリックして画像を削除します ❻[ 追加 (A)] をクリックし [ ファイルから (F)][ 素材集から (G)]

をクリックします画像を選び終わったら合成画像の編集画面の [ オブジェクト一覧 ] に新しく入れる画像が追加されます ❼[

9 Part 2 テンプレートからページを作る (15) ❺ 合成画像の編集画面で [ オブジェクト一覧 ] から差し替えたい画像を選びます [ 位置とサイズ ] に表示される [ 幅 (W)] と [ 高さ (H)] の値 [ オブジェクト一覧 ] での位置をメモしますメモできたら [ 削除 (D)] をクリックして画像を削除します ❻[ 追加 (A)] をクリックし [ ファイルから (F)][ 素材集から (G)] などを選んでから画像を選びます例えば [ 素材集から (G)] を選んだ場合は素材集から開く画面で写真を選んで [ 開く (O)] をクリックします画像を選び終わったら合成画像の編集画面の [ オブジェクト一覧 ] に新しく入れる画像が追加されます ❼[ オブジェクト一覧 ] で画像を選び [ ][ 下へ ] を何回かクリックして ❺ でメモした位置まで移動します ❽ 新しく入れる画像の大きさを調整します 1.[ オブジェクト一覧 ] で画像を選び左のプレビュー画面上でハンドルマーク ( ) をドラッグして幅と高さを調整します使いたい部分が元の画像とほぼ同じ大きさになるようにします 2.[ 編集 (E)] をクリックし表示されたメニューから [ 画像の切り取り (C)] を選びます

[ イメージ ] 上の点線枠をドラッグして使いたい部分と重なるように位置を調整します 5.[OK] をクリックします合成画像の編集画面に戻ります 6.

❾ 文字の修正と画像の入れ替えが ❾ 終了したら [OK] をクリックします ❿ スタイルシートに反映してほかのページにある画像もまとめて変更するか

10 Part 2 テンプレートからページを作る (16) 3. 画像の切り取り画面で [ 位置とサイズ ] の [ 幅 (W)] と [ 高さ (H)] に ❺でメモしておいた元の画像のサイズを入力します 4.[ イメージ ] 上の点線枠をドラッグして使いたい部分と重なるように位置を調整します 5.[OK] をクリックします合成画像の編集画面に戻ります 6.[ 位置とサイズ ] の [X 座標 (X)] と [Y 座標 (Y)] に 0 を入力します ❾ 文字の修正と画像の入れ替えが ❾ 終了したら [OK] をクリックします ❿ スタイルシートに反映してほかのページにある画像もまとめて変更するか編集した画像があるページだけ変更するかを選びますここでは [ スタイルシートに反映する (S)] を選んで [OK] をクリックしますメニューやバナーで使われている画像などほかのページにも共通の画像の場合は [ スタイルシートに反映する (S)] を選びます編集したページの画像だけを変更したい場合は [ 編集したページだけに反映する (P)] を選びます ⓫ 外部 CSSファイルの更新確認画面で [ はい ] をクリックし画像ファイルを上書きしますで [ はい ] をクリックしますタイトル部分で使われている画像が変わります 35

素材ファイルをコピーして保存画面が表示されますそのまま [ 保存 ] をクリックします ❸ 再編集用フォルダについてが表示された場合は [ 閉じる (C)] をクリックします

11 Part 2 テンプレートからページを作る (11) 編集したページを保存するフル CSS テンプレートを利用してページを作成した場合ページはすでに名前を付けて保存されています編集した内容を保存するにはページを上書き保存します ❶ かんたんナビバーの [ 上書き保存 ] をクリックしますページが上書き保存されます ❷ 画像などの素材ファイルを追加した場合は素材ファイルをコピーして保存画面が表示されますそのまま [ 保存 ] をクリックします ❸ 再編集用フォルダについてが表示された場合は [ 閉じる (C)] をクリックします再編集用フォルダはロゴボタンフォトフレームなどを再編集するときに必要な元データが保存されるフォルダです再編集する可能性がある場合は削除しないように注意しましょう ❹ 編集したすべてのページについて ❶ ❸と同じようにしてページを上書き保存します 30

ホームページ・ビルダー16

ホームページ・ビルダー16 Part 2 テンプレートからページを作る(3) Part 2-3 テンプレートを使ってページを作ろうテンプレートを利用してホームページを作りましょうテンプレートを利用すると文字や画像を差し替えるだけで魅力的で華やかなページを作ることができます特にフル CSS テンプレートを利用して作ったページはページのデザインやレイアウトをスタイルシートで