スタイルシート＆ウエッブアートデザイナーを使った背景画像の作り方 いろいろなホームページを覗いていると、たまに大きな写真を背景画像として使用している ページを見かけることがあります。ふつうの操作で画像を背景に設定しただけではスクロールと共に背景画像も動いてしまいます。そこでこのコーナーではスクロールしても背景だけが固定されている背景画像の制作方法について解説します。 １．とりあえず背景画像を保存する。 まず新規ページを作り設定したい背景画像を通常の方法で設定してみましょう。 サンプル１ ２．サンプル１で作ったページに文字を入れようとしても背景の色が強すぎて文字が目立ちません。そこでウエッブアートデザイナーを使用して背景画像として使用する画像を背景に合うよう加工します。 ウエッブアートデザイナーを起動したら「ファイルから貼り付け」ボタンをクリックし、先ほど保存した背景画像を開きます。 ３．ウエッブアートデザイナーで背景の写真を開いたら写真の上をダブルクリックして 「オブジェクトの編集」ダイアログを表示します。 「オブジェクトの編集」の下方にある「透明度（Ｔ）」のレバーを動かして画像の透明度を ３０〜５０％程度に設定します。 「位地とサイズ」の設定内で「幅」「高さ」を表示させたい大きさに設定します。 今回は８００×６００に設定しています。 ４．ｗｅｂ用保存ウイザードを使ってファイルをフォルダ内に上書き保存します。 先ほど作ったサンプルページを見てみると背景画像が薄くなり文字が載りやすくなっているのが分かります。 サンプル２ ５．では、新たに背景の固定されたページを作ります。 ホームページビルダーの「スタイルシートマネージャーの表示」ボタンをクリックして スタイルシートマネージャーを表示します。 ６．追加ボタンを押してスタイルの設定ダイアログを表示すると「ＨＴＭＬのタグ候補」に「BODY」タグを選択、さらに「カラーと背景」タブをクリックします。 中央付近の「背景画像」の設定で「参照」ボタンを押し先ほどウエッブアートデザイナーで加工した画像ファイルを選択しOKを押します。 ７．さらに下方の「属性（A）」の設定で「繰り返さない」にチェックを入れ、 「水平方向」を「左」・「垂直方向」を「上」に設定しOKをクリックします。 サンプルのようになっていれば成功です。 サンプル