ホームページビルダーで、ページの外枠に影をつける

2月 28, 2010
BESTグループ

ホームページビルダーで、ページの外枠(大枠の左右)に影をつける方法を、教えてください。


ご質問にお答えします。

影の簡単な付け方を、ご説明します。

まず、サイト大枠を作成する段階で、「行1列3」の横にセルが3つある表を作成します。
真ん中のセルが、現在の大枠内の内容を挿入するセル。左右のセルが影が挿入されるセルになります。(表・セルのサイズは、サイトの内容部分のサイズと影のサイズを考えて指定します)

次に、ウェブアートデザイナーで、影だけの画像を左右作成しておきます。

影画像の作成方法は2つの方法があります。

方法①:

なんでもいいので図形を描いておき、その図形に影をつけます。そして、影の部分だけを切り抜きツール(ハサミのツール)で切り取って作成します。

方法②:

グラデーションを利用して影を表現します。そして、作成した表の左右のセルに、「属性の変更」でセルの背景に影画像を適用します。真ん中のセルにカーソルをおいて改行をしていきます。そうしますと影の背景画像が連続表示になっていますので、枠に影がついたような表現が完成します。

ちなみに、影の画像は、左右のどちらか片方だけ作ればOKです。

画像を右クリックすると、「右回りに回転」「左回りに回転」というのがあります。画像を複製して、片方だけ回転させると楽にできます。

※ページの背景に画像を利用している方:ページの背景に画像を利用している場合は、背景と影がきれいに馴染みません。そこで、左右に配置する影の画像の背景を透明で作成します。透明にする方法は簡単です。切り抜きツールで影のみを切り抜く時に、「キャンバスを含まない」を選んで切り抜くと背景が透明になります。そして、保存形式に「PNG」を選んで保存をすると
背景が透明のまま保存できます。(PNGもホームページで使える画像形式ですが、容量が重くなるので頻繁には使わないようにしましょう)

No comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>