1. ホーム > 
  2. Webサイト制作 > 
  3. KompoZerの使い方 > 
  4. KompoZerのCSSエディタでページの背景を設定する方法

KompoZerのCSSエディタでページの背景を設定する方法

CSSエディタの「背景タブ」の設定を使って、ページの背景の色や背景画像の指定を行います。 CSSエディタの左側に表示されているセレクタ(図の場合はbody、.t […]

  • 2015/7/26
  • 2012/1/7

CSSエディタの「背景タブ」の設定を使って、ページの背景の色や背景画像の指定を行います。

CSSエディタの左側に表示されているセレクタ(図の場合はbody、.textなど)のリストから、背景を指定したいセレクタを選択してから、背景の設定を指定します。

CSSエディタ「背景」タブの使い方

KompoZerのCSSエディタ「背景」タブには、背景色、透明度、背景画像、タイリング、位置の、5つの設定項目があります。

それぞれの設定項目について、ひとつずつ解説します。

  • 背景色

    ページの背景色を指定します。
    右側のボタンをクリックすると色の選択パネルが表示されますので、背景に設定したい好きな色を選びましょう。

    カラーパレット以外にも16進数の色コードや色名(redやblueなど)での指定もできます。

  • 透明度

    透明度の設定ができますが、ブラウザによって動きが異なるうえに、使いこなす為にはコツがあります。

    「opacity」というプロパティを使って設定されます。

    うまく設定すれば、図のようにテキスト部分の背景色を半透明して、その下にある背景画像をうっすらと見せるということもできます。

  • 背景画像

    ページの背景画像を指定します。
    指定した背景画像は画像の並べ方(デスクトップ画像の表示方法に近いイメージです)や表示する位置を指定することができます。

    背景画像の並べ方は「タイリング」で指定します。この項目は背景画像の選択を行った場合のみ有効になります。
    タイリングは「水平方向のみ」「垂直方向のみ」「両方向」の3種類から指定します。

  • ページスクロールで画像も一緒にスクロールする

    このチェックを入れておく事により、ページをスクロールしても背景画像も一緒にスクロールさせることができます。

    背景画像をスクロールさせる場合はページの背景色と継ぎ目のようなものが無い画像のほうが自然になります。

  • 背景画像の位置

    背景画像の表示位置を、水平方向と垂直方向でそれぞれ「上」「中央」「下」から選ぶことができます。

「役にたった」と思ったらシェアお願いします