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