フルCSSテンプレートを利用して作成したページの背景部分にあるロゴ画像(文字列と画像を組み合わせた部分)や画像は、編集したり入れ替えたりすることができます。
ここでは、画像を入れ替える方法と、元の画像に戻す方法を説明します。
それぞれの場合に応じて操作します。
I テンプレートの画像を季節の素材集の画像に変更する方法
季節の素材集の画像に変更する方法を説明します。
■操作
- 入れ替えたい画像を選択します。
※季節の素材集の画像は、デザイン「ファンシー」のタイトル画像にあわせて作成されています。
- スタイルに応じて以下の操作を行います。
※〔かんたん〕〔スタンダード〕:かんたんナビバーの[背景画像の編集]ボタンをクリックし、[合成画像の編集]を選択します。
※〔エディターズ〕:画像上で右クリックし、表示されるメニューから[背景画像の編集-合成画像の編集]を選択します。
[合成画像の編集]ダイアログボックスが表示されます。
[オブジェクト一覧]に、ロゴ画像の構成要素(オブジェクト)が表示されます。 - [追加]ボタンをクリックし、表示されるメニューで[素材集から]を選択します。
- [素材集から開く]ダイアログボックスが表示されるので、左側の一覧で「スマホ 今だけ増量 素材集16」を選択して、入れ替えたい素材を選択し、[開く]ボタンをクリックします。
[オブジェクト一覧]に追加されます。
- 入れ替える前の画像を選択して[削除]ボタンをクリックします。
入れ替える前の画像が、[オブジェクト一覧]から削除されます。
- 必要に応じて、[オブジェクト一覧]から手順4.で追加した画像を選択し、[上へ]ボタンや[下へ]ボタンをクリックして、他のオブジェクトとの重なり順を変更します。
- 必要に応じて、[選択オブジェクトの情報]の[位置とサイズ]の数値を変更して、画像の位置やサイズを変更します。
※操作/プレビュー領域で、画像を直接ドラッグして位置やサイズを変更することもできます。
- サイズ変更
画像の周囲にある■部分にマウスを合わせると、ポインタが
に変わるので、マウスをドラッグして、大きさを調整します。
- 位置の変更
画像内にマウスを合わせると、ポインタが
に変わるので、マウスをドラッグして、位置を調整します。
- サイズ変更
- 編集が終わったら、[OK]ボタンをクリックします。
[スタイル属性の変更方法の指定]ダイアログボックスが表示されます。
- [スタイルシートに反映する]または[編集したページだけに反映する]のどちらかを選択します。
- [スタイルシートに反映する]:該当するスタイルが記述されているCSS(スタイルシート)のセレクタに、指定のスタイルを記述します。同じCSSを使用しているほかのページに影響が出る可能性があります。
- [編集したページだけに反映する]:編集したページのスタイルだけを変更します。
- [OK]ボタンをクリックします。
※[スタイルシートに反映する]を選択した場合は、[外部 CSS ファイルの更新]ダイアログボックスが表示されるので、CSS ファイルを更新してよい場合は[はい]ボタンをクリックします。
- 「画像ファイルを上書きします。よろしいですか?」のメッセージが表示されるので、[いいえ]ボタンをクリックします。
※季節の素材の画像を元の画像に戻したい場合に必要なため、上書きはしないでください。
※手順9.で[編集したページだけに反映する]を選択した場合、このメッセージは表示されず、背景画像に編集内容が反映されます。このあと、手順13.へ進みます
- 「変更した画像の保存場所とファイル名を指定してください」のメッセージが表示されるので、[OK]ボタンをクリックします。
- 手順9.で選択した内容に応じて、以下の操作を行います。
- [スタイルシートに反映する]を選択した場合:[名前を付けて保存]ダイアログボックスが表示されるので、元の画像と同じ場所に別のファイル名(例:main_title_christmas.png)を入力し、[保存]ボタンをクリックします。
背景画像に、編集内容が反映されます。
- [編集したページだけに反映する]を選択した場合:ページを保存時に[素材ファイルをコピーして保存]ダイアログボックスが表示されるので、元画像と同じ場所に別名のファイル名(例:main_title_christmas.png)を入力し、[保存]ボタンをクリックします。
- [スタイルシートに反映する]を選択した場合:[名前を付けて保存]ダイアログボックスが表示されるので、元の画像と同じ場所に別のファイル名(例:main_title_christmas.png)を入力し、[保存]ボタンをクリックします。
II 季節の素材集の画像を元のテンプレートの画像に戻す方法
季節の素材集に入れ替えた画像を元の画像に戻す方法を説明します。
■操作
- 入れ替えたい画像を選択します。
- スタイルに応じて以下の操作を行います。
※〔かんたん〕〔スタンダード〕:かんたんナビバーの[背景画像の編集]ボタンをクリックし、[画像の入れ替え]を選択します。
※〔エディターズ〕:画像上で右クリックし、表示されるメニューから[背景画像の編集-画像の入れ替え]を選択します。
[画像の入れ替え]ダイアログボックスが表示されます。
- 「画像の指定」で[ファイルから]をクリックします。
[開く]ダイアログボックスが表示されます。
- 元の画像を選択し、[開く]ボタンをクリックします。
- [画像の入れ替え]ダイアログボックスに戻り、[OK]ボタンをクリックします。
[スタイル属性の変更方法の指定]ダイアログボックスが表示されます。
- [スタイルシートに反映する]または[編集したページだけに反映する]のどちらかを選択します。
- [スタイルシートに反映する]:該当するスタイルが記述されているCSS(スタイルシート)のセレクタに、指定のスタイルを記述します。同じCSSを使用しているほかのページに影響が出る可能性があります。
- [編集したページだけに反映する]:編集したページのスタイルだけを変更します。
- [OK]ボタンをクリックします。
※[スタイルシートに反映する]を選択した場合は、[外部 CSS ファイルの更新]ダイアログボックスが表示されるので、CSS ファイルを更新してよい場合は[はい]ボタンをクリックします。
背景画像に、編集内容が反映されます。