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

CSSエディタの「背景タブ」の設定を使って、ページの背景の色や背景画像の指定を行います。
左側に表示されているセレクタ(下図のbody、.textなど)のリストから、背景を指定したいセレクタを選択してから、背景の設定を指定します。
CSSエディタ

背景色
ページの背景色を指定します。
右側のボタンをクリックすると色の選択パネルが表示されますので、好きな色を選びましょう。
カラーパレット以外にも16進数の色コードや色名(redやblueなど)での指定もできます。
カラーパレット
透明度
透明度の設定ができますが、ブラウザによって動きが異なるうえに、使いこなす為にはコツがあります。「opacity」というプロパティを使って設定されます。うまく設定すれば、下の図のようにテキスト部分の背景色を半透明して、その下にある背景画像をうっすらと見せるということもできます。
背景画像の透明度の設定サンプル
背景画像
ページの背景画像を指定します。指定した背景画像は画像の並べ方(デスクトップ画像の表示方法に近いイメージです)や表示する位置を指定することができます。
背景画像の並べ方は「タイリング」で指定します。この項目は背景画像の選択を行った場合のみ有効になります。
タイリングは「水平方向のみ」「垂直方向のみ」「両方向」の3種類から指定します。
背景画像のタイリング指定
ページスクロールで画像も一緒にスクロールする
このチェックを入れておく事により、ページをスクロールしても背景画像も一緒にスクロールさせることができます。背景画像をスクロールさせる場合はページの背景色と継ぎ目のようなものが無い画像のほうが自然になります。
背景画像の位置
背景画像の表示位置を、水平方向と垂直方向でそれぞれ「上」「中央」「下」から選ぶことができます。

最新の更新情報をRSSで配信していますので、よろしければ登録をお願いします。

こちらの記事もいかがですか?

コメント