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

上級者向けサポート対象外

このFAQは、サポート対象外の操作を含む、上級者向けの内容です。お客様の責任のもと、ご利用ください。

フルCSSテンプレートから作成したページの背景の色を変更する方法について説明します。

※テンプレートの種類によっては、この手順どおり行っても変更できない場合があります。選択したテンプレートにおいて、以下の手順で色が変更できるか新規サイトを作成し、お試しいただくことをおすすめします。

▼注意

以下にご案内している以外の方法でフルCSSテンプレートを編集するには、詳しいCSS(スタイルシート)の知識が必要です。方法が分からない場合は、レイアウトが崩れる原因となりますので編集を行わないでください。
なお、ホームページ・ビルダーではCSS(スタイルシート)の編集についてはサポートしておりません。お客様の責任で行っていただくようお願いいたします。

■操作

スタイル設定の変更を行う

背景の色の設定内容を確認・変更します。

  1. ページ内の背景の色を変更したい位置をクリックします。
  2. 編集スタイルに応じて以下の操作を行います。

    〔かんたん〕〔スタンダード〕:かんたんナビバー*1の[ページの属性]ボタンをクリックします。

    *1かんたんナビバーが表示されていない場合は、[表示-かんたんナビ]を選択します。

    〔エディターズ〕:[編集-ページの属性]を選択します。

  3. [背景/文字色]タブを選択します。
  4. [背景画像]の右、あるいは[色指定]の[背景]の右の スタイル設定 *2をクリックします。

    属性

    *2この表示は該当項目がCSSで定義されていることを示しています。

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

  5. [スタイルシートに反映する]を選択し、[OK]ボタンをクリックします。

    [外部 CSS ファイルの更新確認]ダイアログボックスが表示されます。

  6. [はい]ボタンをクリックします。

    [色と背景]タブが選択された状態で[スタイルの設定]ダイアログボックスが表示されます。

    スタイルの設定

  7. 背景の色を変更する場合は[背景色]の右端の▼をクリックして表示されるメニューより色を選択します。
    • [背景画像]の[ファイル]の設定が空でない場合、設定されている画像ファイルのファイル名*3をメモなどに控えます。

      *3一番最後の"/"の右の「○○○.png」がファイル名になります。

    • 背景画像の設定を解除したい場合は、[ファイル]に設定されている文字をすべて削除し、「none」と入力後、[OK]ボタンをクリックします。
  8. 変更を反映する場合は[OK]ボタン、設定の確認のみの場合は[キャンセル]ボタンをクリックします。

画像ファイルを編集する

背景の形はそのままで、背景画像の色を変更したい場合にこちらの操作を行います。

  1. [編集-ページ内画像の編集]を選択します。
  2. 「スタイル設定の変更を行う」手順でメモなどに控えた画像ファイルを[画像一覧]*1より選択します。

    *1画像ファイルのサイズや形と、ページ内の背景のサイズや形は必ずしも一致しません。例えば、バナーの両サイドでは画像を繰り返し配置することで帯状に見せている場合があります。

  3. [編集]ボタンをクリックします。

    [ウェブアート デザイナー]が起動します。

  4. 変更したい色で塗りつぶします。

    ※詳しい操作方法はウェブアート デザイナーのヘルプをご覧ください。

  5. [ファイル-キャンバスを上書き保存]を選択します。
  6. [上書き保存]ボタンをクリックします。

    [PNG 属性の設定]ダイアログボックスが表示されます。

  7. [OK]ボタンをクリックします。
  8. [ウェブアート デザイナー]を終了します。

    [ページ内画像一覧]ダイアログボックスに戻ります。

  9. [OK]ボタンをクリックします。
  10. 編集スタイルに応じて以下の操作を行います。

    〔かんたん〕〔スタンダード〕:かんたんナビバーの[上書き保存]ボタンをクリックします。

    〔エディターズ〕:[ファイル-上書き保存]を選択します。

  11. [保存]ボタンをクリックします。
  12. サイトをいったん閉じて、再度サイトを開いて変更結果を確認します。

■関連情報

背景画像やリスト項目など、ほかの部分を変更したい場合は以下のFAQを参照してください。

フルCSSテンプレートを編集したい

▲ページの先頭へ戻る

ライン

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

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