フルCSSテンプレートを利用して作成したページの背景部分にあるロゴ画像(文字列と画像を組み合わせた部分)や画像は、編集したり入れ替えたりすることができます。
ここでは、背景画像を入れ替える方法を説明します。
※以下の画面はホームページ・ビルダー15のものですが、ホームページ・ビルダー16以降でも、ほぼ同様の操作で行うことができます。
■操作
- 入れ替えたい画像を選択します。
- スタイルに応じて以下の操作を行います。
※〔かんたん〕〔スタンダード〕:かんたんナビバーの[背景画像の編集]ボタンをクリックし、[合成画像の編集]を選択します。
※〔エディターズ〕:画像上で右クリックし、表示されるメニューから[背景画像の編集-合成画像の編集]を選択します。
[合成画像の編集]ダイアログボックスが表示されます。
[オブジェクト一覧]に、ロゴ画像の構成要素(オブジェクト)が表示されます。 - [追加]ボタンをクリックし、表示されるメニューで[ファイルから]または[素材集から]を選択します。
- [ファイルを開く]、または[素材集から開く]ダイアログボックスが表示されるので、入れ替えたい画像ファイルや素材を選択し、[開く]ボタンをクリックします。
[オブジェクト一覧]に追加されます。
- 入れ替える前の画像を選択して[削除]ボタンをクリックします。
※手順4.で追加した画像サイズを、もとのテンプレートの画像と同じサイズにしたい場合は、削除する前に、画像の幅と高さを確認しておき、手順7.で同じサイズを設定します。(または、ここで確認した画像サイズと同じサイズの画像を予め準備してから、手順4.で画像を追加すると、手順7.でのサイズ調整が必要なくなります。)
入れ替える前の画像が、[オブジェクト一覧]から削除されます。
- [オブジェクト一覧]から手順4.で追加した画像を選択し、[上へ]ボタンや[下へ]ボタンをクリックして、他のオブジェクトとの重なり順を変更します。
- 必要に応じて、[選択オブジェクトの情報]の[位置とサイズ]の数値を変更して、画像の位置やサイズを変更します。
※操作/プレビュー領域で、画像を直接ドラッグして位置やサイズを変更することもできます。
- サイズ変更
画像の周囲にある■部分にマウスを合わせると、ポインタが
に変わるので、マウスをドラッグして、大きさを調整します。
- 位置の変更
画像内にマウスを合わせると、ポインタが
に変わるので、マウスをドラッグして、位置を調整します。
- サイズ変更
- 編集が終わったら、[OK]ボタンをクリックします。
[スタイル属性の変更方法の指定]ダイアログボックスが表示されます。
- [スタイルシートに反映する]または[編集したページだけに反映する]のどちらかを選択します。
- [スタイルシートに反映する]:該当するスタイルが記述されているCSS(スタイルシート)のセレクタに、指定のスタイルを記述します。同じCSSを使用しているほかのページに影響が出る可能性があります。
- [編集したページだけに反映する]:編集したページのスタイルだけを変更します。
- [OK]ボタンをクリックします。
※[スタイルシートに反映する]を選択した場合は、[外部 CSS ファイルの更新]ダイアログボックスが表示されるので、CSS ファイルを更新してよい場合は[はい]ボタンをクリックします。
背景画像に、編集内容が反映されます。
■関連情報