タイトル画像やトップ画像は、文字や複数の画像、背景色をスタイルシートで管理して、１つの画像を見せている「背景画像」です。背景画像の文字、画像、背景色はまとめて変更できます。
ここでは、トップページに含まれるトップ画像を変更しましょう。
■操作
１ 画像を選択する
- トップ画像をクリックします。
画像の周囲に、フォーカス枠が表示されます。
- かんたんナビバー下段の［背景画像の編集-合成画像の編集］を選択します。
［合成画像の編集］ダイアログボックスが表示されます。
２ 文字を編集する
- ［オブジェクト一覧］から変更したい文字を選択します。
文字は［ロゴ］と表示されています。
- ［編集］をクリックします。
- ［文字］の入力欄に表示されている文字、フォント、サイズを変更して、［次へ］をクリックします。
ここでは、フォントを「ARゴシック体M」、サイズを「15」にします。
※［スタイル］を変更すると、文字のスタイルを設定できます。
- 文字の色を選択して、［次へ］をクリックします。
ここでは、文字の色を黒に変更します。
- 文字の縁取りと縁の色を選択して、［次へ］をクリックします。
ここでは、縁の色を「白」にします。
- 文字の効果を選択して、［完了］をクリックします。
［合成画像の編集］ダイアログボックスに戻ります。
３ 画像を変更する
- ［オブジェクト一覧］で変更したい画像を選択し、［位置とサイズ］に表示されている［幅］と［高さ］、［オブジェクト一覧］での位置をメモします。
- ［削除］をクリックします。
- ［追加］をクリックし、表示されるメニューから変更後の画像がある場所を選択します。
ここでは、［素材集から］を選択します。
- 画像を選択して、［開く］をクリックします。
［合成画像の編集］ダイアログボックスに戻ります。
- ▼［下へ］を何回かクリックして、追加した画像の位置を、操作３-1.でメモしておいた位置まで移動します。
※［オブジェクト一覧］のオブジェクトの上下関係は、ページ上で文字や画像が重なる順番と同じです。
４ 画像の大きさを調整する
- ［編集］をクリックして表示されたメニューから［画像の切り取り］を選択します。
［画像の切り取り］ダイアログボックスが表示されます。
- ［位置とサイズ］の［幅］と［高さ］に、操作３-1.でメモしておいた、元の画像のサイズを入力します。
- ［イメージ］上の点線枠をドラッグして、使いたい部分と重なるように位置を調整します。
- ［OK］をクリックします。
［合成画像の編集］ダイアログボックスに戻ります。
- ［位置のサイズ］の［Ｘ座標］と［Ｙ座標］に「0」を入力します。
５ 編集を終了する
- ［合成画像の編集］ダイアログボックスの［OK］をクリックします。
- 外部CSSファイルの更新を確認するメッセージが表示されるので、［はい］をクリックします。
- 画像の上書きを確認するメッセージが表示されるので、［はい］をクリックします。
トップ画像が変更されます。
◆補足
- タイトル画像の文字を変更する
タイトル画像を選択して、かんたんナビバー下段の［背景画像の編集-合成画像の編集］をクリックします。
ログを編集してタイトル画像の文字を変更します。
- 画像を編集する
クリックしたときに、周囲のハンドルマーク（■）が表示されている画像は、HTMLファイルに直接貼り付けられている画像です。
かんたんナビバー下段の［デジカメ写真の編集］をクリックして、差し替えることができます。