[サポートFAQ]
ライン
更新日:2012.10.05 - 情報番号:050888
ライン
Q フルCSSテンプレートの背景画像を変更する
ライン
A FAQ改善アンケートにご協力ください

フルCSSテンプレートを利用して作成したページの背景部分にあるロゴ画像(文字列と画像を組み合わせた部分)や画像は、編集したり入れ替えたりすることができます。

ここでは、背景画像を入れ替える方法を説明します。

※以下の画面はホームページ・ビルダー15のものですが、ホームページ・ビルダー16以降でも、ほぼ同様の操作で行うことができます。

■操作

  1. 入れ替えたい画像を選択します。
  2. スタイルに応じて以下の操作を行います。

    〔かんたん〕〔スタンダード〕:かんたんナビバーの[背景画像の編集]ボタンをクリックし、[合成画像の編集]を選択します。

    〔エディターズ〕:画像上で右クリックし、表示されるメニューから[背景画像の編集-合成画像の編集]を選択します。

    [合成画像の編集]ダイアログボックスが表示されます。
    [オブジェクト一覧]に、ロゴ画像の構成要素(オブジェクト)が表示されます。

    合成画像の編集

  3. [追加]ボタンをクリックし、表示されるメニューで[ファイルから]または[素材集から]を選択します。

    合成画像の編集_追加

  4. [ファイルを開く]、または[素材集から開く]ダイアログボックスが表示されるので、入れ替えたい画像ファイルや素材を選択し、[開く]ボタンをクリックします。

    [オブジェクト一覧]に追加されます。

    オブジェクト一覧に追加

  5. 入れ替える前の画像を選択して[削除]ボタンをクリックします。  

    ※手順4.で追加した画像サイズを、もとのテンプレートの画像と同じサイズにしたい場合は、削除する前に、画像の幅と高さを確認しておき、手順7.で同じサイズを設定します。(または、ここで確認した画像サイズと同じサイズの画像を予め準備してから、手順4.で画像を追加すると、手順7.でのサイズ調整が必要なくなります。)

    オブジェクト一覧から削除

    入れ替える前の画像が、[オブジェクト一覧]から削除されます。

  6. [オブジェクト一覧]から手順4.で追加した画像を選択し、[上へ]ボタンや[下へ]ボタンをクリックして、他のオブジェクトとの重なり順を変更します。
  7. 必要に応じて、[選択オブジェクトの情報]の[位置とサイズ]の数値を変更して、画像の位置やサイズを変更します。

    位置とサイズ

    ※操作/プレビュー領域で、画像を直接ドラッグして位置やサイズを変更することもできます。

    操作/プレビュー領域

    • サイズ変更

      画像の周囲にある■部分にマウスを合わせると、ポインタが 右上向き矢印 左上向き矢印 上下の矢印 左右の矢印 に変わるので、マウスをドラッグして、大きさを調整します。

    • 位置の変更

      画像内にマウスを合わせると、ポインタが 十字矢印 に変わるので、マウスをドラッグして、位置を調整します。

    位置とサイズ変更結果

  8. 編集が終わったら、[OK]ボタンをクリックします。

    [スタイル属性の変更方法の指定]ダイアログボックスが表示されます。

    スタイル属性の変更方法の指定

  9. [スタイルシートに反映する]または[編集したページだけに反映する]のどちらかを選択します。
    • [スタイルシートに反映する]:該当するスタイルが記述されているCSS(スタイルシート)のセレクタに、指定のスタイルを記述します。同じCSSを使用しているほかのページに影響が出る可能性があります。
    • [編集したページだけに反映する]:編集したページのスタイルだけを変更します。
  10. [OK]ボタンをクリックします。

    ※[スタイルシートに反映する]を選択した場合は、[外部 CSS ファイルの更新]ダイアログボックスが表示されるので、CSS ファイルを更新してよい場合は[はい]ボタンをクリックします。

    背景画像に、編集内容が反映されます。

■関連情報

フルCSSテンプレートの共通部分を差し替える

フルCSSテンプレートのリスト項目を編集する

▲ページの先頭へ戻る

ライン

この情報は、お客様のお役に立ちましたか?

送信
ライン
※本情報の内容は、予告なく変更することがあります。
※本情報の一部または全部を無断で転載及び複写することを禁止します。
※記載された会社名、製品名は、弊社または各社の登録商標もしくは商標です。
弊社の登録商標についてはこちらをご参照ください。