トップページ作成　～ タイトルロゴを作成 ～

ヘッダーブロックでの編集です。タイトルが目立つようにロゴを作ってみます。

タイトルロゴを作成する

• 完成図

  • 
  • 文字列「ヘッダー」に代わって、My PC Life というロゴが挿入された。

ロゴを挿入する位置を指定します。

➊ページtop.htmlを開きます。

➋［ヘッダー］と入力した文字の後ろをクリックします。

• ロゴを入力する場所を指示

  • 
  • 文字列「ヘッダー」の後ろをクリックして、ロゴ挿入位置とする。

ロゴの作成ダイアログを表示します。

➌ナビメニューの［ロゴ（飾り文字）の挿入］をクリックします。

➍［ロゴ（飾り文字）］をクリックします。

• ▶［ロゴの作成］ダイアログが表示されます。

ロゴのデザインを決めます。

➎［文字］ボックスに、タイトルにする文字を入力します。

• ここでは、「My PC Life」と入力します。

➏デザインを選択します。

• ここでは、「000t04」をクリックします。

➐ ［文字の詳細設定］ボタンをクリックします。

• ロゴの作成

  • ここでは、「My PC Life」と入力します。
  • 
  • ページに見栄えのあるタイトルを挿入する。
  • ➌ナビメニューの［ロゴ（飾り文字）の挿入］をクリックし、
  • ❹［ロゴ（飾り文字）］を選択する。［ロゴの作成］ダイアログ（上図）が開くので、
  • ❺文字ボックスにロゴ文字を入力する。ここでは「My PC Life」と入力する。
  • ❻ロゴのデザインを選択する。ここでは「000t04」をクリックする。
  • ❼更に詳細を設定するので［文字の詳細設定］ボタンをクリックする。［ロゴ作成ウィザード］が開始する。

文字のサイズを設定します。

➑サイズボックスに「30」と入力します。

➒［次へ］ボタンをクリックします。

• ［ロゴ作成ウィザード］文字の指定

  • 
  • ［ロゴ作成ウィザード］（右図）が始まる。
  • ❽まず、文字のサイズを指定する。ここでは「30」と入力する。
  • ❾［次へ］ボタンをクリックする。

テクスチャを選択します。

➓［種類］の［テクスチャ］ボタンをクリックします。

⓫一覧をスクロールして使用したいテクスチャを選択します。

• ここでは、［wall16］をクリックします。

⓬［次へ］ボタンをクリックします。

• ロゴの色の選択

  • 
  • ❿色の選択ウィザードで、色の［種類］には［テクスチャ］を選択する。
  • ⓫テクスチャ一覧から［wall16］をクリックして選択する。
  • ⓬［次へ］ボタンをクリックする。

縁取りを選択します

⓭ロゴの縁取りを選択します。

• ここでは、［通常］を選択します。

⓮［次へ］ボタンをクリックします。

• ロゴの縁取りを選択

  • 
  • ⓭［縁取りの選択］ウィザードで、ロゴの縁取りの種類を一覧から選択する。ここでは［通常］を選択し、
  • ⓮［次へ］ボタンをクリックする。

文字効果の種類を選択する

⓯効果の種類を選択します。

• ここでは、［影］を選択します。

⓰［影の色］ボタンをクリックします。

• ロゴ文字効果の選択

  • 
  • ⓯文字効果の選択（右図）で、効果種類一覧から［影］を選択する。
  • ⓰［オプション］で［影の色］をクリックし、表示される［色の設定］ダイアログで影の色を選択する。

影の色を選択する

⓱影の色を選択します。

⓲［OK］ボタンをクリックします。

• 影の色の選択

  • 
  • ⓱［色の選択］ダイアログで、影の色を選択する。ここでは、右から３番目の薄い灰色を選択する。
  • ⓲［OK］ボタンをクリックし、［ロゴ作成ウィザード］へ戻る。

影の位置を設定する

⓳影の位置を指定します。

⓴［完了］ボタンをクリックします。

• ロゴ文字の影の位置を指定

  • 
  • ⓳［ロゴ文字作成ウィザード　ー　文字効果］に戻り［オプション］で影の位置を指定する。ここでは［影の位置　横］ボックスに「5」、［影の位置　縦］ボックスに「5」と入力する。
  • ⓴［完了］ボタンをクリックし、［ロゴの作成］ダイアログに戻る。

• ▶［ロゴの作成］ダイアログに戻ります。

㉑［完了］ボタンをクリックします。

• ロゴの作成の完了

  • 
  • ［ロゴの作成］ダイアログに戻ってくる。［プレビュー］では、作成したロゴが表示されている。
  • ㉑［完了］ボタンをクリックすると、ヘッダーレイアウトコンテナ内にタイトルロゴが作成される。

タイトルロゴが作成されヘッダーに入ったので、ヘッダーの文字を消す

㉒「ヘッダー」の文字列をドラッグする。

㉓［Delete］キーを押して削除する。

• レイアウトコンテナの文字を削除

  • 
  • ヘッダーレイアウトコンテナにタイトルロゴが作成されたので、印として入力していた「ヘッダー」文字を削除する。
  • ㉒「ヘッダー」の文字列を選択し反転させる。
  • ㉓キーボードの［Delete］あるいは［削除］キーを押して、文字を消す。
• 完成図

  • 

ロゴを変更する

作成したロゴはあとから編集することができます。

➊編集するロゴをクリックして選択します。

➋かんたんナビバーの［ロゴの編集］をクリックします。

➌［ロゴの作成］ダイアログが表示されます。

• ▶サイズやロゴの縁取り等を変更できます。

ページを保存する

画像を追加したページを［上書き保存］すると、［素材ファイルをコピーして保存］ダイアログが表示されます。

［素材ファイルをコピーして保存］ダイアログを起動する

➊かんたんナビバーの［上書き保存］ボタンを押します。

• ▶［素材ファイルをコピーして保存］ダイアログが表示されます。

➋ファイル名を確認します。

• ［素材ファイルをコピーして保存］ダイアログ

  • 
  • ページに作成し挿入したロゴ文字は画像ファイルで、サイト内には存在していない。ページを保存するときには、挿入された画像ファイルもサイト内に保存する必要がある。このためページ保存時には、保存する画像ファイル名や保存場所を確認・変更するために、［素材ファイルをコピーして保存］ダイアログが開く。
  • ➊ページのかんたんナビバーから［上書き保存］ボタンをクリックする。
  • ➋［素材ファイルをコピーして保存］ダイアログが開き、［ファイル名］［保存場所］が表示される。ファイル名を確認して、ファイル名を変更する場合は［ファイル名］ボックスに入力する。

ファイルの保存先を確認・変更する

➌［上書き時に自動的にファイル名を変更する］のチェックを外す

➍保存場所を確認し、必要に応じて保存場所の変更を行う。

• imgs フォルダーなど画像を保存する専用のサブフォルダーを設けている場合は、そのフォルダ―名へ保存先を変更します。

➎保存場所に同名の素材ファイルがある場合、それを置き換えるか別名で保存するかを判断し指定する。

• ［上書き時に自動的にファイル名を変更する］にチェックをいれるかどうかで指定する。同名ファイルをそのまま上書きして置き換える場合は、チェックを外す。置き換えない時はチェックを入れる。

❻［保存］ボタンをクリックする。

• 保存場所の変更と上書き時のファイル名の変更を許可

  • 
  • ［保存場所］の初期値は、サイト内でファイル型式ごとの保存場所（サブフォルダー）を設定している場合は、設定のサブフォルダーが保存場所になる。一方、ファイル型式ごとの保存場所を設定していない場合や、サイト自体が作成される前の段階では、保存するHTMLページと同じ場所が保存場所になる。これを変更することも可能である。
  • 保存場所や［参照］ボタンがグレーになっていて変更操作ができない時には、➌［上書き時に自動的にファイル名を変更する］のチェックを外し、❹保存場所を確認し、［参照］ボタンで必要に応じて保存場所を変更する。変更したフォルダーに同名の画像ファイルがあり、上書きしないで別名で保存するときは、❺［上書き時に自動的にファイル名を変更する］にチェックを入れる。❻希望場所に変更できたら［保存］ボタンをクリックする。

❼再編集用フォルダ ダイアログが出るので［閉じる］で応える。

• 再編集用フォルダ ダイアログ

  • 
  • ロゴを再編集する時に必要となるデータ（mif ファイル）が、__HPB_Recycled フォルダに保存された旨のダイアログが表示されるので、［閉じる］を押してダイアログを消す。
  • 再編集用フォルダについては、［再編集用フォルダ］を参照する。

• ▼ページと関連する素材ファイルが保存されました。
• ▼タイトルバーの *（未保存のマーク）が消えました。

保存先の内容を確認してみよう

❽エクスプローラーを起動し、保存先となっているフォルダーを選択し中身を表示する。

• エクスプローラーで表示する imgs フォルダー内容

  • 
  • 現時点での imgs フォルダーの内容は、ロゴ文字の画像と __HPB_Recycled フォルダー。ロゴ文字画像のファイル名は、➋で確認したものと同じファイル名である。__HPB_Recycled フォルダーは「再編集用フォルダー」と言われ、内にはロゴ文字画像を再編集するのに必要なデータ（mif ファイル）が保存されている。

HTML ソースの確認

➊ページtop.htmlを開きます。

➋［HTML ソース］をクリックし、ソースを表示します。

➌［ページ編集］をクリックし、編集画面に戻します。

ロゴや画像が挿入されたファイルを開くと［構文エラー］が出る時の対処

ホームページ・ビルダーを使って、HTML5 でページ作成する場合、ロゴや画像ファイルを保存したあと、そのファイルを開こうとすると”構文エラー”が出る場合があります（下記［ヒント］を参照）。エラーの内容は、”属性名（border）が未定義です。”と出ます。その時の対処です。

➊［エラー行を表示］をクリックします。

• 構文エラーのエラーメッセージ

  • 
  • ➊［構文エラー］のパネルが表示されたとき、エラーの内容を確認する。内容が、右図のように img タグ、すなわち画像の要素に ”属性(border)が未定義です。” となっている時は、これを削除する。そのためにエラーメッセージを選択し［エラー行を表示］ボタンをクリックする。▶ HTML ソース画面が表示され該当の箇所が反転表示されます。

➋ HTML ソースで、該当箇所を選択し、削除します。

• 構文エラーの箇所が表示された HTML ソース表示

  • 
  • ➋構文エラーの行が、HTMLソース内で反転表示されるので、その行内の文字列「border="0"」をドラッグして選択し、［Delete］あるいは［削除］キーで削除する。

➌［構文エラー］のパネルで［最新の情報に更新］をクリックします。

• 変更の確認

  • 
  • ➌［構文エラー］のパネルで、［最新の情報に更新］をクリックして確認する。エラー内容が”エラーはありません”と表示されれば完了。

➍［閉じる］をクリックし、［構文エラー］の表示を閉じます。

次はトップ画像ブロックの編集で、写真を挿入するに進みます。