レイアウトの外枠に影をつける

まず、どのようにして、ブログの外枠に影（ドロップシャドウ）をつけているのか説明します。とはいっても、下のような影画像を作成して、単に背景画像にしているだけです＾＾


ブログ全体のレイアウト枠の横幅800px に、左右の影部分の15pxずつを追加した、横幅830pxの画像を、背景画像として、縦方向に繰り返し表示しています。

当ブログでは、ブログ全体のレイアウト枠（div id="container"）を囲むように、影背景用のdiv要素（div id="outer"）を追加して、そこにスタイルシートで影画像を指定しています。





では、具体的に、ブログの外枠に影（ドロップシャドウ）を付けるカスタマイズ方法を説明します。

1. 影の画像を作成する
まず、photoshopなどの画像処理ソフトを使って影画像を作成します。

Photoshopの場合でしたら、長方形ツールで、長方形（横：ブログ全体の横幅、縦：1px）を作成し、レイヤー効果の「光彩（外側）」でグラデーションやサイズを調整すると、思い通りの影画像が簡単に作成できます。

■ サンプル素材
下記のリンクを右クリックして[対象をファイルに保存]を選択するとサンプル画像がダウンロードできます。

• 影画像

横：830px [ブログ全体幅：800px、影（左）：15px、影（右）：15px]
縦：1px

2. HTMLテンプレートの編集
影画像を配置するdiv要素「<div id="outer"> </div>」を追加します。

例えば、当ブログのような固定幅レイアウトの場合でしたら、
ブログ全体のレイアウト枠「<div id="container"> </div>」を囲むように追加します。



＜HTML の記述例＞


3. CSSの編集
あとは、スタイルシートで、影画像の位置を調整すれば完成です。

＜CSS の記述例＞


参考になりましたら、応援お願いします。